[CLOSED] Saving state of application elements

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Saving state of application elements

    Hello
    In following sample when you select one of the tree nodes, grid is shown in central panel. When you resize columns, change their position, or visibility, close application and then open it again, changes will be saved and columns will be displayed as user arranged them. So far so good. Problem is when you click between nodes. Nothing is remembered then and grid is shown with no regard to user changes.
    I tried similar technique for remembering last selected accordion panel and last selected node but it does not work at all :(
    How that would be possible?

    index.cshtml
        Html.X().Panel().Layout(LayoutType.Border).Border(false).Height(600)
        .Items
        (
            Html.X().Panel().Title("Components").Region(Region.West).Layout(LayoutType.Accordion).Width(200)
            .Items
            (
                Html.X().TreePanel().Title("Codebooks")
                .Root
                (
                    Html.X().Node().Text("Codebooks").Expanded(true)
                    .Children
                    (
                        Html.X().Node().Text("Countries").Leaf(true),
                        Html.X().Node().Text("Cities").Leaf(true)
                    )
                )
                .DirectEvents(de =>
                {
                    de.SelectionChange.Url = "ShowCodebook";
                    de.SelectionChange.ExtraParams.Add(new Parameter("codebook", "selected.length>0 ? selected[0].data.text: ''", ParameterMode.Raw));
                }),
                Html.X().TreePanel().Title("Astrology")
                .Root
                (
                    Html.X().Node().Text("Signs").Expanded(true)
                    .Children
                    (
                        Html.X().Node().Text("Aries").Leaf(true),
                        Html.X().Node().Text("Taurus").Leaf(true),
                        Html.X().Node().Text("Gemini").Leaf(true),
                        Html.X().Node().Text("Cancer").Leaf(true),
                        Html.X().Node().Text("Leo").Leaf(true),
                        Html.X().Node().Text("Virgo").Leaf(true),
                        Html.X().Node().Text("Libra").Leaf(true),
                        Html.X().Node().Text("Scorpio").Leaf(true),
                        Html.X().Node().Text("Sagittarius").Leaf(true),
                        Html.X().Node().Text("Capricorn").Leaf(true),
                        Html.X().Node().Text("Aquarius").Leaf(true),
                        Html.X().Node().Text("Pisces").Leaf(true)
                    )
                )
            )
            ,
            Html.X().Panel().ID("Center1").Region(Region.Center).Title("Main").Layout(LayoutType.Fit)
        )
    Codebook.cshtml
    @model string
    
    @(
        Html.X().GridPanel().Title(Model).Stateful(true).StateID("grid_" + Model).StateEvents(new string[] { "columnresize", "columnmove", "columnvisible", "columnsort" })
        .ColumnModel
        (
            c =>
            {
                if (Model == "Countries")
                {
                    c.Columns.Add(Html.X().Column().Text("Country name"));
                    c.Columns.Add(Html.X().Column().Text("Area"));
                    c.Columns.Add(Html.X().Column().Text("Inhabitans"));
                    c.Columns.Add(Html.X().Column().Text("BDP"));
                    c.Columns.Add(Html.X().DateColumn().Text("President"));
                }
                else
                {
                    c.Columns.Add(Html.X().Column().Text("City name"));
                    c.Columns.Add(Html.X().Column().Text("Area"));
                    c.Columns.Add(Html.X().Column().Text("Inhabitans"));
                    c.Columns.Add(Html.X().Column().Text("Country"));
                    c.Columns.Add(Html.X().DateColumn().Text("Major"));
                }
            }
        )
    )
    Controller
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult ShowCodebook(string codebook)
            {
                return new Ext.Net.MVC.PartialViewResult
                {
                    ViewName = "Codebook",
                    Model = codebook,
                    ContainerId = "Center1",
                    ClearContainer = true,
                    RenderMode = RenderMode.AddTo
                };
    Last edited by Daniil; Nov 07, 2015 at 8:13 AM. Reason: [CLOSED]
  2. #2
    Hi @ingbabic,

    I'll review what might be done.

    Please clarify do you save the state in cookies?
  3. #3
    Yes, sorry I forgot to mention that:
      @Html.X().ResourceManager().StateProvider(StateProvider.Cookie)
  4. #4
    Please specify explicit IDs for all the Columns. Otherwise the state cannot be always restored properly.
  5. #5
    Well... Now it works quite unpredictable. If I for example stretch column and immediately exit application, when next time I start application, the change will not be saved (as opposite to previous situation). If I do change selection between nodes after I do some of column arranging it seems that columns state is remembered and restored, but I had situation where it was not like this (especially if I start app again after some, not long, delay). Unfortunately I did not catch exact scenario, how this does happen. Any way one thing is certain it does NOT work quite :(
  6. #6
    If I for example stretch column and immediately exit application, when next time I start application, the change will not be saved (as opposite to previous situation)
    Please clarify are you sure it didn't happen before? I am pretty much sure setting Columns' IDs should not affect it.

    There is the save delay which is 100 by default. Maybe, the state is not saved if you quickly exit the application.
    http://docs.sencha.com/extjs/5.1/5.1...-cfg-saveDelay

    Please try to set it to 1 or 0, maybe.
  7. #7
    Well I what I did, I cleared all cookies and things started to work. Is there a possibility to have more control over it, as deleting of all cookies is, let's say, hard option? Also you pointed out that i need to set columns' IDs, is it sufficient to do with StateIDs?
    At the end how I can have other elements remembered too (last selected node in tree and accordion panel)?
  8. #8
    Is there a possibility to have more control over it, as deleting of all cookies is, let's say, hard option?
    That is the API of Ext.state.CookieProvider. Hopefully, you'll find something helpful.
    http://docs.sencha.com/extjs/5.1/5.1...CookieProvider

    Also you pointed out that i need to set columns' IDs, is it sufficient to do with StateIDs?
    Yes, it is.

    At the end how I can have other elements remembered too (last selected node in tree and accordion panel)?
    As far as I can remember there is no such the functionality by default. My recommendation would be reviewing the Stateful API. There are ways to achieve the requirement.
    http://docs.sencha.com/extjs/5.1/5.1...state.Stateful
    Last edited by Daniil; Nov 03, 2015 at 1:32 PM.
  9. #9
    There are ways to achieve the requirement.
    I believe there are. For example I found this. I tried to apply this to my sample, but it does not work. Here is my new tree view from sample that we started.
    Html.X().TreePanel().Title("Codebooks").Stateful(true).StateID("treePanel").StateEvents(new string[] { "expand", "collapse" })
                .Root
                (
                    Html.X().Node().Text("Codebooks").Expanded(true)
                    .Children
                    (
                        Html.X().Node().Text("Countries").Leaf(true),
                        Html.X().Node().Text("Cities").Leaf(true)
                    )
                )
                .DirectEvents(de =>
                {
                    de.SelectionChange.Url = "ShowCodebook";
                    de.SelectionChange.ExtraParams.Add(new Parameter("codebook", "selected.length>0 ? selected[0].data.text: ''", ParameterMode.Raw));
                })
                .GetState(g =>
                {
                    g.Handler = "return this.collapsed";
                })
    Execution comes to handler of GetState, but it does nothing, meaning tree view is not shown as I left it when I close application. Please help!
  10. #10
    Hi, I almost come to solution. Please review this
    @(
        Html.X().Panel().Layout(LayoutType.Border).Border(false).Height(600)
        .Items
        (
            Html.X().Panel().Title("Components").Region(Region.West).Layout(LayoutType.Accordion).Width(200)
            .Items
            (
                Html.X().TreePanel().Title("Codebooks").Stateful(true).StateID("treePanel").StateEvents(new string[] { "expand", "collapse", "selectionchange" })
                .Root
                (
                    Html.X().Node().Text("Codebooks").Expanded(true)
                    .Children
                    (
                        Html.X().Node().Text("Countries").Leaf(true),
                        Html.X().Node().Text("Cities").Leaf(true)
                    )
                )
                .Listeners(l =>
                {
                    l.StateRestore.Handler = " this.collapsed = state.collapsed; var record = this.getStore().getNodeById(state.selected); this.getSelectionModel().select(record)";
                })
                .DirectEvents(de =>
                {
                    de.SelectionChange.Url = "ShowCodebook";
                    de.SelectionChange.ExtraParams.Add(new Parameter("codebook", "selected.length>0 ? selected[0].data.text: ''", ParameterMode.Raw));
                })
                .GetState(g =>
                {
                    g.Handler = "return {collapsed : this.collapsed, selected: this.getSelectionModel.getSelection()[0].internalId};";
                })
                ,
                Html.X().TreePanel().Title("Astrology").Stateful(true).StateID("treePanelAstr").StateEvents(new string[] { "expand", "collapse", "selectionchange" })
                .Root
                (
                    Html.X().Node().Text("Signs").Expanded(true)
                    .Children
                    (
                            Html.X().Node().Text("Aries").NodeID("aries").Leaf(true),
                            Html.X().Node().Text("Taurus").NodeID("taurus").Leaf(true),
                            Html.X().Node().Text("Gemini").NodeID("gemini").Leaf(true),
                            Html.X().Node().Text("Cancer").NodeID("cancer").Leaf(true),
                            Html.X().Node().Text("Leo").NodeID("leo").Leaf(true),
                            Html.X().Node().Text("Virgo").NodeID("virgo").Leaf(true),
                            Html.X().Node().Text("Libra").NodeID("libra").Leaf(true),
                            Html.X().Node().Text("Scorpio").NodeID("scorpio").Leaf(true),
                            Html.X().Node().Text("Sagittarius").NodeID("sagittarius").Leaf(true),
                            Html.X().Node().Text("Capricorn").NodeID("capricorn").Leaf(true),
                            Html.X().Node().Text("Aquarius").NodeID("aquarius").Leaf(true),
                            Html.X().Node().Text("Pisces").NodeID("pisces").Leaf(true)
                    )
                )
                .Listeners(l =>
                {
                    l.StateRestore.Handler = "this.collapsed = state.collapsed; var record = this.getStore().getNodeById(state.selected); this.getSelectionModel().select(record)";
                })
                .GetState(g =>
                {
                    g.Handler = "return {collapsed : this.collapsed, selected: this.getSelectionModel().getSelection()[0].internalId};";
                })
    
            )
            ,
            Html.X().Panel().ID("Center1").Region(Region.Center).Title("Main").Layout(LayoutType.Fit)
        )
    )
    Only what still does not work is selecting last selected node. Please help. Thanks.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Saving grid state to database
    By pj_martins in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 13, 2012, 3:07 PM
  2. Replies: 2
    Last Post: Dec 07, 2011, 4:37 AM
  3. [CLOSED] Saving grid state using CookieProvider - problem
    By voipswitch in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Aug 11, 2011, 12:44 PM
  4. Replies: 2
    Last Post: Apr 14, 2011, 9:03 AM
  5. Viewport and inner elements
    By unaltro2 in forum 1.x Help
    Replies: 0
    Last Post: Feb 01, 2011, 8:11 AM

Tags for this Thread

Posting Permissions