Persistence

[Gyorgy Gorog]

Hi All, I have two tabs on my page. mainTab is in a table cell the page, contentTab is in a splitter, but the behaviour is the same if it is in a table cell too.

mainTab selection persists nicely, contentTab always opens the first item. Both are of course EnablePersistence = true and both are url-based. They are both rendered as @Html.EJ().Tab("mainTab", Model.MainTab.TabModel) and @Html.EJ().Tab("contentTab", Model.ContentTab.TabModel). 

I am unable to find the difference. Please advise.

MainTab:

TabProperties tabModel = new TabProperties

            {

                ShowRoundedCorner = true,

                EnablePersistence = true,

                EnableAnimation = true,

                ShowCloseButton = false,

                Collapsible = true,

                HeaderSize = "25px"

            };

ContentTab:

tabModel = new TabProperties

            {

                ShowRoundedCorner = true,

                EnablePersistence = true,

                EnableAnimation = true,

                ShowCloseButton = false,

                Collapsible = false,

                HeaderSize = "25px",

                Height = "750px",

                HeightAdjustMode = HeightAdjustMode.Content

            };  

[Keerthana Rajendran]

Hi Gyorgy Gorog,   

   

Thanks for contacting Syncfusion Support.   

   

We have prepared a sample based on your scenario by loading content from url and rendered one tab (Main Tab) in Index page and another tab (Content Tab) in about page of MVC project. Selected tab item is maintained correctly inside splitter even after page navigation. Please refer to the below code used in our sample.   

   

Index.cshtml:   

@model TabSampleEJ1.Controllers.ModelData   

   

<h2>Tab Sample</h2>   

   

@Html.EJ().Tab("MainTab", Model.tab)   

   

About.cshtml:   

@model TabSampleEJ1.Controllers.ModelData   

   

@{Html.EJ().Splitter("outterSplitter").EnableAutoResize(true).PaneProperties(p =>   

{   

   p.Add().ContentTemplate(@<div class="cont">   

  @innertab()   

</div>).PaneSize("500");   

  p.Add().ContentTemplate(   

  @<div class="cont">   

    <div class="_content">   

      Some content rendered.   

    </div>   

  </div>   

  ).PaneSize("200");   

  }).Height("400").Width("100%").Render();}   

   

  @helper innertab()   

  {    

    @Html.EJ().Tab("ContentTab", Model.tab);   

   

  }   

   

   

Controller:   

ModelData tabModel = new ModelData();   

    public ActionResult Index()   

    {   

         

      TabProperties tab = new TabProperties();   

      tab.Items.Add(new TabBaseItem() { ID = "javaScript", Url="../AjaxContent/Firsttab.html", Text = "JavaScript"   });   

      tab.Items.Add(new TabBaseItem() { ID = "cSharp", Url = "../AjaxContent/Secondtab.html" , Text = "C Sharp"});   

      tab.Items.Add(new TabBaseItem() { ID = "vb", Text = "VB.Net", Url = "../AjaxContent/Firsttab.html" });   

      tab.EnablePersistence = true;   

      tab.EnableAnimation = true;   

      tab.ShowCloseButton = false;   

      tab.Collapsible = false;   

      tab.HeaderSize = "25px";   

      tabModel.tab = tab;   

      return View(tabModel);   

   

    }   

   

    public ActionResult About()   

    {   

       

      TabProperties tab = new TabProperties();   

      tab.Items.Add(new TabBaseItem() { ID = "javaScript1", Url = "../AjaxContent/Firsttab.html", Text = "JavaScript" });   

      tab.Items.Add(new TabBaseItem() { ID = "cSharp1", Url = "../AjaxContent/Secondtab.html", Text = "C Sharp" });   

      tab.Items.Add(new TabBaseItem() { ID = "vb1", Text = "VB.Net", Url = "../AjaxContent/Firsttab.html" });   

      tab.EnablePersistence = true;   

      tab.EnableAnimation = true;   

      tab.ShowCloseButton = false;   

      tab.Collapsible = false;   

      tab.HeaderSize = "25px";   

      tab.Height = "750px";   

      tab.HeightAdjustMode = HeightAdjustMode.Content;   

      tabModel.tab = tab;   

      return View(tabModel);   

    }   

   

Model:   

   

public class ModelData   

  {   

    public TabProperties tab { get; set; }   

   

  }   

   

We have attached a sample for your reference which can be downloaded from the below link   

   

http://www.syncfusion.com/downloads/support/forum/138697/ze/TabSample-1410416528   

   

Please ensure the above sample and provide us details on whether you have used the same way of rendering in your project? If not, kindly share us clear details on the scenario with code snippet using which you have rendered tab inside splitter. If possible, modify the above sample to reproduce the issue so that we can proceed further on this.   

   

Regards,   

Keerthana  

 

[Gyorgy Gorog]

Thanks Keerthana , will play with your example.

Meanwhile once we are at persistence, do you have any button group, radio, checkbox, whatever that would persist? I mean the user preference of say, 4 buttons. 

[Prince Oliver]

Hi Gyorgy, 

Thank you for your update. 

We have provided persistence support for CheckBox, RadioButton components that will persist the check state of the control. Also, we have provided persistence support for toggle button also to persist the active state of the component. 

Regards, 

Prince 

[Gyorgy Gorog]

Keerthana , you are right. The non-peristence of tabls is caused by my JS functions run at document.complete. 

I tried to switch to ItemActive but it seems it runs only at active item change, not when activating the first item when the tab is rendered with all items closed.

Please advise.

[Gyorgy Gorog]

Thanks, Prince, meanwhile I discovered localStorage :) so I can persist myself.... :)

[Prince Oliver]

Hi Gyorgy, 

Thanks for the update. 

We are glad that your problem has been solved. please let us know if you need any assistance. 

Regards, 

Prince