CODEWITHSUNDEEP
razorkendo-uikendo-gridkendo-asp.net-mvc
Thilok Gunawardena
Thilok Gunawardena

Reputation: 924

Kendo MVC - Persist and load grid buttons

I am trying to persist my grid data and following this example.

This works very well for me but the problem is I am having Excel Import button in my grid and after loading the persisted state of the grid, the Excel Export button is disappeared.

This is my code for the grid (data persisting code is not here, it is same as the above example).

@(Html.Kendo().Grid<DtoTaskExtended>()
          .Name("AdraKendoGrid")
          .TableHtmlAttributes(CodeTaskKendoGrid.GetTableHtmlAttributes())
          .RowAction(CodeTaskKendoGrid.GridPerRowAction)
          .CellAction(CodeTaskKendoGrid.GridCellsConfigurator)
          .Columns(CodeTaskKendoGrid.ColumnsConfigurator)
          .ToolBar(tools => tools.Excel())
          .Pageable(pager => pager.PageSizes(new int[] { 15, 50, 100, 500 })
              .Info(true)
              .Messages(message => message.Display("{0} - {1} " + Strings.of + "{2} " + Strings.items))
              .Messages(message => message.ItemsPerPage(Strings.itemsPerPage))
              .Messages(message => message.Empty(Strings.noItemsToDisplay)))
          .Sortable()
          .Groupable(gr => gr.Messages(message => message.Empty(Strings.kendoGroupMsg)))
          .Excel(excel => excel
              .AllPages(true)
              .FileName("Task Grid Export.xlsx")
              .Filterable(true)
              .ProxyURL(Url.Action("Excel_Export_Save", "Task")) //.ForceProxy(true)
          )
          .Filterable()
          .Reorderable(reorder => reorder.Columns(true))
          .Resizable(r => r.Columns(true))
          .ColumnMenu()
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(10)
              .Read(read => read.Action("GetTaskResult", "Task")))
          .ClientDetailTemplateId("client-template")
          )

Data is saved and loaded correctly, but the grid buttons (Export to Excel) button is disappeared after loading data.

How do I persist the button of the gird?

Thank you.

Upvotes: 2

Views: 2149

Answers (3)

Federico Navarrete
Federico Navarrete

Reputation: 3284

After a long research I was able to find a real and workable solution:

https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/grid-preserve-server-toolbar-template-after-set-options/GridPerserveToolbarServerTemplate/Views/Home/Index.cshtml

You need to add the following code to your View:

Razor:

@helper ToolbarTemplate() {
    <a class="k-button k-button-icontext k-grid-save-changes" href="javascript:void(0)"><span class="k-icon k-update"></span>Save changes</a>
    <a class="k-button k-button-icontext k-grid-cancel-changes" href="javascript:void(0)"><span class="k-icon k-cancel"></span>Cancel changes</a>
}

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

JavaScript:

<script>
    //Here you define the ID of your grid
    var grid = $("#grid").data("kendoGrid");
    //Here you get the local settings for your case
    var options = localStorage["settings"];
    //To verify if there is anything stored 
    if (options) {
        //To parse the result
        var parsedOptions = JSON.parse(options);
        //To display the toolbar
        parsedOptions.toolbar = [
            { template: $("#toolbarTemplate").html() }
        ];
        //To set the stored changes
        grid.setOptions(parsedOptions);
    }
</script>

What is the trick?

You need to get code generated the first time before saving the state (you can get it with inspect element).

buttonsbuttons code

And add it to the ToolbarTemplate(), after that the toolbar is going to be stored too.

Also, in the above link you can read more about headers if you want to stored them too, it will be a similar code.

The code that I showed it's fully tested and it's working 100% of cases.

If you a doubt of why this is happening, as far as I know it's related to the fact that the Toolbar is created on the server side while the states are done on the client side.

Upvotes: 0

saulyasar
saulyasar

Reputation: 815

Hi I have a same issue like you and i solve my problem like this 

function load() {
    var grid = $('#gr').data("kendoGrid");
    var toolBar = $("#grid .k-grid-toolbar").html();

    var options = localStorage["kendo-grid-options-log"];
    if (options) {
        grid.setOptions(JSON.parse(options));
        $("#grid .k-grid-toolbar").html(toolBar);
        $("#grid .k-grid-toolbar").addClass("k-grid-top");
    }
}

Upvotes: 3

nsnadell
nsnadell

Reputation: 143

There is a limitation for making the toolbar persistent. A note about it from the kendo docs:

An important limitation when using the setOptions method in combination with the MVC wrappers is that any toolbar or header server templates (razor syntax @) will be lost and the layout will become incorrect once the method is invoked. Those options cannot be persisted because there is no JavaScript equivalent option for them since they contain server side logic. Consider using JavaScript initialization (instead of the MVC wrapper). An alternative is to specify the same option with the JavaScript equivalent.

Here's a possible solution: Persist state issues

I'm not a developer, but ran across the same problem with using javascript. I had to put the entire template code in the grid options, instead of pointing to an HTML template. I hope that points you in the right direction.

Upvotes: 1

Related Questions