I have WinTab with 6 tabs.
Each tab has it's own user control.
I do not want the user to be able to switch tabs unless the current tab is successfully validated. I do not see any server events to accomplish this.
Any suggestions on how to do this?
Hi,
There is no server option to do that. However, you may process and cancel event on client if fields are not field or have wrong values. Example:
<script type="text/javascript">function UltraWebTab1_BeforeSelectedTabChange(oWebTab, oTab, oEvent){ var oldTab = oWebTab.getSelectedTab(); if(oldTab.getIndex() == 0) { var text1 = oldTab.findControl("TextBox1"); var text2 = oldTab.findControl("TextBox2"); if(!text1 || !text2) { alert("can not find fields in tab 0"); return; } if(text1.value.length < 1 || text2.value.length < 1) { alert("Text1:" + text1.value + " text2:" + text2.value); oEvent.cancel = true; } } if(oldTab.getIndex() == 1) { var text3 = oldTab.findControl("TextBox3"); var text4 = oldTab.findControl("TextBox4"); if(!text3 || !text4) { alert("can not find fields in tab 1"); return; } if(text3.value.length < 1 || text4.value.length < 1) { alert("Text3:" + text3.value + " text4:" + text4.value); oEvent.cancel = true; } }}</script>
<igtab:UltraWebTab ID="UltraWebTab1" runat="server"> <ClientSideEvents BeforeSelectedTabChange="UltraWebTab1_BeforeSelectedTabChange" /> <Tabs> <igtab:Tab Text="New Tab"> <ContentTemplate> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </ContentTemplate> </igtab:Tab> <igtab:Tab Text="New Tab"> <ContentTemplate> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox> </ContentTemplate> </igtab:Tab> </Tabs></igtab:UltraWebTab>
Thank you Viktor the information was most helpful. I do have another question.
My aspx form is calling a user control.
<td class="center"> <uc1:SpellChecker ID="SpellChecker1" runat="server" /> </td>
I want to be able to validate in that tab that the user completed the information on this user control. How would I accompish this?
Contents of my user control is:
<igtxt:WebTextEdit ID="webtxtShortDesc" runat="server" Height="350px" Width="98%" BorderStyle="Ridge" BackColor="#CCFFFF" CssClass="center" > <BorderDetails StyleBottom="Ridge" StyleLeft="Ridge" StyleRight="Ridge" StyleTop="Ridge" /> </igtxt:WebTextEdit><input id="btnSpellCheck" runat="server" type="button" value="Check Spelling" /><ig_spell:WebSpellChecker ID="WebSpellChecker1" runat="server"></ig_spell:WebSpellChecker>
Thanks,
Jim
Hi Jim,
If I undestood correctly you need some validations for child controls located in tabs. In case of controls such as WebTextEdit or WebSpellChecker you need to use not their html elements, but their script objects. For example, to find a reference to javascript object which represents WebTextEdit, you may use igedit_getById(clientID_of_WebTextEdit) or you may try search it within members of igedit_all. To validate if spellchecker "completed" its operation, you may process its ClientSideEvents.SpellCheckComplete. Example below shows how to find reference to webtxtShortDesc located in 1st tab and cancel tab change if text is empty.
<script type="text/javascript">var mySpellCompleted = false;function WebSpellChecker1_SpellCheckComplete(oWebSpellChecker, oEvent, uncheckedText, checkedText){ mySpellCompleted = true;}
function UltraWebTab1_BeforeSelectedTabChange(oWebTab, oTab, oEvent){ if(oWebTab.getSelectedIndex() != 0) return; var txt = null; for(var id in igedit_all) { if(id && id.indexOf('webtxtShortDesc') >= 0) { txt = igedit_all[id]; break; } } if(!txt) return; if(txt.getText().length < 1) oEvent.cancel = true;// if(!mySpellCompleted)// oEvent.cancel = true;}</script>
If you have multiple instances of a user control, then to get references to javascript object located in that control can be tricky. You may try to find exact value of spell-checker's ClientID on client (and to which tab it is located) by searching through items in ig_all. For example, if you process button click event linked to a spell-checker, then you may find reference to spell checker by checking match with its member function getButtonId().
For example, if you have client event for spell-checker's button, then something like below will find ClientID of spell-checker and index of tab where button is located:
function btnSpellCheck_onclick(event){ var spellChecker = null; if(!event) event = window.event; if(!event) return; var button = event.srcElement; if(!button) button = event.target; if(!button) return; var butID = button.id; for(var id in ig_all) { var ctl = ig_all[id]; if(ctl && ctl.getButtonId && ctl.getButtonId() == butID) { spellChecker = ctl; break; } } if(!spellChecker) return; var webTab = igtab_getTabById("UltraWebTab1"); var tabIndex = webTab.Tabs.length; while(tabIndex-- > 0) { var tab = webTab.Tabs[tabIndex]; // assume that button is located directly in tab if(button.parentNode == tab.elemDiv) break; } alert("id=" + spellChecker._id + " tab=" + tabIndex);}
I kind of understand what you are saying.
In my JavaScript I have:
if (oldTab.getIndex() == 0) { ......................... text = oldTab.findControl("webtxtShortDesc"); if (text.value.length < 1) { required += "'Short Description' is a required field.\r\n"; } }
else if (oldTab.getIndex() == 3) { var text = oldTab.findControl("webtxtShortDesc"); if (text.value.length < 1) { required += "'Short Description' is a required field.\r\n"; } }
The 1st tab works fine since there is only 1 SpellChecker UserControl on it.
However for the 4th tab I have 5 SpellChecker UserControls on this page. So how can I tell the difference between them?
I thought I could user "UltraWebTab1_ctl0_SpellChecket3_webtxtShortDesc" instead of "webtxtShortDesc", but that doesn't seem to work.
The aspx page for the 4th tab has:
<uc1:SpellChecker ID="SpellChecker3" runat="server" />
<uc1:SpellChecker ID="SpellChecker4" runat="server" />
<uc1:SpellChecker ID="SpellChecker5" runat="server" />
<uc1:SpellChecker ID="SpellChecker6" runat="server" />
What am I missing?