Hi,
I am new to Ultrawebtab. I have a requirement to display a popup when the user clicks on another tab. I'm using a div to show the popup. This popup has three buttons: yes, no, cancel. Am displaying the popup using jquery In the clientside event BeforeSelectedTabChange.
Based on any of the three buttons clicked, i have to decide whether stay on the tab or not.
If 'cancel' button is clicked, I want to restrict the event by using the code oEvent.cancel = true;
For 'Yes' and 'No' buttons, it should move to the tab clicked.
function UltraWebTab_BeforeSelectedTabChange(oWebTab, oTab, oEvent) {
showDialog('myPopup');
// if cancel button or close(X) on the popup clicked.
oEvent.cancel = true;
// else oEvent.cancel = false;
}
function ClosePopup() {
closeDialog('myPopup'); return false; }
function showDialog(id) {
$('#' + id).dialog("open"); }
function closeDialog(id) {
$('#' + id).dialog("close"); }
please see the popup button code for the button
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="return ClosePopup();" />
Setting a value based on the user input is okay? But the user may not click the button soon like that..
Any help anyone could produce would highly be appreciated.
Many thanks
Ratheesh
Hi Ratheesh,
Thank you for posting in the community.
As far as I can understand, your question is how to conditionally change the selected tab of UltraWebTab based on the clicked element inside your popup.
The approach you are using is correct - the tab changing should be cancelled when the popup is being displayed and based on what the user clicks in the popup, the selected tab may be later programmatically changed. Note that the oTab argument passed to the handler in this case is the new tab to be selected, and its index can be accessed via:
oTab.getIndex()
I suggest that you store the index of this tab when cancelling the event. Subsequently you can programmaticallly change the selected tab in javascript when handling the "OK" button's clientside click event. The selected tab may be changes using something similar to:
igtab_getTabById("UltraWebTab1").setSelectedIndex(1)
Please let me know if this helps.
Thanks Petar for the help provided. It was very useful and encouraged me to go ahead in the same direction.
I have improved the code based on your input.
var index = 0;
function UltraWebTab1_BeforeSelectedTabChange(oWebTab, oTab, oEvent) {
index = oTab.getIndex(); // saving the index to be used in the Yes button clientclick event
closeDialog('myPopup'); }
function MoveToSelectedTab() {
closeDialog(' myPopup ');
var ultraWebTab = igtab_getTabById("UltraWebTab1");
if (ultraWebTab == null) return; // here am getting null.
ultraWebTab.setSelectedIndex(index); // setting index
return false;
<asp:Button ID="btnYes" runat="server" Text=Yes" Width="50" OnClientClick="return MoveToSelectedTab();" OnClick="btnYes_Click" />
Do you know why igtab_getTabById("UltraWebTab1") giving me null? any syntax issue? I hope its a minor one for you.. once again many thanks for the reply.
Hi Petar,
I have solved the issue of getting null in
var ultraWebTab = igtab_getTabById("UltraWebTab1"); by modifying it to
var ultraWebTab = igtab_getTabById('<%= UltraWebTab1.ClientID%>');
Now the issue is the tabclick server side event ( protected void UltraWebTab1_TabClick(object sender, Infragistics.WebUI.UltraWebTab.WebTabEvent e)) does n't get fired. I want this to get fired to load data under the tab. So my question is: Is it possible to fire the tabclick server side event when the button is clicked?
Thanks in advance
Thank you for your reply. Feel free to contact me if any questions arise.
Many thanks for the reply which I believe will solve the issues. I have not tested it yet. The task is in hold now. I will update you once it is done.
Thanks
Please contact me if you have any further questions regarding this matter.
Thank you for the reply.
With the previous setup I have suggested, i.e. changing the selected index on the client and triggering a postback in order to fire TabClick on the server, you would have the chance to access and update the previously selected tab using:
e.PreviousSelectedTab
Note also that you may set the selected tab on the server. For instance:
UltraWebTab1.SelectedTabIndex = 1;
Hope this helps.
As a work around I used
previousIndex = oWebTab.getSelectedIndex(); to get the old tab for saving.. It getting me the old tab.
Tab oldTab = UltraWebTab1.Tabs.GetTab(previousIndex); // gives the old tab
oldTab.ContentPane.Controls[0]; // But this doesnt give me value..
Do you have any idea?
Let me once again make my point clear. Is there a way I could do the saving on the old tab and then setting the new tab index and moving to the new tab. Is there a way to set the tab index in the code behind for the same? Any help would highly be appreciated.