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

Problem with Hierarchy Grid

2 Answers 88 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Surapazzo
Top achievements
Rank 1
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

Sort by
0
Tsvetina
Telerik team
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.
0
Surapazzo
Top achievements
Rank 1
answered on 25 May 2017, 01:22 PM

Thanks very much, it works.

Regards,

Liuk

Tags
General Discussions
Asked by
Surapazzo
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Surapazzo
Top achievements
Rank 1
Share this question
or