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

HeaderTemplate overridden by localstorage

2 Answers 472 Views
Grid
This is a migrated thread and some comments may be shown as answers.
prakash
Top achievements
Rank 1
prakash asked on 18 Feb 2015, 02:45 PM
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 ?




2 Answers, 1 is accepted

Sort by
0
Accepted
Rosen
Telerik team
answered on 20 Feb 2015, 08:18 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
prakash
Top achievements
Rank 1
answered on 20 Feb 2015, 10:54 AM
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 !!


Tags
Grid
Asked by
prakash
Top achievements
Rank 1
Answers by
Rosen
Telerik team
prakash
Top achievements
Rank 1
Share this question
or