Kendo UI Grid: Скрыть столбец при инициализации из таблицы HTML?

Question

   $(document).ready(function() { 
 
        $("#grid").kendoGrid({ 
 
         height: 550, 
 
         sortable: true 
 
        }); 
 
       });

<link href="http://kendo.cdn.telerik.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script> 
 

 
<div id="example"> 
 
      <table id="grid"> 
 
       <colgroup> 
 
        <col /> 
 
        <col /> 
 
        <col /> 
 
        <col /> 
 
        <col /> 
 
       </colgroup> 
 
       <thead> 
 
        <tr> 
 
         <th data-field="make" data-hidden="true">Car Make</th> 
 
         <th data-field="model">Car Model</th> 
 
         <th data-field="year">Year</th> 
 
         <th data-field="category">Category</th> 
 
         <th data-field="airconditioner">Air Conditioner</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr> 
 
         <td>Volvo</td> 
 
         <td>S60</td> 
 
         <td>2010</td> 
 
         <td>Saloon</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Audi</td> 
 
         <td>A4</td> 
 
         <td>2002</td> 
 
         <td>Saloon</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
        <tr> 
 
         <td>BMW</td> 
 
         <td>535d</td> 
 
         <td>2006</td> 
 
         <td>Saloon</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
        <tr> 
 
         <td>BMW</td> 
 
         <td>320d</td> 
 
         <td>2006</td> 
 
         <td>Saloon</td> 
 
         <td>No</td> 
 
        </tr> 
 
        <tr> 
 
         <td>VW</td> 
 
         <td>Passat</td> 
 
         <td>2007</td> 
 
         <td>Saloon</td> 
 
         <td>No</td> 
 
        </tr> 
 
        <tr> 
 
         <td>VW</td> 
 
         <td>Passat</td> 
 
         <td>2008</td> 
 
         <td>Saloon</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Peugeot</td> 
 
         <td>407</td> 
 
         <td>2006</td> 
 
         <td>Saloon</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Honda</td> 
 
         <td>Accord</td> 
 
         <td>2008</td> 
 
         <td>Saloon</td> 
 
         <td>No</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Alfa Romeo</td> 
 
         <td>159</td> 
 
         <td>2008</td> 
 
         <td>Saloon</td> 
 
         <td>No</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Nissan</td> 
 
         <td>Almera</td> 
 
         <td>2001</td> 
 
         <td>Saloon</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Mitsubishi</td> 
 
         <td>Lancer</td> 
 
         <td>2008</td> 
 
         <td>Saloon</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Opel</td> 
 
         <td>Vectra</td> 
 
         <td>2008</td> 
 
         <td>Saloon</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Toyota</td> 
 
         <td>Avensis</td> 
 
         <td>2006</td> 
 
         <td>Saloon</td> 
 
         <td>No</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Toyota</td> 
 
         <td>Avensis</td> 
 
         <td>2008</td> 
 
         <td>Saloon</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Toyota</td> 
 
         <td>Avensis</td> 
 
         <td>2008</td> 
 
         <td>Saloon</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Audi</td> 
 
         <td>Q7</td> 
 
         <td>2007</td> 
 
         <td>SUV</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Hyundai</td> 
 
         <td>Santa Fe</td> 
 
         <td>2012</td> 
 
         <td>SUV</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Hyundai</td> 
 
         <td>Santa Fe</td> 
 
         <td>2013</td> 
 
         <td>SUV</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Nissan</td> 
 
         <td>Qashqai</td> 
 
         <td>2007</td> 
 
         <td>SUV</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Mercedez</td> 
 
         <td>B Class</td> 
 
         <td>2007</td> 
 
         <td>Hatchback</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Lancia</td> 
 
         <td>Ypsilon</td> 
 
         <td>2006</td> 
 
         <td>Hatchback</td> 
 
         <td>Yes</td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
     </div>

Инициализация из HTML таблицы, как можно указать столбец будет скрыт? Мне нужно получить доступ к данным для этого столбца в JS, но не хочу, чтобы эти данные были видны конечному пользователю.

http://demos.telerik.com/kendo-ui/grid/from-table

Я пытался использовать атрибут: (это данные поля и на й тега, как в демке) данные скрыты = «истина» на го тега, но это не так за работой.

Обратите внимание, что я хотел бы указать скрытый параметр как атрибут html, если это возможно.

Answer 1

к сожалению, вы не можете использовать атрибут скрытый при инициализации из HTML таблицы: http://docs.telerik.com/kendo-ui/web/grid/introduction#create-a-grid-from-an-existing-html-table

Соответствующая цитата:

При создании сетки из существующей таблицы, следующий столбец настройки могут определяется через атрибуты HTML:

• имена полей данных с помощью атрибутов поля данных
• ширина столбцов с помощью ширины стилей применяется к соответствующим элементам
• определяет тип данных с помощью данных типа атрибутов
• определить шаблон столбца с помощью данных шаблона атрибутов
• включить или отключить меню колонки с помощью меню атрибутов данных
• включить или отключить сортировку с помощью атрибутов данных-сортируемого
• включить или выключить фильтрацию с помощью атрибутов данных фильтруемых-
• включить или отключить группировку с помощью данных атрибутов-групповой

Все атрибуты должны применяться к элементам <th>, за исключением стилей ширины столбцов.

Все остальные параметры, связанные с столбцом, не могут быть определены с помощью атрибутов HTML в <table>. Если такие параметры должны быть использованы (например, команды, блокировка, редакторы и т. Д.), То указанную выше конфигурацию атрибутов следует отменить, и все настройки должны быть включены в инструкцию инициализации Javascript Grid (при использовании декларативной инициализации виджета должны быть заданы свойства столбца через атрибут data-columns).

Для получения дополнительной информации о том, что: http://www.telerik.com/blogs/mvvm_declarative_initialization_and_html5_data_attributes Это хороший обзор декларативного посвящения в кендо.

http://www.telerik.com/forums/declarative-initialization-of-the-kendo-ui-grid Это сообщение является хорошим примером declaritive инициализации специфичны для сетей

С этим, как говорится, вот быстрый и грязный обходной путь, если вы серьезно женатый на простой старый формат HTML (это позволит вам набор скрыт с помощью атрибута данных, а не скрывая отдельные столбцы - которые могут или не могут быть важны для вас):

$(document).ready(function() { 
    var columns = $('#grid th'), 
    grid = $("#grid").kendoGrid({ 
    height: 550, 
    sortable: true 
    }).data("kendoGrid"); 
    for(var i =0; i < columns.length; i++){ 
    if($(columns[i]).data("hidden") === true){ 
     grid.hideColumn($(columns[i]).data("field")); 
    } 
    } 
}); 

http://jsbin.com/mapadu/edit?html,js,output

Answer 2

Вы можете ч ide после инициализации виджета. используя строку поля данных

<script> 
     $(document).ready(function() { 
      $("#grid").kendoGrid({ 
       height: 550, 
       sortable: true        
      }); 
      var grid = $("#grid").data("kendoGrid"); 
      grid.hideColumn("airconditioner"); 
     }); 
</script> 

Here это рабочее демо, но пользователь всегда может проверить исходный код страницы и просматривать данные, так как это только установить стиль <td> к display:none