Help with "catching" an event AFTER the grid is fully loaded / rendered

[Vlad]

Hello.

I'm having a problem implementing the following scenario:

After the grid is loaded (binding to local data), in some cases, I need to apply the filters, paging, and selection from a previous state of the grid. If I do this inside the databound event, this will cause an infinte loop (as I've read and experience first-hand). How / where can I add the code from ApplyPreviousSettings (see below js code) so that it can work automatically?

E.g. of scenario in cause.

When on page "Users\Index" filter the grid (filterMode = row), change page (if necessary), and select an item.

Click on Edit (which redirects the edit page for the selected user) - at the point of leaving the "Users\Index" , I save in localstorage the grid's state (not all of it - only filter, paging and selection)

When clicking on Save or Cancel, the Index page (with the grid) will be displayed AND it is at this time that I want to "restore" the grid according to the data in the localstorage.

 

I've attached screenshots for the above scenario and a video.

The grid looks like this:

@(Html.Kendo().Grid(Model)
          .Name("Grid")
          .Columns(columns =>
          {
              columns.Bound(p => p.Id).Title("#= Id #").Hidden(true).HtmlAttributes(new { id = "#= Id #" });
              columns.Bound(p => p.FirstName).Title(Resource.Firstname).Filterable(f => f.Cell(c => c.Operator("Contains").ShowOperators(false).Template("EnableAutoFiltering")));
              columns.Bound(p => p.Name).Title(Resource.Lastname).Filterable(f => f.Cell(c => c.Operator("Contains").ShowOperators(false).Template("EnableAutoFiltering")));
              columns.Bound(p => p.EmailAddress).Title(Resource.Email).Filterable(f => f.Cell(c => c.Operator("Contains").ShowOperators(false).Template("EnableAutoFiltering")));
              columns.Bound(p => p.CompletelyEquiped).Title(Resource.CompletelyEquipped)
                  .ClientTemplate("<div style='text-align: center;'><input type='checkbox' value='#= CompletelyEquiped #' disabled='disabled' " +
                                  "# if (CompletelyEquiped) { #" +
                                  "checked='checked'" +
                                  "# } #" +
                                  "/> </div>").Filterable(filterable =>
                                      filterable.Messages(m => m.IsFalse(Resource.No_UserIndex))
                                          .Messages(m => m.IsTrue(Resource.Yes_UserIndex)));

              columns.Bound(p => p.BusinessUnit).Title(Resource.BusinessUnit_UserCreate).Filterable(f => f.Cell(c => c.Operator("Contains").ShowOperators(false).Template("EnableAutoFiltering")));
              columns.Command(c => c.Destroy());
          })
          .ToolBar(toolbar =>
          {

              toolbar.Template(@<text>
                                   <div class="toolbar">
                                       <a href="@Url.Action("Create", "User")" class="k-button k-button-icontext" id="CreateButton"><span class='k-icon k-add'></span>@Resource.Create</a>
                                       @Html.Kendo().Button().Name("EditButton").Content(Resource.Edit).Events(e => e.Click("EditClick")).SpriteCssClass("k-icon k-edit")

                                   </div>
                                </text>);
          })
          .HtmlAttributes(new {style = "width: 125%;"})
          .Pageable(pageable => pageable.Input(true).Numeric(false))
          .Sortable()
          .Events(e => e.DataBound("CustomizeFilterMenu"))
          .Selectable(s => s.Mode(GridSelectionMode.Single))
          .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
          .DataSource(dataSource => dataSource
               .Ajax()
              .ServerOperation(false)
              .Model(model => model.Id(p => p.Id))
              .PageSize(10)
              .Destroy("Delete", "User")

          ))

Javascript:

 

function EnableAutoFiltering(args) {
    args.element.css("width", "90%").addClass("k-textbox").keydown(function (e) {
        setTimeout(function () {
            $(e.target).trigger("change");
        });
    });
}

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

    var selectedItem = grid.dataItem(grid.select());

    if (selectedItem == null) {
        alert("Please select row!");
    } else {
        if (window.location.pathname.endsWith("Index")) {
            window.location = "../User/Edit/" + selectedItem["Id"];
        } else {
            window.location = "../" + window.location.pathname.split("/")[1] + "/User/Edit/" + selectedItem["Id"];
        }

    }
}

function ApplyPreviousSettings() {
        var gridOptions = localStorage["kendo-grid-options"];
        if (gridOptions === "null" || gridOptions === undefined) {

        } else {
            var grid = $("#Grid").data("kendoGrid");

            var state = JSON.parse(gridOptions);

            grid.dataSource.filter(state.filter);
            grid.pager.page(parseInt(state.page));
            var row = $("#Grid").find("tbody>tr>td[id= " + state.selectedUserId + "]").parent();
            grid.select(row);


        }
}

function CustomizeFilterMenu(args) {
    var parents = $(":radio").parent();
    if (!$(parents[0]).hasClass("RadioButtonFilterStyle")) {
        $(parents[0]).addClass("RadioButtonFilterStyle");
    }
}
window.onbeforeunload = function (e) {
    if (e.target.activeElement.id === "EditButton" || e.target.activeElement.id === "CreateButton") {
        var grid = $("#Grid").data("kendoGrid");
        var dataSource = grid.dataSource;
        var state =
            {
                page: dataSource.page(),
                filter: dataSource.filter(),
                selectedItem : grid.dataItem(grid.select()),
                selectedUserId : grid.dataItem(grid.select()).Id
            };
        localStorage["kendo-grid-options"] = kendo.stringify(state);
    } else {
        localStorage["kendo-grid-options"] = null;
    }
};

$(document).ready(function () {
    $("#KendoGrid").removeAttr("hidden");
    kendo.ui.progress($("KendoGrid"), false);
   
});

 

Important things to note: 

Under the grid (as seen in the screenshots) there is a button which does (if I click it manually) exactly what I need to do automatically (the button with text: "ceva") - the button calls the js method ApplyPreviousSettings. 

 

Also, here is a link to a video I've recorded, that I hope will clarify even further what I want to do.

 

https://www.dropbox.com/s/14wb1vuz76sr3st/sampleVideo2.zip?dl=0

Thank you.

Vlad

[Vlad]

UPDATE

 

I've managed to achieve the desired behaviour via a javascript timer. Code is posted below

function setGridState() {
    if (RebindGridState === true) {
        ApplyPreviousSettings();
        RebindGridState = false;
        abortTimer(GridStateTimer);
    }
}

function ApplyPreviousSettings() {
    var gridOptions = localStorage["kendo-grid-options"];
    if (gridOptions === "null" || gridOptions === undefined) {

    } else {
        var grid = $("#Grid").data("kendoGrid");

        var state = JSON.parse(gridOptions);

        grid.dataSource.filter(state.filter);
        grid.pager.page(parseInt(state.page));
        var row = $("#Grid").find("tbody>tr>td[id= " + state.selectedUserId + "]").parent();
        grid.select(row);
    }
}

function abortTimer(timer) {
    clearInterval(timer);
}

// This method is the one being called by the databound event
function CustomizeFilterMenu(args) {
    var parents = $(":radio").parent();
    if (!$(parents[0]).hasClass("RadioButtonFilterStyle")) {
        $(parents[0]).addClass("RadioButtonFilterStyle");
    }

    RebindGridState = true;

}

var GridStateTimer;

var RebindGridState = false;

$(document).ready(function () {
    $("#KendoGrid").removeAttr("hidden");
    kendo.ui.progress($("KendoGrid"), false);
    
    RebindGridState = false;
    GridStateTimer = setInterval(setGridState, 50);
});

 

The ideea is that every 50 miliseconds I check to see if the grid has finished loading its data. If so (RebindGridState is true), then apply the previous state and stop the timer. 

 

In my opinion, this solution is a hack, BUT, it get's the job done ... 

Is there a cleaner way to do this?

 

Thanks,

Vlad

[Boyan Dimitrov]

Hello Vlad,

 

My suggestion is to use one method in order the handler to be executed only once. Please refer to the Events article that provides some detailed information and sample code. 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Vlad]

Hello.

 

Thank you for your suggestion. I've read the Events section before posting the question. However, I found it a bit difficult to attach an event after "DataBound" that will fire one time only. I'll keep trying. Thank you.

[fares]

Hello Vlad, 

Did you find a solution for the issue?

 

[Alex Hajigeorgieva]

Hello, Fares,

Here is a runnable example for your reference:

https://dojo.telerik.com/@bubblemaster/AgOqOqUK

Since the one() method is used after the grid is created, set the autoBind property to false, attach the dataBound handler and then call the data source read() method:

 var grid = $("#grid").kendoGrid({
      autoBind: false,
}).data("kendoGrid");
                  
grid.one("dataBound", function(){
      kendo.alert("DataBound")
});
                  
grid.dataSource.read();

Kind Regards,
Alex Hajigeorgieva
Progress Telerik