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

Problem with Hierarchy Grid

2 Answers 190 Views

General Discussions

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

Surapazzo asked on 17 May 2017, 07:58 AM

Hi guys,

i'm Liuk and i like a lot Kendo's Grid.

But i've a problem with the Hierarchy system, because i can't find a method for open the subgrid only if there is a flag true.

I give an example:

This is th example take from the kendo text

<code>

<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /><script src="js/jquery.min.js"></script><script src="js/kendo.all.min.js"></script></head><body><div id="example"><div id="grid"></div><script> $(document).ready(function() {var element = $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"}, pageSize: 6, serverPaging: true, serverSorting: true}, height: 600, sortable: true, pageable: true, detailInit: detailInit, dataBound: function() {this.expandRow(this.tbody.find("tr.k-master-row").first());}, columns: [{ field: "FirstName", title: "First Name", width: "110px"},{ field: "LastName", title: "Last Name", width: "110px"},{ field: "Country", width: "110px"},{ field: "City", width: "110px"},{ field: "Title"}]});});function detailInit(e) { $("<div/>").appendTo(e.detailCell).kendoGrid({ dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"}, serverPaging: true, serverSorting: true, serverFiltering: true, pageSize: 10, filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }}, scrollable: false, sortable: true, pageable: true, columns: [{ field: "OrderID", width: "110px" },{ field: "ShipCountry", title:"Ship Country", width: "110px" },{ field: "ShipAddress", title:"Ship Address" },{ field: "ShipName", title: "Ship Name", width: "300px" }]});}</script></div></body></html>

</code>

for my example i wanna see the sub grid only if the city is "Tacoma", but i can't find a solution online.

Ty for the help guys and i'm sorry for the bad English,

BB Liuk

2 Answers, 1 is accepted

answered on 18 May 2017, 02:54 PM

Hi Liuk,

You can hide the expand button of the specific row to achieve your goal. Detail row is initialized when the parent row is expanded, so if you make it impossible to expand the row, the detail Grid will never be created. You can hide the button in the Grid dataBound event:

dataBound: function(e) {

var visibleDataItems = e.sender.dataSource.view();

for(var i=0; i<visibleDataItems.length; i++){

if(visibleDataItems[i].City == "Tacoma"){

$("tr[data-uid='"+visibleDataItems[i].uid+"']").find("a.k-i-expand").hide();

}

Above, I am using the data item uid value to locate the specific row inside the Grid table. Here is a Dojo demonstrating this approach:
http://dojo.telerik.com/@tsveti/uGEme/2

Let me know if you have additional questions about the suggested solution.

Regards,
Tsvetina
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.