Search code examples
asp.net-coretelerik

Telerik Grid in ASP.NET Core Checkbox Iteration on button click


I am using Telerik Grid for ASP.NET Core control. I have a checkbox and I need to iterate through the grid only for the rows that are selected.

The grid is defined like this (partial):

          @(Html.Kendo().Grid<WebPortal.
        Controllers.RebateReturnData>()
        .Name("gridRebates")      
                                                                      .AutoBind(true)
                                                                      .Columns(c =>
                                                                      {
                                                                          c.Select().Title("Select").Width(60);
                                                                          c.Bound(e => e.id).Title("ID").Width(150);
                                                                          c.Bound(e => e.rebateProgram).Title("Program");

The 'c.Select() in the above adds the check box and that works. If I do the following code then it does display in the console as expected:

    function onChange(e) {
    var selectedRows = this.select();
    var selectedDataItems = [];
    for (var i = 0; i < selectedRows.length; i++) {
        var dataItem = this.dataItem(selectedRows[i]);
        selectedDataItems.push(dataItem);
    }

    // selectedDataItems contains all selected data items
    console.log(selectedDataItems);
}

I have a test button setup to call a test function:

         <kendo-button name="getSelected" type="button" onclick="checkSelected()">test selection</kendo-button>

In which I have placed various code to absolutely no good result. If I just put the above code into it then the 'this.select()' does not work. My latest try at it:

    function checkSelected() {

    var data = $("#gridRebates").data("kendoGrid").dataSource.data();

    var foundChecked = 0; 
    $.each(data,
        function (i, row) {
            var checkNumber = row.isChecked;
            console.log(checkNumber);
            if (checkNumber != null) {
                foundChecked++;
            }

        });
            alert("checked count: " + foundChecked);
}

This iterates the rows but always returns a 0 count.


Solution

  • Turned out to be fairly straight forward (like most things once you know the answer). Telerik Support helped me with this:

        function getSelectedData() {
    
        var grid = $("#grid").data("kendoGrid");
        var selectedRows = grid.select();
    
        selectedRows.each(function (e) {
            var dataItem = grid.dataItem(this);
    
            console.log(dataItem);
        })
    }