Hi,
It is useful to use Async mode of ultrawebtab for maintaining state of a tabs.I am using ultrawebtab version 8.2 control.I am adding tabs dynamically in ultrawebtab on click of treenode from treeview.But tabs are not shown.
<igtab:UltraWebTab ID="tabControl" BorderStyle="None" runat="server" Style="border-spacing: 0px;" ViewStateMode="Disabled" DisplayMode="Scrollable" LoadAllTargetUrls="false" EnableAppStyling="True" EnableTheming="true" Height="100%" EnableViewState="false" AsyncMode="On" selectedindex="4" ThreeDEffect="false" Width="100%" Visible="true" AutoPostBack="false" ClientIDMode="Static" BrowserTarget="Auto"> <RoundedImage FillStyle="LeftMergedWithCenter" NormalImage="imageedit_2_2287647459.jpg" SelectedImage="imageedit_13_4149283003.jpg" HoverImage="imageedit_16_3964612111.jpg" /> <ScrollButtons LeftButton-Image="prev_up_new.gif" LeftButton-DisabledImage="prev_disabled_new.gif" LeftButton-HoverImage="prev_hover_new.gif" LeftButton-PressedImage="prev_down_new.gif"> </ScrollButtons> <ScrollButtons RightButton-Image="next_up_new.gif" RightButton-DisabledImage="next_disabled_new.gif" RightButton-HoverImage="next_hover_new.gif" RightButton-PressedImage="next_down_new.gif"> </ScrollButtons> <AsyncOptions EnableProgressIndicator="true" Triggers="Default" RequestContext="IncludeFormData" ResponseContext="IncludeAllTabs"/> </igtab:UltraWebTab>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="Inline"> <ContentTemplate> <asp:Panel ID="pnl" runat="server"> <ignav:UltraWebTree ID="TreeView1" runat="server" EnableAppStyling="False" EnableViewState="true" CssClass="featureTree" Style="cursor: pointer; overflow: auto; overflow-x: hidden; display: block; position: absolute; height: 100%; top: 0px; width: 100%; bottom: 5px;" EnableTheming="false" Visible="true" AutoPostBack="false" ClientIDMode="Static" WebTreeTarget="ClassicTree" OnNodeClicked="TreeView1_NodeClicked" OnNodeExpanded="TreeView1_NodeExpanded"> </ignav:UltraWebTree> </asp:Panel> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="TreeView1" EventName="NodeExpanded" /> <asp:AsyncPostBackTrigger ControlID="rpsearch" EventName="ItemCommand" /> <asp:AsyncPostBackTrigger ControlID="btnRefresh" EventName="Click" /> </Triggers> </asp:UpdatePanel>
protected void TreeView1_NodeClicked(object sender, WebTreeNodeEventArgs e) { tab.ContentPane.TargetUrl = dRow["HTTPAddress"].MakeValid_WebAddress().ToString();
tab = new Tab(); tab.Text = string.Format("{0}{1}", string.Empty.PadRight(2), dRow["ObjectName"]) + "<img src='icons/close_button.gif' style='vertical-align:middle;padding-left:8px'onmouseover='mousein(event)' onmouseout=mouseout(event) onclick='closeTab("" + dRow["ObjectName"].ToString() + "")'>"; //tab.Text = dRow["ObjectName"].ToString(); tab.DefaultImage = node.ImageUrl; tab.ImageAlign = ImageAlign.AbsMiddle; //tab.DefaultImage.PadRight(100,'8'); tab.Key = dRow["ObjectName"].ToString(); tabControl.Tabs.Add(tab);
tab.Visible = true; tab.Enabled = true; tabControl.SelectedTab = tabControl.Tabs.GetTabIndex(tab); tabControl.SelectedTabStyle.Font.Bold = true; tabControl.Visible = true; }
Hello Prajakta ,
Thank you for posting in our forum.
It seems like the UltraWebTree is inside a UpdatePanel. During the postback ,initiated due to the Node’s click on the tree, only the content inside the UpdatePanel will be updated.
Since the UltraWebTab is outside of the update panel it will not be updated so the new tab that’s added on the server side will not appear on the client.
In order for the UltraWebTab to reflect the change that occurs on the server side you would need to either remove the update panel or move the UltraWebTab so that it’s inside the update panel as well.
Let me know if you have any questions or concerns.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://ko.infragistics.com/support
Thanks for your reply.
I have added the ultrawebtab in another updatepanel and updated it on treenode clicked and now tabs are visible to me.But still the state of control is not maintained since i am showing pdf files in tabs.
Scenario is When i scroll down the pdf in first tab and left it.after that i added 2nd tab dynamically and image url to its target url. now my selected tab is tab which conatains the image.after that i left my browser window return to visual studio or any other place then again after some seonds return back to my browser window. and try to open the first tab it will reload the pdf file and it will scroll to first page.i didnt understood why this is happening.
2nd scenario:-
When i open pdf file in first tab and scroll it down.then opened 2 nd and third tab on treenode click.2nd and 3rd tab should contain any other file type than pdf.then move to first tab.you can notice that pdf is scrolled to 1st page again.
Basically i want that file position should remain as it is when i move from one tab to another or any other window.it should reloaded.
Hello Prajakta,
Please feel free to contact us if you need any further assistance with this matter.
I’ve tested this and it seem that the iframe by default will reload the file in it on postback.
When that happens, the scrollbar will be in the beginning of the file. The state will not be persisted over postback.
I’ve attached a sample that demonstrates the same behavior in an isolated scenario. The page contains an iframe that loads a pdf and a button inside an update panel.
On click of the button, the iframe reloads the file and the pdf’s scroll position is not maintained.
It appears that this is the default behavior of the iframe when reloaded and the behavior is not related to the UltraWebTab.
Let me know if you have any questions.
following is the source code generated when i open 3 tabs and 3rd tab is active currently contains pdf file.I think its pdf scrollposition.
<table id="igtabtabControl" class="igtab_Control_Outer" width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" acss="igtab_DefaultTab_Top_Rounded ig_5cc17707_r7+igtab_HoverTab_Top_Rounded ig_5cc17707_r8+igtab_SelectedTab_Top_Rounded ig_5cc17707_r9+igtab_DisabledTab_Top_Rounded+igtab_DefaultTab_Top_Edge+ig_Button igtab_Button+ig_ButtonHover igtab_ButtonHover+ig_ButtonPressed igtab_ButtonPressed+ig_ButtonDisabled igtab_ButtonDisabled" style="border-spacing:0px;" tabid="tabControl">
Are you referring to the scrollbar position of the Tab or to the scrollbar position in the pdf document?
Also could you let me know what is the exact approach you’re using in order to load the pdf inside the tab?