Regarding Grid

Question

hi friends problem: page have a grid inside 3 detail grids are there. Need to hide 2nd detail grid based on condition kindly suggest me how to loop the grid detail rows var $gridrows = $(#grd).data(kendoGrid).dataSource.data();

Brahma Prakash Shukla · Answer

Hi @Murali To loop through the rows of a grid and apply a condition to hide the second detail grid you can use JavaScript or jQuery. Here's an example using jQuery based on the code snippet you provided: var $gridrows = $(#grd).data(kendoGrid).dataSource.data(); $gridrows.forEach(function(row index) { // Apply your condition to determine if the second detail grid should be hidden if (index === 1 && condition) { // Hide the second detail grid var $detailGrid = $(row).find(.detail-grid-class); $detailGrid.hide(); } }); In the code above $gridrows represents the rows of the grid obtained from the grid's data source. The forEach loop iterates over each row in the grid. You can modify the condition within the loop to meet your specific requirement for hiding the second detail grid. If the condition is met the hide() method is called on the element representing the second detail grid (identified using a specific class .detail-grid-class in this example). Make sure to replace .detail-grid-class with the appropriate class or selector that identifies the second detail grid element in your HTML structure.

Vishal Joshi · Answer

Hello Murali Please take a look at the below-given link shows a detailed example of a nested grid using kendo UI. https://docs.telerik.com/kendo-ui/knowledge-base/grid-add-nested-child-grids You can use the detailInit method of the Kendo UI grid to add conditions. $(#grid).kendoGrid({ columns: [ { field: name } ] dataSource: [ { name: Beverages products: [ { name: Tea } { name: Coffee } ] } { name: Food products: [ { name: Ham } { name: Bread } ] } ] detailTemplate: 'Products: ' detailInit: function(e) { e.detailRow.find(.grid).kendoGrid({ dataSource: e.data.products }); } }); Ref. Link: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/detailinit Thanks

Mohamed Azarudeen Z · Answer

To loop through the rows of a grid using the Kendo UI Grid you can use the data() method to retrieve the grid's data source and then iterate over the rows. Here's an example: var $grid = $(#grd).data(kendoGrid); // Get a reference to the grid var gridData = $grid.dataSource.data(); // Get the data source of the grid // Loop through the rows gridData.forEach(function(row) { // Access each row's data and perform your condition check if (/* your condition */) { // Hide the second detail grid for this row // Example: row.element.find(.second-detail-grid).hide(); } });