Getting checked rows from kendo grid

Question

I have a kendo grid with a checked box column .I have been trying to get the dataitem rows when the corresponding check boxes are checked.On click of a button , I need to get only the checked rows in JSon .Here is a JSfiddle I have been playing with.It gets only the Id rather than the row data.I have been trying to modify so that it can return the entire row data .

http://jsfiddle.net/Xg56P/31/

        var crudServiceBaseUrl = "http://demos.kendoui.com/service",
            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: crudServiceBaseUrl + "/Products",
                        dataType: "jsonp"
                    },
                    update: {
                        url: crudServiceBaseUrl + "/Products/Update",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: crudServiceBaseUrl + "/Products/Destroy",
                        dataType: "jsonp"
                    },
                    create: {
                        url: crudServiceBaseUrl + "/Products/Create",
                        dataType: "jsonp"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return {
                                models: kendo.stringify(options.models)
                            };
                        }
                    }
                },
                batch: true,
                pageSize: 20,
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: {
                                editable: false,
                                nullable: true
                            },
                            ProductName: {
                                validation: {
                                    required: true
                                }
                            },
                            UnitPrice: {
                                type: "number",
                                validation: {
                                    required: true,
                                    min: 1
                                }
                            },
                            Discontinued: {
                                type: "boolean"
                            },
                            UnitsInStock: {
                                type: "number",
                                validation: {
                                    min: 0,
                                    required: true
                                }
                            }
                        }
                    }
                }
            });

        //Grid definition
        var grid = $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 430,
            //define dataBound event handler

            toolbar: ["create"],
            columns: [
                //define template column with checkbox and attach click event handler
                { template: "<input type='checkbox' class='checkbox' />" },
                "ProductName", {
                    field: "UnitPrice",
                    title: "Unit Price",
                    format: "{0:c}",
                    width: "100px"
                }, {
                    field: "UnitsInStock",
                    title: "Units In Stock",
                    width: "100px"
                }, {
                    field: "Discontinued",
                    width: "100px"
                }, {
                    command: ["edit", "destroy"],
                    title: "&nbsp;",
                    width: "172px"
                }
            ],
            editable: "inline"
        }).data("kendoGrid");

        //bind click event to the checkbox
        grid.table.on("change", ".checkbox" , selectRow);

        $("#showSelection").bind("click", function () {
            var items = [];
            for(var i in checkedrows){
                if(checkedrows[i]){
                    items.push([i]);
                }
            }

            alert(JSON.stringify(itemss));
        });
    });

    var checkedrows = {};
    var itemss =[];
    //on click of the checkbox:
    function selectRow() {
        var checked = this.checked,
            row = $(this).closest("tr"),
            grid = $("#grid").data("kendoGrid"),
            dItem = grid.dataItem(row);

        checkedrows[dItem.id] = checked;
        if (checked) {
            itemss.push(dItem)
            //-select the row


        } 
        else
        {
            itemss.pop(dataItem);
        }
    }

the row get can be accessed by the dataItem ,but how to get the dataItem based on the index .Thanks.

Answer 1

To get just the checked boxes, I use this

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

        grid.tbody.find("input:checked").closest("tr").each(function (index) {
            whatever you need done.
        });