cool_spirit cool_spirit - 6 months ago 45
Javascript Question

Hide column in kendo ui using jquery or js

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") #'


$('#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!


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">
                    <col />
    <div class="k-grid-content">
        <table class="k-focusable" cellspacing="0">
                <col />
                <tr data-uid="5f65ad8c-601d-4700-a176-23be2d33fc76">
    <div class="k-pager-wrap k-grid-pager k-widget" data-role="pager">

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