Adding a Tab via JavaScript with a close button?

945

Shane posted over 11 years ago

Hello,

I have a WebTab (12.2) on a page that has 5 tabs I want to keep fixed. By clicking on a button in the content area of any of those tabs, i am calling the following javascript function:

function addTab() {
var webTab = $find("<%= wt_default.ClientID%>");
webTab.addTab("Case Details", 'Case.aspx', true);
webTab.set_height(700);
}

That part is working fine but, i also want the new tab to have a close button wile the other 5 existing tabs to not have one. I tried setting each tab with EnableCloseButton ="False" wile having <CloseButton Enabled="true" /> above the <tab> tags and It looked like it almost worked as it added a space for the close button but didn't actually create the button. Only way i've gotten it to appear is if the first tab is already set with the EnabledCloseBUtton = True and the rest of the tabs are equal to false will the above code work... but i need the first tab's close button set to false as well.

Is there a way to make the close button enabled via javascript function i made above?

Thanks!

17590

Offline Vasya Kacheshmarova posted over 11 years ago in reply to Vasya Kacheshmarova

Hello Shane,

Feel free to contact me if you have any further questions regarding this matter.
Cancel
Reply

Cancel
17590

Offline Vasya Kacheshmarova posted over 11 years ago in reply to Shane

Hello Shane,

Thank you for sharing you experience with the community!

I have created a separate support ticket for you with number of CAS-112973-F8R5B1. To ensure that it will recieve attention, I have logged this behavior in our internal tracking system with a development ID of 137727. The next step will be for a developer to review my investigation and confirm my findings or to offer a fix, or other resolution.

I will leave this case open and update you with any new information after the review. You can also continue to send updates to this case at any time.

You can view the status of the development issue connected to this case by selecting the "Development Issues" tab when viewing this case on the website.

Please let me know if you need more information.
Cancel
Reply

Cancel
945

Shane posted over 11 years ago in reply to Vasya Kacheshmarova

Hi.

I appear to have found another workaround this morning. If a make an empty ContentTabItem at the top of the tags and make it hidden. Then it operates the way I would expect by triggering the javascript in the original thread, the webtab will create a new tab with the close button visable. Something about the first ContentTabItem has to have it in order for a new tab to have it as well..... sounds like a bug or bad programming to me. But for now its working.

       <ig:WebTab ID="wt_default" runat="server" Height="700px" Width="99.85%" DisplayMode="Scrollable" SelectedIndex="1">
            <CloseButton Enabled="true" />
            <Tabs>
                <ig:ContentTabItem runat="server" Text="hidden" EnableAjax="False" AutoSize="True" Hidden="true" />
                <ig:ContentTabItem runat="server" Text="Dashboard" EnableAjax="False" AutoSize="False" EnableCloseButton="False" />
                <ig:ContentTabItem runat="server" EnableAjax="False" Text="Informational Messages" AutoSize="False" EnableCloseButton="False"   />
                <ig:ContentTabItem runat="server" EnableAjax="False" Text="Priority News Bulletins" AutoSize="False" EnableCloseButton="False" />
                <ig:ContentTabItem runat="server" EnableAjax="False" Text="Service Disruptions" AutoSize="False" EnableCloseButton="False" />
                <ig:ContentTabItem runat="server" EnableAjax="False" Text="Reports" AutoSize="False" EnableCloseButton="False" />
            </Tabs>
        </ig:WebTab>

Thank you for looking into this and for other code snippet. I might need it one day!!
Cancel
Reply

Cancel
17590

Offline Vasya Kacheshmarova posted over 11 years ago
Hello Shane,

Thank you for posting in the community.

Please note that the only supported operation on the client is to append(not insert) new tab item. In this situation a special flag is passed from client to server and view states of all existing/old tabs is preserved. The delete tab item on the client is not supported because it will not be possible to maintain viewstate of old tab items. Some further reference may be found at:

http://es.infragistics.com/community/forums/t/71211.aspx?PageIndex=1

Currently I am investigating your issue and will ask our engineering staff to examine this further. The next step will be a developer to review my investigation and confirm my findings or to offer a fix, or other resolution. I will provide you with the number of the internal task for you to be able to view the status of development issue connected to this case. You can also continue to send updates to this case at any time.

As an alternative approach, I can suggest putting the WebTab in an update panel and make an asynchronous call to the server vie the javascript _doPostBack method as such:

function addTab(){

       var webTab = $find("<%= WebTab1.ClientID %>");

        webTab.addTab("New Tab");

        __doPostBack('<%=UpdPan.ClientID %>',null);

    }

I am attaching the sample project used to test this. My test was performed using version 12.2.20122.2075 .

Hope this helps. Please feel free to contact me if you have any additional questions regarding this matter.
WebTabCloseButton.zip
Cancel
Reply

Cancel