This is a migrated thread and some comments may be shown as answers.

Persist state and custom command issue

7 Answers 193 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dave
Top achievements
Rank 1
Dave asked on 09 Oct 2015, 03:51 AM

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

7 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 12 Oct 2015, 07:59 AM

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!
 
0
Dave
Top achievements
Rank 1
answered on 13 Oct 2015, 12:59 AM

Thanks Dimiter

 

Your solution will do the trick :)

 

Much appreciated.

Dave

0
Dave
Top achievements
Rank 1
answered on 13 Oct 2015, 12:59 AM

Thanks Dimiter

 

Your solution will do the trick :)

 

Much appreciated.

Dave

0
Adrien
Top achievements
Rank 1
answered on 23 Nov 2017, 02:17 AM
got the same issue, but the exsample link dont work, could you post it again please.
0
Dave
Top achievements
Rank 1
answered on 24 Nov 2017, 03:46 AM

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

0
Adrien
Top achievements
Rank 1
answered on 24 Nov 2017, 08:43 AM
Excellent, thank you.
0
John
Top achievements
Rank 1
Veteran
Iron
answered on 19 Nov 2021, 08:01 PM
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;
                            }
                        }
                    }
                }
            }
        }
    })

Tags
Grid
Asked by
Dave
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Dave
Top achievements
Rank 1
Adrien
Top achievements
Rank 1
John
Top achievements
Rank 1
Veteran
Iron
Share this question
or