Kendo UI Grid: Hide column when initialize from HTML table? - kendo-ui

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>
Initializing from HTML table, how can I specify a column to be hidden? I need to access the data for that column in JS, but don't want to have that data visible to the end user.
http://demos.telerik.com/kendo-ui/grid/from-table
I've tried to use the attribute: data-hidden="true" on the th tag (data-field is also on th tag, as it is in the demo), but it's not working.
Note, I'd like to be able to specify the hidden option as an html attribute, if possible.

Answer 1

unfortunately you can't use the attribute hidden when initializing from an HTML table:
http://docs.telerik.com/kendo-ui/web/grid/introduction#create-a-grid-from-an-existing-html-table
Relevant quote:
When creating the Grid from an existing table, the following column
settings can be defined via HTML attributes:
data field names via data-field attributes
column widths via width styles applied to the respective elements
define data type via data-type attributes
define a column template via data-template attributes
enable or disable the column menu via data-menu attributes
enable or disable sorting via data-sortable attributes
enable or disable filtering via data-filterable attributes
enable or disable grouping via data-groupable attributes
All attributes should be applied to the <th> elements, except the column width styles.
All other column-related settings cannot be defined via HTML attributes in the <table>. If such settings must be used (e.g. commands, locking, editors, etc.) then the above attribute configuration should be abandoned and all settings should be included in the Grid's Javascript initialization statement (when using declarative widget initialization, the column properties should be set via the data-columns attribute).
For more info on that:
http://www.telerik.com/blogs/mvvm_declarative_initialization_and_html5_data_attributes
This is a good overview of declarative initiation in kendo.
http://www.telerik.com/forums/declarative-initialization-of-the-kendo-ui-grid
This post is a good example of declaritive initialization specific to grids
With that being said, Here's a quick and dirty workaround if you are seriously married to the plain old HTML format (this would allow you to set hidden via a data attribute, rather than hiding individual columns--which may or may not be important to you):
$(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

You can hide column after the initialization of the widget. using the data field string
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
height: 550,
sortable: true
});
var grid = $("#grid").data("kendoGrid");
grid.hideColumn("airconditioner");
});
</script>
Here is a working demo, but user can always check the source of the page and view the data because this only set the style of the <td> to display:none