How to Hide a specific row in Kendo UI Grid

[Joseph]

Hi,

I would like to hide a specific row in a Kendo UI MVC Grid. Can anybody please help me in this.

---Satish

[Alexander Popov]

Hi Satish,

I would recommend using the Grid's dataBound event. Once the event is triggered you can get the item by its ID and find its corresponding row by its uid, then hide it. For example: 

function onDataBound(e){
  var item = this.dataSource.get(1); //Get by ID or any other preferred method
  this.tbody.find("tr[data-uid='"+item.uid+"']").hide();
}

Regards,
Alexander Popov
Telerik

 

 

[Joseph]

Hi,

Thanks for the response. But in my case based on Radio button Selection I need to Hide the Row. Please find the more details below.

Details:

My View is Having two radio Buttons.
1. Enter in Units.
2. Enter in $.

My Grid Contains the following details:

Row with the Type.
Row with the Quantity Details
Row with the Unit Price Details.

One Scenario:
If Type value is Sales then I need to hide the Quantity Row.
If Type values is other that Sales Then I need to Show the Quantity Row.

Second Scenario:

If user Selects Enter in Units then I need to Set the Editable mode of the Quantity Cell.
If user Selects Enter in $ then i need to Set the Editable mode of the Unit Price Cell.

These is my actual Requirement. So, Can you please guide me on this.

Regards,
Satish.N

[Alexander Popov]

Hello again Satish,

This could be achieved by iterating over the displayed items and checking their values. If the criteria is met - hide the row in question: 

function onDataBound(e){
    var items = this.dataSource.view();
    for (var i = 0; i < items.length; i++) {
        if(item.Type == "Sales"){
            var row  = ... //find the row that needs to be hidden
            row.hide();
        }
    }
}

The other scenario could be achieved by subscribing to the radio button's change event and call the Grid's editCell method once it is triggered.

Regards,
Alexander Popov
Telerik