Persist state and custom command issue

[Dave]

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

[Dimiter Madjarov]

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

 

 

[Dave]

Thanks Dimiter

 

Your solution will do the trick :)

 

Much appreciated.

Dave

[Dave]

Thanks Dimiter

 

Your solution will do the trick :)

 

Much appreciated.

Dave

[Adrien]

got the same issue, but the exsample link dont work, could you post it again please.

[Dave]

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

[Adrien]

Excellent, thank you.

[John]

While that solution technically works, in my opinion, it's not generic enough.  I have code that iterates through all command buttons on the grid, inside command columns, and compares them to the array you just deserialized.  It then copies over the functions.

    //fix command columns.  This iterates through all command buttons on the grid and copies the event onto the old one.
    $(loadedOptions.columns).each(function () {
        debugger;
        if (this.hasOwnProperty('command')) {
            for (let locb = 0; locb < this.command.length; locb++) { //loop through loaded options command buttons
                for (let coc = 0; coc < currentOptions.columns.length; coc++) { //loop through current options columns
                    if (currentOptions.columns[coc].hasOwnProperty('command')) {
                        for (let cocc = 0; cocc < currentOptions.columns[coc].command.length; cocc++) {//loop through current options column commands
                            if (currentOptions.columns[coc].command[cocc].name == this.command[locb].name) {
                                this.command[locb].click = currentOptions.columns[coc].command[cocc].click;
                            }
                        }
                    }
                }
            }
        }
    })