Hide column in kendo ui using jquery or js

Question

Been a while research, try to hide one specify column in kendo grid table

using this

 $('#grid .k-grid-content table tr td:nth-child(8),th:nth-child(8)').toggle();

with no help, anyone has ideas?

The column I want to hide bind to

              { 
                field: "CreatedDate",
                width: 20,
                title: "Create Date",
                type: 'date',

                template: '#= kendo.toString(CreatedDate,"MM/dd/yyyy") #'
            }

[edited]

$('#grid div.k-grid-header-wrap th:nth-child(4)').toggle()
$('#grid div.k-grid-content td:nth-child(4)').toggle()

can only hide the header..but not the whole column, still need help!

Answer 1

Assuming #grid is already bound as the kendo grid, you can use the hideColumn function:

var grid = $("#grid").data("kendoGrid");
grid.hideColumn("CreatedDate");

This will hide both the header and data column. There is also a showColumn function when you need to show the column as well.

Answer 2

Try this:

$('#grid div.k-grid-header-wrap th:nth-child(4)').toggle();
$('#grid div.k-grid-content td:nth-child(4)').toggle();

or (combined into a single selector):

$('#grid div.k-grid-header-wrap th:nth-child(4), #grid div.k-grid-content td:nth-child(4)').toggle();

Kendo UI Grid apparently breaks up the table into a structure like this:

<div id="grid">
    <div class="k-grouping-header"></div>
    <div class="k-grid-header">
        <div class="k-grid-header-wrap">
            <table cellspacing="0">
                <colgroup>
                    <col />
                </colgroup>
                <thead>
                    <tr>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <div class="k-grid-content">
        <table class="k-focusable" cellspacing="0">
            <colgroup>
                <col />
            </colgroup>
            <tbody>
                <tr data-uid="5f65ad8c-601d-4700-a176-23be2d33fc76">
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="k-pager-wrap k-grid-pager k-widget" data-role="pager">
    </div>
</div>

As the table header and table body are in different div elements, you need two selectors to get them both.