[Solved] Can't hide grid column

[Project House]

Hi,
I bound a data table to grid which columns are dynamically created. I want to hide "Id" column in grid. Sample code is below;

<%: Html.Telerik().Grid(Model.ResultList)

.Name("GridBounceList")

.CellAction(cells =>

{

if(cells.Column.Title=="Id")

cells.Column.Hidden = true;

})

.DataBinding(db => db.Ajax().Select("_BindBounceList", "Report"))

.Pageable(paging => paging.PageSize(20).Style(GridPagerStyles.PageInput | GridPagerStyles.Numeric).Position(GridPagerPosition.Bottom))

.Sortable(sorting => sorting.SortMode(GridSortMode.MultipleColumn))

.Filterable()
%>

Any help would be greatly appreciated.

Thank you.

[Atanas Korchev]

Hello Onur Buyukcaglar,

 Could you try this :

if(cells.Column.Title=="Id")
{

cells.Column.Hidden = true;
cells.HtmlAttributes["style"] = "display:none";
}

If you don't want to render the column at all use the Visible property and set it to false:

if(cells.Column.Title=="Id")
{

cells.Column.Visible = false;
}




You can access the whole data item on the client side so perhaps you don't need the hidden column. To get the data item for a particular row use the dataItem function. Here is a quick JavaScript code snippet:

var grid = $('#Grid').data('tGrid');
var tr = $('#Grid tr:has(td)').eq(1); // the second row
var dataItem  = grid.dataItem(tr);

Regards,
Atanas Korchev
the Telerik team

[Project House]

if(cells.Column.Title=="Id")
{
cells.Column.Hidden = true;
cells.HtmlAttributes["style"] = "display:none";
}

After we use the code block above, the resulting screen shot can be found below;

Before use;
firstLook.jpg

After use;
afterLook.jpeg

Thanks

[Atanas Korchev]

Hello Onur Buyukcaglar,

 After investigating this further I discovered that it is too late to hide a column during CellAction. It occurs after the header has been rendered thus it cannot be hidden.

 Unfortunately there is no workaround for this case apart from hiding the column with JavaScript:

        .ClientEvents(e => e.OnLoad("onLoad"))
%>
    <script type="text/javascript">
    function onLoad() {
        $('#Grid colgroup').find('col:eq(0)').hide();
        $('#Grid tr:has(th)').find('th:eq(0)').hide();
        $('#Grid tr:has(td)').find('td:eq(0)').hide();
    }
    </script>

This code will hide the first column of the grid whose name is "Grid".

Regards,
Atanas Korchev
the Telerik team