1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Switch tab items and update page

Switch tab items and update page

Hello!
When switching tabs , the page and elements in the tabs are updated (fired Page_Load )
Is it possible to avoid this effect?

Best regards,  Alexey.

5 Replies
KR Keerthana Rajendran Syncfusion Team May 15, 2020 07:47 AM UTC

Hi Alexey, 

Good day to you, 

Based on your update, we suspect that you have bound server side event(“OnTabItemActive”) for Tab so that  the page is refreshed while switching between tab headers. We have tried to replicate the issue by rendering some textbox controls within Tab but values are maintained while switching between tabs. However , you can avoid full postback by rendering the tab within ASP update panel as shown below 

  <asp:UpdatePanel ID="update" runat="server"> 
                <ContentTemplate> 
                    <ej:Tab ID="DefaulttabContent" runat="server" OnTabItemActive="DefaulttabContent_TabItemActive"> 
                        <Items> 
                            <ej:TabItem ID="rome" Text="Rome"> 
                                <ContentSection> 
                                    Rome is one of the world's most fascinating cities. The old adage that Rome was not built in a day — and that you     won't see it in one or even in three — is true."  
                                      <br /> 
                                    Enter feedback: 
                                    <ej:MaskEdit ID="mask" runat="server" InputMode="Text"></ej:MaskEdit> 
                                </ContentSection> 
                            </ej:TabItem> 
                                 .  .  .  .  .  
                        </Items> 
                    </ej:Tab> 
                </ContentTemplate> 
            </asp:UpdatePanel> 

We have prepared a sample based on the above code which can be downloaded from the following link 



Please check the above details and if still issue persist, modify code in the above sample to replicate the issue in our end along with your product version details. This will help us to serve you better. 

Regards, 
Keerthana.  


AL Alexey May 17, 2020 09:02 PM UTC

Thanks for your reply. I make a  simple example, where there is a tab with two tabs, that contain a grids.
When the page is first displayed, data for grids is filled and data sources are linked. When switching tabs, grids become empty and DataSource == null. This is problev for me.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <ej:Tab ID="Tab1" runat="server" OnTabItemActive="Tab1_TabItemActive">
                    <Items>
                        <ej:TabItem ID="test1" Text="Test 1">
                            <ContentSection>
                                <ej:Grid ID="Grid1" runat='server'></ej:Grid>
                            </ContentSection>
                        </ej:TabItem>
                        <ej:TabItem ID="test2" Text="Test 2">
                            <ContentSection>
                                <ej:Grid ID="Grid2" runat='server'></ej:Grid>
                            </ContentSection>
                        </ej:TabItem>
                    </Items>
                </ej:Tab>
            </ContentTemplate>
        </asp:UpdatePanel>




public partial class _Default : Page
{
 public static List<GridData> DataForGrid1 { get; set; } = new List<GridData>();
 public static List<GridData> DataForGrid2 { get; set; } = new List<GridData>();
 protected void Page_Load(object sender, EventArgs e)
    {
  if(!IsPostBack)
  {
   DataForGrid1.Add(new GridData("First1", 35));
   DataForGrid1.Add(new GridData("Second1", 36));

   DataForGrid2.Add(new GridData("First2", 37));
   DataForGrid2.Add(new GridData("Second2", 38));
   Grid1.DataSource = DataForGrid1;
   Grid1.DataBind();
   Grid2.DataSource = DataForGrid2;
   Grid2.DataBind();
  }
 }


 [Serializable]
 
 public class GridData
 {
  public GridData()
  {
  }
  public GridData(string name, decimal value)
  {
   this.Value = value;
   this.Name = name;
  }
  public decimal Value { get; set; }
  public string  Name { get; set; }
 }

 protected void Tab1_TabItemActive(object sender, Syncfusion.JavaScript.Web.TabEventArgs e)
 {
 }
}

Best regards,  Alexey.

Attachment: SFT_f303e76f.rar

MK Muthukrishnan Kandasamy Syncfusion Team May 18, 2020 05:57 AM UTC

Hi Alexey, 
 
Thanks for the update. 
 
We have checked your shared sample and we have found that you have checked post back condition to set the data source for EJ Grid control. So, when we navigate to another tab item then data source was not set to the Grid. To resolve your problem, you need to remove the post back condition or else you also need bind the data source in the post back. Please refer to the below code block. 
 
With PostBack: 
 
protected void Page_Load(object sender, EventArgs e) 
    { 
        List<GridData> DataForGrid1 = new List<GridData>(); 
        List<GridData> DataForGrid2 = new List<GridData>(); 
        if (!IsPostBack) 
        { 
            DataForGrid1.Add(new GridData("First1", 35)); 
                                    DataForGrid1.Add(new GridData("Second1", 36)); 
 
 
                                    DataForGrid2.Add(new GridData("First2", 37)); 
                                    DataForGrid2.Add(new GridData("Second2", 38)); 
 
                                    Grid1.DataSource = DataForGrid1; 
                                    Grid1.DataBind(); 
                                    Grid2.DataSource = DataForGrid2; 
                                    Grid2.DataBind(); 
        } 
        else 
        { 
            DataForGrid1.Add(new GridData("First1", 35)); 
                                    DataForGrid1.Add(new GridData("Second1", 36)); 
 
 
                                    DataForGrid2.Add(new GridData("First2", 37)); 
                                    DataForGrid2.Add(new GridData("Second2", 38)); 
 
                                    Grid1.DataSource = DataForGrid1; 
                                    Grid1.DataBind(); 
                                    Grid2.DataSource = DataForGrid2; 
                                    Grid2.DataBind(); 
        } 
            } 
 
 
Without PostBack: 
 
protected void Page_Load(object sender, EventArgs e) 
    { 
        List<GridData> DataForGrid1 = new List<GridData>(); 
        List<GridData> DataForGrid2 = new List<GridData>(); 
        DataForGrid1.Add(new GridData("First1", 35)); 
        DataForGrid1.Add(new GridData("Second1", 36)); 
 
        DataForGrid2.Add(new GridData("First2", 37)); 
        DataForGrid2.Add(new GridData("Second2", 38)); 
 
        Grid1.DataSource = DataForGrid1; 
        Grid1.DataBind(); 
        Grid2.DataSource = DataForGrid2; 
        Grid2.DataBind(); 
} 
 
 
We have attached sample for your convenience, which can be downloaded from the below link. 
 
 
 
Please refer to the below links to know more about PostBack. 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


AL Alexey May 18, 2020 10:39 PM UTC

Hello!
I need to populate the Grid with big set of data from the Sql server. Each time I have to bind data, a large amount of data. Is there really no way to save them, as it would have happened if I had not handled the TabItemActive event? It's complicated? Is it impossible?

If  place a DatePicker in each tabs item, then the processing of the Select event sets the datasource in null for all. (((

Best regards,  Alexey.

KR Keerthana Rajendran Syncfusion Team May 19, 2020 08:28 AM UTC

Hi Alexey, 

Good day to you,  

We understand your requirement to bind large data to EJ Grid only once during page load. To achieve this, we suggest you to set DataSourceCachingMode to session or ViewState for Grid which will maintain the dataSource even after postback.  

Refer to the following code 

<ej:Tab ID="Tab1" runat="server" OnTabItemActive="Tab1_TabItemActive"> 
                    <Items> 
                        <ej:TabItem ID="test1" Text="Test 1"> 
                            <ContentSection> 
                                <ej:Grid ID="Grid1" runat='server' DataSourceCachingMode="ViewState"></ej:Grid> 
                            </ContentSection> 
                        </ej:TabItem> 
                        <ej:TabItem ID="test2" Text="Test 2"> 
                            <ContentSection> 
                                <ej:Grid ID="Grid2" runat='server'  DataSourceCachingMode="ViewState"></ej:Grid> 
                            </ContentSection> 
                        </ej:TabItem> 
                    </Items> 
                </ej:Tab> 

Refer to the UG for more details on this 



Please let us know if you need further assistance.  

Regards, 
Keerthana.  

 


Loader.
Up arrow icon