Hi, I have a WebTab control with two contenttabitems, each with the UserControlUrl property set. The WebTab's AutoPostBackFlag.SelectedIndexChanged is set to On.
When I change the active tab item, I see a strange behaviour: first, the client is updated (i.e. I see the newly selected tab content) and then comes the postback, that refreshes the tabitem content. This is very annoying, because in the server side event I load new data, so the user experience is very bad (the user clicks on the tab item, sees the old content, then - after the postback - the updated content).
I've tried with an updatepanel containing my webtab, but obiuvsly nothing changes.
What can I do?
Thanks
Giovanni
Hello Giovanni,
You could try to set the UserControlUrl property on the server on SelectedIndexChanged or set AutoPostBackFlag.SelectedIndexChanged to Async.
Let me know if this helps.
Hi Giovanni,
When end user changed selected tab, then content of new tab is displayed without delay and does not wait for a possible response from server.
Currently there is no option to change that, though, it is possible to add a special property for WebTab, which would change that functionality. As far as I remember nobody requested similar feature. If you think that similar feature is important, then please let us know. A name of property which would enable that behavior would be helpful too.
Application may process SelectedIndexChanged/Changing client side events and modify functionality of webtab. I can see 2 options:
1. Process SelectedIndexChanging event, cancel it, use internal method to change object-value of selected tab index and trigger a postback. Coming response will restructure/fix html.
2. Process SelectedIndexChanged event, hide content of new selected tab and show content of old tab. Coming response will restructure/fix html.Note: to get index of old selected tab, processing SelectedIndexChanged is needed.
Below are examples for those 2 options.
1.<script type="text/javascript"> function WebTab1_SelectedIndexChanging(sender, eventArgs) { eventArgs.set_cancel(true); sender._set_value($IG.TabProps.SelectedIndex, eventArgs.get_tabIndex()); sender._postAction(1, ''); } </script>
<ig:WebTab ID="WebTab1" ...> ... <ClientEvents SelectedIndexChanged="WebTab1_SelectedIndexChanged" SelectedIndexChanging="WebTab1_SelectedIndexChanging" /> <AutoPostBackFlags SelectedIndexChanged="On" /> </ig:WebTab>
2.<script type="text/javascript"> var oldTabIndex, newTabIndex; function WebTab1_SelectedIndexChanged(sender, eventArgs) { var oldTab = sender.getTabAt(oldTabIndex); var newTab = sender.getTabAt(newTabIndex); $util.display(newTab.get_element(), true); $util.display(oldTab.get_element()); } function WebTab1_SelectedIndexChanging(sender, eventArgs) { oldTabIndex = eventArgs.get_oldTabIndex(); newTabIndex = eventArgs.get_tabIndex(); } </script>
<ig:WebTab ID="WebTab1" ...> ... <ClientEvents SelectedIndexChanged="WebTab1_SelectedIndexChanged" SelectedIndexChanging="WebTab1_SelectedIndexChanging" /> <AutoPostBackFlags SelectedIndexChanged="On" /></ig:WebTab>
If you have any questions regarding the matter, please do not hesitate to ask.