HeaderTemplate overridden by localstorage

3 posts, 1 answers
  1. prakash
    prakash avatar
    8 posts
    Member since:
    Feb 2015

    Posted 18 Feb 2015 Link to this post

    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. Answer
    Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 20 Feb 2015 Link to this post

    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.

     
  3. prakash
    prakash avatar
    8 posts
    Member since:
    Feb 2015

    Posted 20 Feb 2015 in reply to Rosen Link to this post

    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 !!


Back to Top