Question

正如标题所示，我在MVC应用程序的视图中使用了Kendo UI Grid。

现在，在单击特定单元格时，我需要将行索引和列标题（该单元所属的行）传递给应用程序中.cs文件中编写的函数。

感谢任何帮助。

谢谢：）

P.S。：如果您认为我没有提供足够的信息，请告诉我，因为我是一名新手程序员！

Answer 1

您可以使用ondatabound事件进行参考，请查看以下代码段。

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 colname = grid.columns[$("td", row).index(this)].title;
                alert('row index is :- ' + rowIdx + ' and column name is:- ' + colname);
            });
        }

完整代码： -

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jayesh Goyani</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid"></div>
    <script>
        $(document).ready(function () {

            var products = [{
                ProductID: 1,
                ProductName: "Chai",
                SupplierID: 1,
                CategoryID: 1,
                QuantityPerUnit: "10 boxes x 20 bags",
                UnitPrice: 18.0000,
                UnitsInStock: 39,
                UnitsOnOrder: 0,
                ReorderLevel: 10,
                Discontinued: false,
                Category: {
                    CategoryID: 1,
                    CategoryName: "Beverages",
                    Description: "Soft drinks, coffees, teas, beers, and ales"
                }
            }, {
                ProductID: 2,
                ProductName: "Chang",
                SupplierID: 1,
                CategoryID: 1,
                QuantityPerUnit: "24 - 12 oz bottles",
                UnitPrice: 19.0000,
                UnitsInStock: 17,
                UnitsOnOrder: 40,
                ReorderLevel: 25,
                Discontinued: false,
                Category: {
                    CategoryID: 1,
                    CategoryName: "Beverages",
                    Description: "Soft drinks, coffees, teas, beers, and ales"
                }
            }, {
                ProductID: 3,
                ProductName: "Aniseed Syrup",
                SupplierID: 1,
                CategoryID: 2,
                QuantityPerUnit: "12 - 550 ml bottles",
                UnitPrice: 10.0000,
                UnitsInStock: 13,
                UnitsOnOrder: 70,
                ReorderLevel: 25,
                Discontinued: false,
                Category: {
                    CategoryID: 2,
                    CategoryName: "Condiments",
                    Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
                }
            }, {
                ProductID: 4,
                ProductName: "Chef Anton's Cajun Seasoning",
                SupplierID: 2,
                CategoryID: 2,
                QuantityPerUnit: "48 - 6 oz jars",
                UnitPrice: 22.0000,
                UnitsInStock: 53,
                UnitsOnOrder: 0,
                ReorderLevel: 0,
                Discontinued: false,
                Category: {
                    CategoryID: 2,
                    CategoryName: "Condiments",
                    Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
                }
            }, {
                ProductID: 5,
                ProductName: "Chef Anton's Gumbo Mix",
                SupplierID: 2,
                CategoryID: 2,
                QuantityPerUnit: "36 boxes",
                UnitPrice: 21.3500,
                UnitsInStock: 0,
                UnitsOnOrder: 0,
                ReorderLevel: 0,
                Discontinued: true,
                Category: {
                    CategoryID: 2,
                    CategoryName: "Condiments",
                    Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
                }
            }];

            $("#grid").kendoGrid({
                dataSource: {
                    data: products,
                    schema: {
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductID: { type: 'number' },
                                UnitsInStock: { type: 'number' },
                                ProductName: { type: 'string' },
                                QuantityPerUnit: { type: 'string' },
                                UnitPrice: { type: 'number' },
                            }
                        }
                    },
                },
                dataBound: onDataBound,
                columns: [
                    { field: "ProductName", title: "ProductName" },
                    { field: "UnitsInStock", title: "UnitsInStock" },
                    { field: "QuantityPerUnit", title: "QuantityPerUnit" },
                    { field: "UnitPrice", title: "UnitPrice" },
                ]
            });
        });

        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 colname = grid.columns[$("td", row).index(this)].title;
                alert('row index is :- ' + rowIdx + ' and column name is:- ' + colname);
            });
        } 
    </script>

</body>
</html>

如果有任何疑虑，请告诉我。

在用于MVC的kendo ui网格中单击一个单元格时需要行索引和列标题

1 个答案: