2015-12-17 4 views
5

Есть ли способ узнать индекс столбца в сетке, если мы знаем имя столбца в сетке Кендо?Получить индекс столбца от имени столбца в сетке Кендо в Javascript

например.

EmployeeID| Name 
123  | John 

Я хочу знать индекс поля «Имя», то есть 1 в сетке. Любые предложения.

Спасибо.

Санджив

+0

Для чего нужен индекс? Вы пытаетесь отредактировать/удалить? Вам нужно предоставить немного больше информации, чтобы мы могли помочь. –

+0

@ haakon319 Мне нужно скрыть/показать столбец в моей сетке. hideColumn/showColumn работает в сетке Kendo, но производительность очень медленная, поэтому я хотел попробовать, это решение здесь, для чего требуется индекс столбца. http://stackoverflow.com/questions/30167893/kendo-grid-column-show-hide-making-issue-with-80-columns – sanjeev40084

ответ

6

Пожалуйста, попробуйте ниже фрагмент кода.

<!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) { // columns[i].title -- You can also use title property here but for this you have to assign title for all columns 
         index = i; 
        } 
       } 
      } 

      if (index == -1) { 
       alert("column name not exists"); 
      } 
      else { 
       alert("column index is:- " + index); 
      } 
     } 
    </script> 
</body> 
</html> 

Сообщите мне, если возникнут проблемы.

2

Этот код даст объект колонки:

var grid = $('#grid').getKendoGrid(); 
grid.columns.find(function(v, i) { return grid.columns[i].field == 'myColumnName'; }) 

Конечно, вы можете настроить фильтр и далее, если вы хотите.

+0

Это технически не получает ** индекс ** столбца, но это действительно получает фактический столбец, который мне нужен, а не индекс. – TLS