Как сохранить состояние флажка выбора при поиске или изменении вкладки в сетке кендо - PullRequest
Новая
       10

Как сохранить состояние флажка выбора при поиске или изменении вкладки в сетке кендо

0 голосов
/ 18 января 2019

Я хочу сохранить выбор флажка во время подкачки или перехода на другую вкладку в сетке кендо. Я упомянул здесь «Как сохранить текущее состояние флажка при поиске в сетке», но я не получил значения флажка и флажка и также перепутали с шагами. Пожалуйста, подробно описывайте руководство. Я прикрепил код ниже. Я прикрепил код сценария kendo ui code и html code ниже. Также думал использовать Session для хранения значений выбранного флажка, но я не знаю, так ли это правильный путь или нет. Пожалуйста, ведите меня как можно скорее. 

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

1 Ответ

0 голосов
/ 08 июля 2019

Как упомянуто OP в вопросе-комментарии от выпуска R2 R2, есть опция сетки persistselection

Kendo-версии до этого могут добавлять свой собственный код, сохраняя выделение в change -вент и восстанавливая его в событии databound, как показано Kendo в 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);
      }

(см. Также этот SO-вопрос .)

...