How to persist selection checkbox state when paging or changing tab on the kendo grid

Question

I want to persist selection of checkbox while paging or moving on other tab in kendo grid .I have referred "How to keep current checkbox state when paging on the grid" here and but i didn't get value of checked and checkbox and also confused with the steps.Please guide in detail.I have attached code below.I have attached script code kendo ui code and html code below.Also thought to use Session to store values of selected checkbox but i don't know is it right way or not. Please guide me as soon as possible.

        <div class="dashboardCharts" id="grid-display">  
             <div class="count-detail-top right">
                    <div class="count-detail-bg right">
                        <ul id="ulOptions">
                            <li id="Employee" data-type="employee"><a href="javascript:void(0)">Employee</a></li>
                            <li id="Visitor" data-type="visitor"><a href="javascript:void(0)">Visitor</a></li>                     
                        </ul>
                    </div>
                </div>
       @(Html.Kendo().Grid<xyz.Models.abcModel>()
             .Name("grid")         
            .Columns(columns =>
            {
                columns.Bound(c => c.Employee_id).Title("Alert On").Width(200)
                  .ClientTemplate("<input type=\"checkbox\" class=\"checkbox\"  data-id=\"#= Employee_id#\"/>").Sortable(false);                       
                columns.Bound(c => c.Employee_name).Title("Employee Name");                                
            })           
         .NoRecords("No Records Found")                           
               .Events(e => e.DataBound("onDataBound"))           
                .DataSource(dataSource => dataSource                                 
                .Transport(transport =>
                   transport
                   .Read(read => read.Url(DataUrl))  
                    .ParameterMap("parameterMap")
                ))

            )
             </div> 

//code in script :     
       <script> 
          function onDataBound(e) {

            $(".checkbox").bind("click", function (e) {
                e.stopPropagation();
                $(e.target).closest("tr").toggleClass("k-state-selected");

                var tr = $(e.target).closest("tr");
                var chk = $(tr).find(".checkbox");
                var selected = $(chk).attr("data-id");

                var a = selectedIDs.includes(selected);
                if (a != true) {
                    if ($(chk).prop("checked")) {
                        selectedIDs.push(selected);
                    }
                    else {                   
                     selectedIDs.pop(selected);                 
                    }
                }

            });


            var gridDataView = $("#grid").data().kendoGrid.dataSource.view();        
            for (var i = 0; i < gridDataView.length; i++) {
                var panelApplicationId = gridDataView[i].Checkbox;            
                if (ShouldBeChecked(panelApplicationId)) {
                    $('#grid tr td input').eq(i).prop("checked", true);
                }
            }       
        }      
         $(document).on('click', 'input.checkbox', function (e) {
            var checked = $(this).prop("checked");
            var gridDataView = $("#grid").data().kendoGrid.dataSource.view();
            console.log(gridDataView);
            var idx = $(this).closest("tr").find("td:nth-child(1)").text();
            var gridData = $("#grid").data().kendoGrid.dataSource.data();
            for (var i = 0; i < gridData.length; i++) {
                if (gridData[i].ID == idx) {
                    gridData[i].Checkbox = checked;
                    break;
                }
            }
        });
        function ShouldBeChecked(panelApplicationId) {
            var shouldBeChecked = false;
            var gridData = $("#grid").data().kendoGrid.dataSource.data();
            for (var i = 0; i < gridData.length; i++) {
                if (gridData[i].Checkbox == panelApplicationId) {
                    if (gridData[i].Checkbox) {
                        shouldBeChecked = true;
                    }
                    break;
                }
            }
            return shouldBeChecked;
        }

    </script>

    code for selected checkbox and and not selected checkbox.
    <input type="checkbox" class="checkbox" data-id="34" checked="checked">
    <input type="checkbox" class="checkbox" data-id="30">

Answer 1

As mentioned by OP in question-comment as of the 2017 R2 release, there is a grid-option persistselection

Kendo-versions before that, can add their own code, storing the selection in the change-event, and restoring it in the databoundevent as shown by Kendo in persist-row-selection:

     change: function (e, args) {
        var grid = e.sender;
        var items = grid.items();
        items.each(function (idx, row) {
            var idValue = grid.dataItem(row).get(idField);
            if (row.className.indexOf("k-state-selected") >= 0) {
                selectedOrders[idValue] = true;
            } else if (selectedOrders[idValue]) {
                delete selectedOrders[idValue];
            }
        });
      },
      dataBound: function (e) {
        var grid = e.sender;
        var items = grid.items();
        var itemsToSelect = [];
        items.each(function (idx, row) {
          var dataItem = grid.dataItem(row);
          if (selectedOrders[dataItem[idField]]) {
            itemsToSelect.push(row);
          }
        });

        e.sender.select(itemsToSelect);
      }

(See also this SO-question.)