Iterate grid data

[Andrew]

Hi,

I have local data created in an array:
    var slices = [{id: 1, shorttext: "Cat", isselected: false}
                ,{id: 2, shorttext: "Bird", isselected: true}  ];

Turned into a datasource:
    var Kslices = new kendo.data.DataSource({data: slices});

Put into a grid:
    $("#rowselectorgrid").kendoGrid({
         dataSource: Kslices,
          columns: [{title:"Selector for row", template: $("#rowselectorTemplate").html()}]
     });

The rowselectorTemplate looks like:
    <script id="rowselectorTemplate" type="text/x-kendo-template">
                   <input id="#=id#" type="checkbox" #= isselected ? checked='checked' : '' #>
                    #=shorttext#
        </script>

This all works very well and presents a grid with two rows:
   checkbox + "Cat"
   checked checkbox + "Bird"


The user can now check/uncheck the checkboxes and then click a button to do something (doesn't matter what).

Question: How do I now iterate through the rows in the grid to find the checkboxes to see whether they are checked or not (and get the id attribute of the <input> tag so I can reference the original array)? I have tried a few ways, checked the forums, etc, but am lost...

Help!
 

[Rosen]

Hi Andrew,

This can be achieved in the same way as when working with simple HTML table element. For example:

var selectedInfo = $("#rowselectorgrid")
   .find("tbody > tr input[type=checkbox]")
   .map(function() {
       return {
           checked: $(this).is(":checked"),
           id: $(this).attr("id")
       }
   });

All the best,
Rosen
the Telerik team

[PAUL]

That is all good for client side but what about a post back to the controller. How do I get the rows that have been checked?

I have tried this in the partial view but when the controller tries to pick it up it is always null

 $("#multi_edit").click(function (e)
    {
       
        var grid = $("#Grid").data("kendoGrid");
        var selection = new Array();
        $('.selected').each(function()
            {
                if(this.checked)
                    selection.push(id);
        
            });
   
        $.ajax({
            type: "POST",
            url: "/Budget/FilterPOCEdit",
            data: JSON.stringify(selection),
            contentType: "application/json; charset=utf-8",

            success: function (result) {
        },

               
    });
    }
   

[Rosen]

Hi Paul,

You may achieve this by using the DataSource API to update the selected records and then to push the changes to the server. I have attached a small sample which demonstrates a possible implementation. 

Regards,
Rosen
the Telerik team

[Rich]

Rosen,

This approach looks like it is sort of generalized, am  I right? What if the grid had two separate checkbox columns (one representing a Boolean value, the other used to control a button of some sort)? How would that code differentiate between the two, and get the values pertaining only to the button?

[Rosen]

Hi Rich,

In such case you could set a CSS class to the checkbox responsible for the selection and modify the jQuery selectors to work only over those elements. Similar to the following:

//...
.Columns(column => {
   column.Bound(p => p.ID).ClientTemplate("<input type=\"checkbox\" class=\"chkID\" />");
   //..
})
//....

<script>
    $(document).ready(function () {
        $("#update").click(function() {

            //...

            //find the selected models
            grid.tbody
                .find(".chkID:checked")
                .closest("tr")
                .each(function () {
                    models.push(grid.dataItem(this));
                });

             //....

        });
    });
</script>

Regards,
Rosen
Telerik