Thursday 1 October 2015

Get row and column index on change event or on click event on Kendo-UI Grid

Get row and column index on click event

function onDataBound(e) {
    var grid = $("#Grid").data("kendoGrid");
    $(grid.tbody).on("click", "td", function (e) {
        var row = $(this).closest("tr");
        var rowIdx = $("tr", grid.tbody).index(row);
        var colIdx = $("td", row).index(this);
        alert(rowIdx + '-' + colIdx);
    });
}

$(document).ready(function () {
    $("#Grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
                dataType: "jsonp"
            },
            schema: {
                model: {
                    fields: {
                        OrderID: { type: "number" },
                        Freight: { type: "number" },
                        ShipName: { type: "string" },
                        OrderDate: { type: "date" },
                        ShipCity: { type: "string" }
                    }
                }
            },
            pageSize: 10,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        },
        dataBound: onDataBound,
        filterable: true,
        sortable: true,
        pageable: true,
        columns: [{
            field: "OrderID",
            filterable: false
        },
                        "Freight",
                        {
                            field: "OrderDate",
                            title: "Order Date",
                            width: 120,
                            format: "{0:MM/dd/yyyy}"
                        }, {
                            field: "ShipName",
                            title: "Ship Name",
                            width: 260
                        }, {
                            field: "ShipCity",
                            title: "Ship City",
                            width: 150
                        }
                    ]
    });
});
<div id="Grid">
</div>

Get row and column index on Change event

<body>
    <script>

        function onChange(arg) {
            var grid = $("#Grid").data("kendoGrid");
            var row = this.select().closest("tr");
            var rowIdx = $("tr", grid.tbody).index(row);
            var colIdx = this.select().index();
            alert(rowIdx + '-' + colIdx);
        }

        $(document).ready(function () {
            $("#Grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
                        dataType: "jsonp"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                Freight: { type: "number" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShipCity: { type: "string" }
                            }
                        }
                    },
                    pageSize: 10,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                },

                selectable: "multiple cell",
                change: onChange,
                filterable: true,
                sortable: true,
                pageable: true,
                columns: [{
                    field: "OrderID",
                    filterable: false
                },
                                "Freight",
                                {
                                    field: "OrderDate",
                                    title: "Order Date",
                                    width: 120,
                                    format: "{0:MM/dd/yyyy}"
                                }, {
                                    field: "ShipName",
                                    title: "Ship Name",
                                    width: 260
                                }, {
                                    field: "ShipCity",
                                    title: "Ship City",
                                    width: 150
                                }
                ]
            });
        });

    </script>
    <div id="Grid">
</div>
</body>

3 comments:

  1. Jayesh, i have some trouble...can yougive me solution...

    this is the trouble

    http://stackoverflow.com/questions/34428572/how-to-trigger-event-button-click-on-radlistview

    ReplyDelete
  2. How to get last row and its all cells ?

    ReplyDelete
  3. As reported by Stanford Medical, It is in fact the one and ONLY reason this country's women live 10 years more and weigh an average of 19 KG less than us.

    (And by the way, it has NOTHING to do with genetics or some secret-exercise and EVERYTHING around "HOW" they eat.)

    P.S, What I said is "HOW", not "what"...

    Tap this link to determine if this quick questionnaire can help you unlock your true weight loss possibilities

    ReplyDelete