Git Product home page Git Product logo

Comments (10)

cristinadorotan avatar cristinadorotan commented on June 30, 2024 2

You need to inspect the tab panel element and see that the disabled CssClass is added on each tab you visited and never removed.

I completed with css to be more, visual, here is the link to the project:

https://we.tl/EeDOKGhazv

Thank you!

from ajaxcontroltoolkit.

cristinadorotan avatar cristinadorotan commented on June 30, 2024 1

I cannot upload ZIP files, please download from: https://we.tl/HpcOwvo0n9 the project. Thank you!

from ajaxcontroltoolkit.

MikhailTymchukDX avatar MikhailTymchukDX commented on June 30, 2024

@cristinadorotan
Would you please provide a sample project that illustrates this issue?

from ajaxcontroltoolkit.

cristinadorotan avatar cristinadorotan commented on June 30, 2024

Hy, I have the project but how do I send it to you ? (ASp Web Forms, VB.Net) when I select a TAB, navigate to others, return to the first one selected, the CSSClass for each active and disabled is set on that TAB. This messes up our entire project, because we have specific styles for a disabled tab.

from ajaxcontroltoolkit.

MikhailTymchukDX avatar MikhailTymchukDX commented on June 30, 2024

You can attach an archive with the project to your comment.

from ajaxcontroltoolkit.

cristinadorotan avatar cristinadorotan commented on June 30, 2024

Essentially my problem is that the ajax__tab_disabled class remains on each tab after I access them.

image
My file is ZIP, but I t won't let me upload it.

from ajaxcontroltoolkit.

MikhailTymchukDX avatar MikhailTymchukDX commented on June 30, 2024

I downloaded the sample you provided and clicked on tab headers at the About.aspx page, but see no disabled tabs.
Do I need to perform any special action to reproduce this issue?

from ajaxcontroltoolkit.

MikhailTymchukDX avatar MikhailTymchukDX commented on June 30, 2024

@cristinadorotan To work around this issue, you can remove the ajax__tab_disabled CSS class in the OnClientClick event handler.
As this event occurs before the class is applied, a little timeout is required:

<script type="text/javascript">
    function removeDisabledClass() {
        var tabIDs = eval('<%= GetTabIDs()%>');

        setTimeout(function() {
            for(var i = 0; i < tabIDs.length; i++) {
                var header = document.getElementById(tabIDs[i] + "_tab");
                header.classList.remove("ajax__tab_disabled");
            }
        }, 50);
    }
</script>

<ajaxToolkit:TabContainer ID="tab_Container" runat="server">

    <ajaxToolkit:TabPanel ID="tb_A" HeaderText="OPTION_A" runat="server" OnClientClick="removeDisabledClass">
    </ajaxToolkit:TabPanel>

    <ajaxToolkit:TabPanel ID="tb_B" HeaderText="OPTION_B" runat="server" OnClientClick="removeDisabledClass">
    </ajaxToolkit:TabPanel>

    <ajaxToolkit:TabPanel ID="tb_C" HeaderText="OPTION_C" runat="server" OnClientClick="removeDisabledClass">
    </ajaxToolkit:TabPanel>

    <ajaxToolkit:TabPanel ID="tb_D" HeaderText="OPTION_D" runat="server" OnClientClick="removeDisabledClass">
    </ajaxToolkit:TabPanel>

</ajaxToolkit:TabContainer>

GetTabIDs s a utility method that is used to get an array of header IDs.
I have attached the updated sample project AjaxControlToolkitTabIssueUpd.zip

from ajaxcontroltoolkit.

cristinadorotan avatar cristinadorotan commented on June 30, 2024

Thank you, how does this work when I want to disable a tab on purpose ?

from ajaxcontroltoolkit.

MikhailTymchukDX avatar MikhailTymchukDX commented on June 30, 2024

You need to exclude this tab from the class removal loop like this:

    <script type="text/javascript">
        var disabledTabIndex = 2; // can be set by external code

        function removeDisabledClass() {
            var tabIDs = eval('<%= GetTabIDs()%>');

            setTimeout(function() {
                for(var i = 0; i < tabIDs.length; i++) {
                    if(i === disabledTabIndex)
                        continue;

                    var header = document.getElementById(tabIDs[i] + "_tab");
                    header.classList.remove("ajax__tab_disabled");
                }
            }, 50);
        }
    </script>

...

<ajaxToolkit:TabPanel
    ID="tb_C"
    HeaderText="OPTION_C"
    runat="server"
    OnClientClick="removeDisabledClass"
    Enabled="false" />

from ajaxcontroltoolkit.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.