CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-grid
Aviator
Aviator

Reputation: 613

Conditionally expand row in kendo grid

In my Kendo grid, I am trying to check if one of my column fields is true or false. If it is true, row should be expanded, if it is false, row should stay collapsed. My code definition for column is:

{
  field: "Comment",
  title: txt.TXT_COMMENT,
  template: '<input type="checkbox" #= Comment ? "checked" : "" # disabled="false" ></input>',
},

My code condition in dataBound for checking if there is data:

dataBound: function (e) {
  var data = this.dataItem;
  if (data.Comment == 1) {
    this.expandRow(this.tbody.find("tr.k-master-row"));
  }
  f_OnDataBound(e);
}

Thanks for your help!

Upvotes: 2

Views: 8212

Answers (1)

chiapa
chiapa

Reputation: 4412

You are on the right direction by using the databound event. What you need to do after it is, iterating through all the rows and check for a specific model property and expand, or not, that specific row.

var grid = $("#grid").data("kendoGrid");       
var data = grid.dataSource.data();
var len = data.length;

for(var i = 0; i < len; i++) {
    var row = data[i];
    if(row.Comment == '1') { // checks for the value of the Comment property
        grid.expandRow("tr[data-uid='" + row.uid + "']"); // expands the row with the specific uid
    }
}

I tested this and works perfectly. I can't know what's on the Comment propery though, that's up to you to control and adapt the javascript function if needed.

EDIT

I have created a fiddle that demonstrates the above strategy. In the example the dataBound function looks for the property "name" and expands the row if it is "Sally"

Upvotes: 4

Related Questions