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
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
Rank 1
Thanks very much, it works.
Regards,
Liuk