I forgot to mention that alone with LoadOnDemand, WebTab also has option to enable/disable persistance of ViewStates of child controls located in tabs. That is controlled by the EnableLoadOnDemandViewState property, which is enabled by default. So, in example above, on initial load only content of 1st tab will be created on server and passed to client. If user will select 2nd tab, then full postback happens and contents of 1st and 2nd tabs will be passed to client. It means that if user will return back to 1st tab, then no postback will be triggered, but all data entered by user on 1st tab will be available and will persist to all following sessions.

In order to achieve 100% LoadOnDemand and load only selected tab, that option should be disabled. In this case postback will happen on every tab-change and only content of selected tab will be created on server and passed to client. If application needs persistance of fields located in unselected tabs, then it should do that on its own: use database, Session, or similar.
If application also will enable PostBackOptions.EnableAjax, then full postbacks will be replaced by async postbacks. Below is example of codes for that.

<ig:WebTab ID="WebTab1" runat="server" Height="200px" Width="400px">
   ...
   <PostBackOptions EnableAjax="true" EnableLoadOnDemand="True" EnableLoadOnDemandViewState="false" />
</ig:WebTab>

Hello,

I've been reading through the forums looking for assistance while I configure the WebTab control from my application at work. The 2nd paragraph is exactly what I've been looking for and I would like to now how I can achieve the functionality I am looking for:

"In order to achieve 100% LoadOnDemand and load only selected tab, that option should be disabled. In this case postback will happen on every tab-change and only content of selected tab will be created on server and passed to client. If application needs persistance of fields located in unselected tabs, then it should do that on its own: use database, Session, or similar.
If application also will enable PostBackOptions.EnableAjax, then full postbacks will be replaced by async postbacks. Below is example of codes for that."

I've gotten the tabs configured as you described above- I set EnableLoadOnDemandViewState to "False", LoadOnDemand to "true" and EnableAjax = "False". What I am trying to do is configure multiple tabs, each with form input fields. As the user enters data and selects different tabs, I'd like to store the data from the tab they are leaving INTO Session, load the new tab's data FROM Session and then only load the new tab like you say "100% LoadOnDemand". What I am finding is as I change tabs, the data from the tab I am leaving isn't getting submitted and I assume it's because the server-side code isn't creating the controls because they are not going to be rendered. How can I achieve the results I am trying to get?

Thank you,

Travis

Hi Travis,

I  wrote a small application for you. It stores "view-state" values of fields which should persist in MyTabItems array, fills value pairs UniqueID-Value from client and updates child controls in tabs from latest values stored in "view-state". You may copy paste those codes in any web site and check how it runs.

aspx:

<ig:WebTab ID="WebTab1" runat="server" Width="300px" Height="300px">
   <Tabs>
    <ig:ContentTabItem runat="server" Text="Tab 1">
     <Template>
     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
     <asp:TextBox ID="TextBox11" runat="server"></asp:TextBox>
     <asp:Button ID="Button1" runat="server" Text="Button" />
     </Template>
    </ig:ContentTabItem>
    <ig:ContentTabItem runat="server" Text="Tab 2">
     <Template>
     <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
     <asp:Button ID="Button2" runat="server" Text="Button" />
     </Template>
    </ig:ContentTabItem>
   </Tabs>
   <PostBackOptions EnableLoadOnDemand="True" EnableLoadOnDemandViewState="False" />
</ig:WebTab>

aspx.cs:

 protected void Page_Load(object sender, EventArgs e)
 {
  ArrayList list = Session["MyTabItems"] as ArrayList;
  if (list == null)
   Session["MyTabItems"] = list = new ArrayList();
  int selIndex = this.WebTab1.SelectedIndex;
  // fill view-state-list by ids of child controls which should persist
  if (selIndex == 0 && Session["Tab1"] == null)
  {
   list.Add(new MyViewState(this.TextBox1.UniqueID));
   list.Add(new MyViewState(this.TextBox11.UniqueID));
   Session["Tab1"] = true;
  }
  if (selIndex == 1 && Session["Tab2"] == null)
  {
   list.Add(new MyViewState(this.TextBox2.UniqueID));
   Session["Tab2"] = true;
  }
  // update list with latest values and update Controls by latest values
  foreach(MyViewState item in list)
  {
   string id = item.ID;
   // get value of Control modified by client
   string val = this.Request.Form[id];
   // fill view-state value of item from client
   if (val != null)
    item.Value = val;
   // get latest value for item
   val = item.Value as string;
   if (val == null)
    continue;
   // find Control which is linked to view-state-item and update its property
   if (selIndex == 0)
   {
    if (id == this.TextBox1.UniqueID)
     this.TextBox1.Text = val;
    else if (id == this.TextBox11.UniqueID)
     this.TextBox11.Text = val;
   }
   if (selIndex == 1)
   {
    if (id == this.TextBox2.UniqueID)
     this.TextBox2.Text = val;
   }
  }
 }
 internal class MyViewState
 {
  internal string ID;
  internal object Value;
  internal MyViewState(string id)
  {
   this.ID = id;
  }
 }

Viktor,

This approach worked great. In the server-side tab control SelectedIndexChanging event we are pulling the values in from the Request.Form object and maintaining these values in Session. We are now trying to implement this method using an Infragistics WebDataGrid. I am aware that the examples use RowUpdate event handlers when data is updated, but we are wondering if there is a way to add/remove/update cells (using client-side code) without handling any of the events on the server and then when a tab change is initialized, pull the row updates in? The Request.Form contains the grid's values in the Request.Form["<grid client id>_clientState"] object, is there any way to utilize this and pull the grid's values from it?

Basically, in a perfect world, we want to be able to add, remove and update cells using client-side code (no server post-backs) and then when the user changes tabs we somehow use the Request.Form["<grid client id>_clientState"] object to pull in the values. Is it possible?

Thanks,

Travis

Hi Travis,

To get better answers about options for WebDataGrid, I suggest you to ask that question at grid-forum. The ClientIdOfControl_clientState is a private field, its content can depend on state of control and it is too complex for public usage. I think, grid has some options to perform actions on client. If application needs to pass some changes to server bypassing grid internal logic, then it may add to page its own hidden field, write into it desired actions on client and get/process them on server.