Persist state and custom command issue

7 posts, 0 answers
  1. Dave
    Dave avatar
    12 posts
    Member since:
    Jan 2015

    Posted 08 Oct 2015 Link to this post

    Hi

    I'm having an issue with persist states and custom command buttons

    Please see this dojo code here

    http://dojo.telerik.com/oraTI

    To replicate the issue

    - If you run the code and press any of the Edit buttons you get a 'clicked' alert message.
    - Then press 'Save State' to save the grid state to local storage - you should see a 'saved' alert message
    - Then run the code again, which will load the localStorage after the grid has loaded - you should see a 'loaded' alert message
    - Now if you click the 'Edit' button nothing happens

    The state is laoding fine and adjusting the grid display correctly as per the saved sate, but the custom buttons don't work.

    Any suggestions on how to get this working?

    Thanks

    Dave

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2304 posts

    Posted 12 Oct 2015 Link to this post

    Hello Dave,

    The reason for the behavior is explained on the following documentation page. In short JSON.stringify cannot serialize functions, so all function references will be lost in this case. Either a custom serialization should be used or the function should be manually restored in the options after the state is loaded. I have demonstrated the second approach in the updated example.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Dave
    Dave avatar
    12 posts
    Member since:
    Jan 2015

    Posted 12 Oct 2015 Link to this post

    Thanks Dimiter

     

    Your solution will do the trick :)

     

    Much appreciated.

    Dave

  4. Dave
    Dave avatar
    12 posts
    Member since:
    Jan 2015

    Posted 12 Oct 2015 in reply to Dimiter Madjarov Link to this post

    Thanks Dimiter

     

    Your solution will do the trick :)

     

    Much appreciated.

    Dave

  5. Adrien Bakouche
    Adrien Bakouche avatar
    3 posts
    Member since:
    Sep 2014

    Posted 22 Nov 2017 in reply to Dimiter Madjarov Link to this post

    got the same issue, but the exsample link dont work, could you post it again please.
  6. Dave
    Dave avatar
    12 posts
    Member since:
    Jan 2015

    Posted 23 Nov 2017 Link to this post

    Hi Adrien

    I've refined the original process now - here is what I use now - it caters for command buttons and dropdown list replacements

    XXXXXX is the unique name I give to the grid on the page

    Have these 2 buttons above my grid

    <a id="saveState" title="Save State" class="k-button k-button-icontext" href="#"><span class="k-icon k-i-lock"></span>Save Layout</a>
    <a id="clearState" title="Reset State" class="k-button k-button-icontext" href="#"><span class="k-icon k-i-unlock"></span>Reset Layout</a>

    Then in my JS have the following

        $("#saveState").click(function (e) {
            e.preventDefault();
            var gridOptions = $("#XXXXXX").data("kendoGrid").getOptions();
            localStorage["XXXXXX-GridOptions"] = JSON.stringify(gridOptions);
            alert('Layout saved');
        });
        $("#clearState").click(function (e) {
            e.preventDefault();
            localStorage.removeItem("XXXXXX-GridOptions");
            alert('Saved layout cleared - default layout will display next page load');
        });

    Then in my $(document).ready I do

    var gridOptions = localStorage["XXXXXX-GridOptions"];
            if(gridOptions) {
                var options = JSON.parse(gridOptions);

                $.each( options.columns, function( key, value ) {
    //fix up the command buttons
                    if(value.command != undefined) {
                        value.command[1].click = but_detailsRecord;
                        value.command[2].click = but_editDocs;
                        value.command[3].click = but_editCarr;
                    }

    //fix up the drop down lists

                        if(this.field == "Member_GroupTypeID") {
                            this.values = ds_GroupType.data().toJSON();
                        }
                        if(this.field == "Member_MemberTypeID") {
                            this.values = ds_MemberType.data().toJSON();
                        }
                  });
                  $("#XXXXXXGrid").data("kendoGrid").setOptions(options);
            }

     

    Hope this helps you out

    Dave

  7. Adrien Bakouche
    Adrien Bakouche avatar
    3 posts
    Member since:
    Sep 2014

    Posted 24 Nov 2017 in reply to Dave Link to this post

    Excellent, thank you.
Back to Top