2015-12-17 26 views
5

C'è un modo per scoprire l'indice della colonna nella griglia, se conosciamo il nome della colonna nella griglia di Kendo?Ottieni l'indice di colonna dal nome della colonna nella griglia di Kendo in Javascript

ad es.

EmployeeID| Name 
123  | John 

Desidero conoscere l'indice del campo "Nome", ovvero 1 nella griglia. Qualsiasi suggerimento.

Grazie.

Sanjeev

+0

A cosa serve l'indice? Stai cercando di modificare/eliminare? È necessario fornire un po 'più di informazioni in modo che possiamo aiutare. –

+0

@ haakon319 ho bisogno di nascondere/mostrare la colonna nella mia griglia. hideColumn/showColumn funziona nella griglia di Kendo ma le prestazioni sono molto lente, quindi ho voluto provare questa soluzione, che richiede l'indice delle colonne. http://stackoverflow.com/questions/30167893/kendo-grid-column-show-hide-making-issue-with-80-columns – sanjeev40084

risposta

6

Si prega di provare con il snippet di codice qui sotto.

<!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> 

Fatemi sapere se vi sono dubbi.

2

Questo codice darà l'oggetto della colonna:

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

Naturalmente è possibile personalizzare il filtro ulteriormente se si desidera.

+0

Questo tecnicamente non ottiene l'** indice ** della colonna, ma ottiene la colonna effettiva, che è ciò di cui avevo bisogno piuttosto che l'indice. – TLS