HeaderTemplate overridden by localstorage

[prakash]

I have the following grid in my table. I am using the first column with a checkbox for selectig teh row.
And it has a header for multiselect(selects all check boxes using jquery)

 @(Html.Kendo().Grid<Customer>()
          .Name("grid")
          .Columns(columns =>
          {
              columns.Template(@<text></text>)
                  .ClientTemplate("<input name='chkSelect' id='select_#= Id #' type='checkbox' value='#= Id #' />").Width(30)
                  .HeaderTemplate("<input id='chkSelectAll'  type='checkbox'/>").Locked(true);    
            
              columns.Bound(c => c.Name)
                  .ClientTemplate("<a href='" + Url.Action("Edit", "Customer") + "/#= Id #' " + ">#= Name #</a>").Width(140)

              columns.Bound(c => c.CustomerName).Width(110).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
          })


Now I also have  feature for show/hide column and I persist them using localstorage like this


        function SaveHiddenState() {
            var grid = $("#grid").data("kendoGrid");
            localStorage["customer-grid-options"] = kendo.stringify(grid.getOptions());
        }

And I retreive the saved options using this

        $(function () {
            var grid = $("#grid").data("kendoGrid");
            var options = localStorage["account-grid-options"];
            if (options) {
                grid.setOptions(JSON.parse(options));
            }
        });

All these work fine.
But strangely I am losing my header template for my first column alone if I get data from the localstorage. I  just get a blank header as if I hadnt included a headertemplate.
 Anything that I am missing ?

[Rosen]

Hi Prakash,

As mentioned in the documentation the Toolbar and Column HeaderTemplate options of the Grid for ASP.NET MVC will not be persisted. You will need to manually persist the HeaderTemplate similar to the way demonstrated in this how-to sample for the Toolbar template. Here is how this should look like for the first column header template:

@helper HeaderTemplate()
{
    <input id='chkSelectAll'  type='checkbox'/>
}

<script type="text/x-kendo-template" id="headerTemplate">
   @Html.Raw(@HeaderTemplate().ToHtmlString().Replace("#", "\\#").Replace("</scr", "<\\/scr"))
</script>

<!-- .. ->

@(Html.Kendo().Grid<ViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Template(@<text></text>)
                  .ClientTemplate(/*..*/).Width(30)
                  .HeaderTemplate(HeaderTemplate().ToHtmlString()).Locked(true);
       /*..*/
    })
    /*..*/
)

<script>

    $(function () {
        var grid = $("#grid").data("kendoGrid");

        /*..*/

        $("#load").click(function (e) {
            e.preventDefault();
            var options = localStorage["kendo-grid-options"];
            if (options) {
                var parsedOptions = JSON.parse(options);
                parsedOptions.columns[0].headerTemplate = $("#headerTemplate").html();

                grid.setOptions(parsedOptions);
            }
        });
    });
</script>

Regards,
Rosen
Telerik

 

 

[prakash]

Hi Rosen

Glad that worked !!
I made another change for this to work completely.

Instead of html checkbox had to make this 
 @Html.Kendo().CheckBox().Name("chkSelectAll").HtmlAttributes(new { onchange="SelectAll()" })
a kendo checkbox, so that my click events start firing.

Thanks for the code !!