This is a migrated thread and some comments may be shown as answers.

How to Hide a specific row in Kendo UI Grid

3 Answers 1869 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joseph
Top achievements
Rank 2
Joseph asked on 09 May 2014, 02:17 PM
Hi,

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

---Satish

3 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 10 May 2014, 03:10 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Joseph
Top achievements
Rank 2
answered on 16 May 2014, 04:40 AM
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
0
Alexander Popov
Telerik team
answered on 19 May 2014, 02:49 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Joseph
Top achievements
Rank 2
Answers by
Alexander Popov
Telerik team
Joseph
Top achievements
Rank 2
Share this question
or