Try using the code snippet below.
<!DOCTYPE html> <html> <head> <title>Jayesh Goyani</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" /> <script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script> </head> <body> <div id="example"></div> <input type="text" id="txtColumnName" /> <button onclick="GetColumnIndexFromName();">GetIndex</button> <script> $(document).ready(function () { $("#example").kendoGrid({ dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" }, pageSize: 20 }, height: 550, groupable: true, sortable: true, pageable: { refresh: true, pageSizes: true, buttonCount: 5 }, columns: [{ template: "<div class='customer-name'>#: ContactName #</div>", field: "ContactName", title: "Contact Name", width: 240 }, { field: "ContactTitle", title: "Contact Title" }, { field: "CompanyName", title: "Company Name" }, { field: "Country", width: 150 }] }); }); function GetColumnIndexFromName() { var index = -1; var strName = $("#txtColumnName").val(); var grid = $("#example").data("kendoGrid"); var columns = grid.options.columns; if (columns.length > 0) { for (var i = 0; i < columns.length; i++) { if (columns[i].field == strName) { </script> </body> </html>
Let me know if there is any problem.
source share