How to hide or show the columns in Kendo grid conditionally

1
votes

We usually write this if we have to hide a column in kendo grid.

 { field: "Name", hidden: true },

but I want to use condition in the hidden. The true or false would come from database in another field i.e HideShow. Is there any option if I can set this.

 { field: "Name", hidden: HideShow},

HideShow = true/false will be set while getting records from database.

I have tried hide and showing by jquery also but it is distorting the grid layout while showing. Hide is working fine.

2
jquerykendo-uikendo-grid

2 Answers

2
votes

Define a DataBound event for your grid and there decide to hide the columns. Below is a sample:

<script>
var grid = $("#myGrid").data("kendoGrid");
grid.bind("dataBound", grid_dataBound);
<script>
function grid_dataBound() {
   if (MustBeHide)
      this.hideColumn("Name");
}
</script>

This will hide "Name" column.

You can also hide the column by column index, Like this:

function grid_dataBound() {
   if (MustBeHide)
      this.hideColumn(1);
}
0
votes

You can perform it on Edit: onGridEditing. Following is function:

 function onGridEditing(arg) {
        if (true) {
            $('label[for=Name]').hide();
            $('div[data-for=DesignationID]').hide();
        }
        else {
            $('label[for=Name]').show();
            $('div[data-for=DesignationID]').hide();
        }
 }

Hope this will help you.