locked
Issues with using User Control in TabPanel of TabConatiner - Button event not fired and Load Tabpanel on pageload RRS feed

  • Question

  • User-223976922 posted

    Hello,

    I am trying to add Ajax Tabcontainer to my webpage, and stuck in mid way with some issues during implementation.


    Here is what is done so far:
    1. I have a webapage with Tabcontainer1 with 4 tab panels(lets say TabPanel 1-4).
    2. Since Tabpanel need to list same kind of form template, I have created a user Control(uc1) which is in turn has a TabContainer2 with 4 tabpanels(lets say TabPanel 5-8).
    3.  Now I use this uc1 in each of the tabpanels in my TabContainer1.


    <asp:ScriptManager runat="server"></asp:ScriptManager>
        <ajaxtoolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"  AutoPostBack="true" OnActiveTabChanged="Tabs_ActiveTabChanged">
            <ajaxtoolkit:TabPanel runat="server" HeaderText="Week-2" ID="TabPanel1"  >
                <ContentTemplate>
                <uc1:Assessment_View ID ="ViewContainer1" runat="server"  />            
                </ContentTemplate>
            </ajaxtoolkit:TabPanel>
            <ajaxtoolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Week0">
                <ContentTemplate>
                <uc1:Assessment_View ID ="ViewContainer2" runat="server" />     
                </ContentTemplate>
            </ajaxtoolkit:TabPanel>
            <ajaxtoolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="Week3">
                <ContentTemplate>
                 <uc1:Assessment_View ID ="ViewContainer3" runat="server"  />
                </ContentTemplate>
            </ajaxtoolkit:TabPanel>
            <ajaxtoolkit:TabPanel ID="TabPanel4" runat="server" HeaderText="Week6">
                <ContentTemplate>
                <uc1:Assessment_View ID ="ViewContainer4" runat="server"  />     
                </ContentTemplate>
            </ajaxtoolkit:TabPanel>
        </ajaxtoolkit:TabContainer>

    Issues :
    1. TabPanel 5(View Data form) in uc1 has to load the data from Db depending on the week Selected in TabContainer1(WeekNo), but doesn't load data on pageload, but once I click on some other tab(6-8) and come back to tabPanel5, the data gets loaded as expected as I have the TabChanged event to take care of it.

    Solutions tried:
    I tried to load the data in page load event of uc1, depending on the Tab selected in tabContainer1, but i see that the pageload of uc1  gets hit first and then the TabChangedevent of TabContainer1, where as I am setting the weekNo in TabChangedevent of Tabcontainer1.Hence it doesnt bind the correct week data.

    2. Button event in TabPanel 6(Its like a form with text boxes with Submit button) in  uc1 does not get fired.

    Solution tried:
    If I disable the validation by setting the CausesValidation as false for the button, event gets fired.

    Please help me solve both of these issues.

    Thanks for looking into this.


     

    Tuesday, December 3, 2013 11:21 PM

Answers

  • User-223976922 posted

    Thanks for your reply!

    It may not be feasible to add the validation group property in the Pageload of User control, as the UC will contain multiple tab panels with many fields.

    Hence i tried to solve it in other way, I added place holders and I am loading the place holders with usercontrol from server side in Pageload/tab change event.

    So far it looks good to me, just curious to know if  this a good way to do it? 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 9, 2013 10:54 PM

All replies

  • User-417640953 posted

    Hi udrjain,

    Thanks for your post.

    From your description, I see that you created a custom control contains one TabContainer and four TabPanel.

    And add the custom control to TabContainer TabPanel.

    I tried to load the data in page load event of uc1, depending on the Tab selected in tabContainer1, but i see that the pageload of uc1  gets hit first and then the TabChangedevent of TabContainer1, where as I am setting the weekNo in TabChangedevent of Tabcontainer1.Hence it doesnt bind the correct week data.

    It is right page load first hit, then uc1 pageload hit, then TabChanged event hit. I suggest you donot load data when uc1 page load. you can define a method to load data

    in uc1. Then call the method in the TabChanged event.

    If I disable the validation by setting the CausesValidation as false for the button, event gets fired.

    That means there are some input values invalidate when button submit, please make sure all the input values validate before button submit.

     

    Thanks.

    Best Regards!

    Thursday, December 5, 2013 10:47 PM
  • User-223976922 posted

    Thanks Fuxiang!

    I think I unsderatnd the solution for first issue, will try to modify my code and check again.

    For my second issue, the problem is that the each of the Tabpanel is embedding  the same user control "uc1:Assessment_Input" in it.
    user control "uc1:Assessment_Input" is basically a form with few controls and a Submit button with Validationgroup set to "X",the same validationgroup is set on all the controls in the form.
    The problem is that my submit button doesnt fire an event even after filling all the fileds in the TabPanel1 which is "Week-2", as it trying to validate the fields in next tab "Week0", "Week3", "Week6" which is still empty.

    To Confirm this, I removed all other TabPanel, then the button event in Week-2 TabPanel works as ecpected.

    or Incase I fill the fields in all Tabpanel and then the button event works again as expected.   I have seen some issues w.r.t this, but which suggested  different validation  groups to be set for diff tabs, but in my case since same usercontrol is used in differnt tabpanels, How can i solve this issue?

    Friday, December 6, 2013 2:04 AM
  • User-417640953 posted

    Hi udrjain,

    Thanks for your response.

    I think you should define a property of User Control which can indicate the ValidationGroup of submit button.

    Then you can set different ValidationGroup to submit button in different User Control.

    http://msdn.microsoft.com/en-us/library/wt9d35z6(v=vs.71).aspx

    Similar issues, please check it.

    http://stackoverflow.com/questions/4106868/asp-net-validating-control-inside-usercontrol

    http://forums.asp.net/t/868938.aspx

    Thanks.

    Best Regards!

    Sunday, December 8, 2013 8:29 PM
  • User-223976922 posted

    Thanks for your reply!

    It may not be feasible to add the validation group property in the Pageload of User control, as the UC will contain multiple tab panels with many fields.

    Hence i tried to solve it in other way, I added place holders and I am loading the place holders with usercontrol from server side in Pageload/tab change event.

    So far it looks good to me, just curious to know if  this a good way to do it? 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 9, 2013 10:54 PM