[Solved] Persist-State Issues

[Diego]

Hello, i have a problem with my Grid and Persist-State, when i use "Load" state, the grid lose all properties(Edit and Remove bottons, Tooltips and styles).
@{
                      string quote = "\"";
                      var javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
                      string jsonString = javaScriptSerializer.Serialize(DictionaryByControls.TagsConfirmationPanel);

                  }
                  @(Html.Kendo().Grid<ControlGAS.DataAccess.Entities.Customer>()
                      .Name("GridCustomers")
                      .Columns(columns =>
                      {
                          columns.Bound(customer => customer.Id).Title("ID").Filterable(f => f.UI("filterById")).HtmlAttributes(new { @style = "white-space: nowrap;" });
                          columns.Bound(customer => customer.Denomination).Title(ControlGAS.Office.Resources.Resources.ControlGAS.Denomination).Filterable(f => f.UI("filterByName")).HtmlAttributes(new { @style = "white-space: nowrap;" });
                          columns.Bound(customer => customer.Code).Title(ControlGAS.Office.Resources.Resources.ControlGAS.Code).Filterable(f => f.UI("filterByCode")).HtmlAttributes(new { @style = "white-space: nowrap;" });
                          columns.Bound(customer => customer.Address).Title(ControlGAS.Office.Resources.Resources.ControlGAS.Address).Filterable(f => f.UI("filterByAddress")).HtmlAttributes(new { @style = "white-space: nowrap;" });
                          columns.Bound(customer => customer.City).Title(ControlGAS.Office.Resources.Resources.ControlGAS.City).Filterable(f => f.UI("filterByCity")).HtmlAttributes(new { @style = "white-space: nowrap;" });
                          columns.Bound(customer => customer.FiscalIdentification).Title(ControlGAS.Office.Resources.Resources.ControlGAS.FiscalIdentification).Filterable(f => f.UI("filterByFiscalId")).HtmlAttributes(new { @style = "white-space: nowrap;" });
                          columns.Template(customer => { }).ClientTemplate(
                              "<a href=" + quote + @Url.Action("Editing", "Customer", new { customerId = "#=Id#" }) + quote + "><i class='font-size-20 icon md-edit margin-right-10' aria-hidden='true'></i></a>" + "" +
                              "<a class='cursor-pointer' data-customer='#=Denomination#'data-id-customer='#=Id#' data-resource = '" + jsonString + "'  data-control='btn-delete-customer'><i class='font-size-20 icon md-delete margin-right-10' aria-hidden='true'></i></a>")
                              .Title("Actions").Width(100);

                      })
                      .ColumnMenu()
                      .Scrollable(s => s.Height("100%"))
                      .Sortable()
                      .Groupable(g => g.Messages(m => m.Empty(ControlGAS.Office.Resources.Resources.ControlGAS.Drag)))
                      .Pageable(p => p
                                      .Refresh(true)
                                      .PageSizes(true)
                                      .ButtonCount(5)
                                      .PreviousNext(true)
                                      .Messages(m => m.ItemsPerPage(ControlGAS.Office.Resources.Resources.ControlGAS.ItemPerPage)))

                      .DataSource(
                          dataSource => dataSource
                          .Ajax()
                          .Read(read => read.Action("GetCustomers", "Customer"))
                      )
                      .Resizable(r => r.Columns(true))
                      .Reorderable(r => r.Columns(true))
                      .ClientDetailTemplateId("master")
                      .Filterable(filter => filter.Mode(GridFilterMode.Row)
                            .Extra(false)
                            .Operators(operators => operators
                                .ForString(str => str.Clear()
                                    .StartsWith(ControlGAS.Office.Resources.Resources.ControlGAS.StartsWith)
                                    .IsEqualTo(ControlGAS.Office.Resources.Resources.ControlGAS.IsEqualTo)
                                    .IsNotEqualTo(ControlGAS.Office.Resources.Resources.ControlGAS.IsNotEqualTo)

                               )
                               .ForNumber(num => num.Clear()
                                    .IsEqualTo(ControlGAS.Office.Resources.Resources.ControlGAS.IsEqualTo)
                                    .IsNotEqualTo(ControlGAS.Office.Resources.Resources.ControlGAS.IsNotEqualTo)
                                    .IsNull(ControlGAS.Office.Resources.Resources.ControlGAS.IsNull)
                                    .IsLessThan(ControlGAS.Office.Resources.Resources.ControlGAS.IsLessThan)
                                    .IsGreaterThan(ControlGAS.Office.Resources.Resources.ControlGAS.IsGreaterThan))

                          )
                      )
                      .Events(events => events.DataBound("dataBound"))
                  )

Save State

function GetDataGrid() {
    var grid = $("#GridCustomers").data("kendoGrid");
    var dataSource = grid.dataSource;
    var currentColumnState = new Array();

    for (var i = 0; i < grid.columns.length; i++) {

        if (grid.columns[i].hidden == undefined) {
            grid.columns[i].hidden = false;
            currentColumnState.push({
                field: grid.columns[i].field,
                hidden: grid.columns[i].hidden
            });
        }
        else {
            currentColumnState.push({
                field: grid.columns[i].field,
                hidden: grid.columns[i].hidden
            });
        }
    }

    var state = {
        page: dataSource.page(),
        pageSize: dataSource.pageSize(),
        sort: dataSource.sort(),
        group: dataSource.group(),
        filter: dataSource.filter(),
        columns: currentColumnState
    };

    return JSON.stringify(state);
}

Load State

function SetDataGrid(data) {
            debugger;
            var result = data.result;
            var jsonResult = $.parseJSON(result);

            var state = $.parseJSON(jsonResult.Data);

            var grid = $("#GridCustomers").data("kendoGrid");
            var options = grid.options;

            for (var i = 0; i < state.columns.length; i++) {
                options.columns[i].hidden = state.columns[i].hidden;
                console.log(state.columns[i]);
                if (state.columns[i].hidden == true) {
                    grid.hideColumn(i);
                }
                else {
                    grid.showColumn(i);
                }
            }

            options.columns = state.columns;
            options.dataSource.page = state.page;
            options.dataSource.pageSize = state.pageSize;
            options.dataSource.sort = state.sort;
            options.dataSource.filter = state.filter;
            options.dataSource.group = state.group;

            grid.destroy();
            $("#GridCustomers").kendoGrid(options);
        }

 

Thanks All

[Dimitar]

Hello,

I would suggest you to take a look at the Grid Persist state demo, which shows how getOptions and setOptions client-side methods should be used, to persist all Grid options.

Feel free to contact us again, if you have any questions.

Regards,
Dimitar
Telerik by Progress