How to reload each tab in one page

[Yukiko Imazu]

Hello,

I have a question about ej:tab.  I'm working on multiple tab which has user control.

I want to reload content in each tab not all tabs when tab is clicked.

Is it possible to do that?

I don't want to use ShowReloadIcon property.  When click event happens, I just want to reload only each tab.

For example, if I click Second Data Tab, I just want to reload ucSecond control.

Thanks,

Yukiko

Attachment: Tab_21ac776d.7z

[Karthikeyan Viswanathan]

Hi Yukiko, 

 

Based on your requirement, you can refresh the tab content by using ajax . 

 

In Ajax success event, you can load the content into tab based on active index in before active event. 

Please refer the below code example: 

<Code> 

<ej:Tab ID="MemberViewTab" runat="server" Width="785px" ClientSideOnBeforeActive="onBefore" > 

 

                   <Items> 

                        <ej:TabItem Id="PersonalDataTab" Text="Personal Data" > 

                                <ContentSection> 

                                          <uc1:ucperson ID="ucPerson1" runat="server" /> 

                                 </ContentSection> 

                        </ej:TabItem> 

                          <ej:TabItem Id="SecondTab" Text="Second Data" > 

                                <ContentSection> 

                                    <ucS:ucSecond ID="ucSecond1" runat="server" /> 

                                 </ContentSection> 

                        </ej:TabItem> 

 

                   </Items> 

            </ej:Tab> 

 

        </div> 

        

    </div> 

 

    <script type="text/javascript"> 

 

        function onBefore(args) { 

            $(this.contentPanels[args.activeIndex]).load("ucSecond.ascx"); 

        } 

    </script> 

</code> 

Regards, 

Karthikeyan V. 

[Yukiko Imazu]

Hi,

I tried solution that you mentioned above, but it seems like not loaded correctly.

What I want to do is

 1. During second tab is active, the data of grid in first tab is changed by someone. (changing data in database by manually) 

 2. when switch to first tab active, grid should be latest data.  (which means loading new data)

When I do this operation, it seems like not updated data on tab.

Is it possible to this with syncfusion tab?

Thanks,

Yukiko

[Karthikeyan Viswanathan]

Hi Yukiko,  

 

According to your query, you need to refresh the data of the Grid in the tab when the respective Tab is active. To achieve your requirement we suggest you to bind the server side event OnTabItemActive event to the tab control. Due to which server side post is sent and the grid model is updated in the postback which reflects the changes made in the database. Also to avoid the full page refresh for the OnTabItemActive event we suggest you to place the tab control inside an Update panel.  

 

Please refer the below code example.  

 

<div class="jumbotron">  

        

      <ej:DropDownList ID="dp1" runat="server" ClientSideOnChange="change"DataTextField="Text" DataValueField="Value" />  

    </div>  

  

    <div class="row">  

        <div class="col-md-12">  

              

    <asp:UpdatePanel runat="server">  

       <ContentTemplate>  

  

            <ej:Tab ID="MemberViewTab" runat="server" Width="785px" OnTabItemActive="TabItemActive" >  

  

                   <Items>  

                        <ej:TabItem Id="PersonalDataTab" Text="Personal Data"  >  

                                <ContentSection>  

                                          <uc1:ucperson ID="ucPerson1" runat="server" />  

                                 </ContentSection>  

                        </ej:TabItem>  

                          <ej:TabItem Id="SecondTab" Text="Second Data" >  

                                <ContentSection>  

                                    <ucS:ucSecond ID="ucSecond1" runat="server" />  

                                 </ContentSection>  

                        </ej:TabItem>  

  

                   </Items>  

            </ej:Tab>  

  

    </ContentTemplate>  

  </asp:UpdatePanel>  

  

        </div>  

         

    </div>   

 

[Default.aspx.vb]  

 

Protected Sub TabItemActive(ByVal sender As Object, ByVal e AsSyncfusion.JavaScript.Web.TabEventArgs) Handles MemberViewTab.TabItemActive  

        'required code  

    End Sub  

 

We have modified the provided sample with the mentioned changes. Please refer the below link for the sample.  

 

Sample : http://www.syncfusion.com/downloads/support/forum/139975/7z/Tab-1245740649.7z   

 

Regards,  

Karthikeyan V. 

[Yukiko Imazu]

Hi Karthikeyan,

Thank you for your support and sample.

Regards,

Yukiko

[Karthikeyan Viswanathan]

Hi Yukiko, 

 

Thanks for the update. 

 

We glad to hear that your issue has been resolved. 

 

Regards, 

Karthikeyan V.