Open details in row click - kendo grid
10,077
You can use the API of the Grid to expand it programatically.
//you can expand it programatically using the expandRow like this
element.on('click','tr',function(){
$(element).data().kendoGrid.expandRow($(this));
})
Here is updated version.
Or you can use make the Grid selectable and use the select event instead of hooking a click event like shown above.
Author by
Bes-m M-bes
Updated on June 14, 2022Comments
-
Bes-m M-bes about 2 years
I am using Kendo UI web in an ASP.NET MVC4 project.
I am trying to create a master/details grids and a detailsTemplate for each. I have some question regarding this situation:
What's the difference between hierarchy and details?
Is it possible to populate the details grid in a separate div on a master row click instead of that little triangle?
This code was my starting point : http://jsfiddle.net/WKSkC/2/var element = $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "http://demos.kendoui.com/service/Northwind.svc/Employees" }, pageSize: 6, serverPaging: true, serverSorting: true }, height: 430, 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: "http://demos.kendoui.com/service/Northwind.svc/Orders" }, serverPaging: true, serverSorting: true, serverFiltering: true, pageSize: 5, filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID } }, scrollable: false, sortable: false, selectable: true, pageable: true, columns: [ { field: "OrderID", width: "70px" }, { field: "ShipCountry", title: "Ship Country", width: "110px" }, { field: "ShipAddress", title: "Ship Address" }, { field: "ShipName", title: "Ship Name", width: "200px" } ] }).data("kendoGrid"); }
Thank you for your help.
-
Bes-m M-bes over 10 yearsActually,I'm trying to get the details grid in a separate div instead of inside the master grid. Is this possible?