stackoom
  简体   繁体   中英

Repeating secondary headers for grouped data in kendo grid

 原文  2018-07-26 13:30:39  3   1    javascript/ kendo-grid

Question

How can I create a kendo grid of following design. Basically, I need to bind grouped data in a kendo grid. For example, same issue can be there with multiple devices, so issue details should be bound once for all the devices with same issue & Make model headers should repeat for each issue

在此处输入图片说明

How can I make Make, Model headers to repeat for each issue group

I could create following:

在此处输入图片说明

with below code: 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Reorder Column</title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.mobile.all.min.css"> <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/jszip.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script></head> <body> <div id="example"> <div id="grid"></div> <script> $(document).ready(function() { $("#grid").kendoGrid({ columns: [ { field: "Issue", title:"Issue"}, { field: "Description", title:"Description"}, { field:"Components", columns:[ { field: "Make", title: "Make"}, { field: "Model", title: "Model"}, ]} ], dataSource: [ { Issue: "1", Description: "Test", Make: "K1", Model: "L1"}, { Issue: "1", Description: "Test", Make: "K2", Model: "L2"}, { Issue: "1", Description: "Test", Make: "K3", Model: "L3"}, { Issue: "2", Description: "Check", Make: "K4", Model: "L4"}, { Issue: "2", Description: "Check", Make: "K4", Model: "L4"}] , reorderable: true }); // Merging cells should start from Right to Left. Otherwise, column index will change & hence will create issue mergeGridRows("grid", "Description"); mergeGridRows("grid", "Issue"); }); function mergeGridRows(gridId, colTitle) { // looping through grid data $('#' + gridId + '>.k-grid-content>table').each(function (index, item) { var colIndex = 1; // looping through grid header $('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () { // Get the column for which rows need to be merged if ($(this).text() == colTitle) { // first instance of the identical cell(td) value to be merged var firstCell = null; $(item).find('tr').each(function () { // get the td to be merged var currentCell = $(this).find('td:nth-child(' + colIndex + ')'); if (firstCell == null) { firstCell = currentCell; } else if (currentCell.text() == firstCell.text()) { // if value in current td & prevous td is same, remove the current td & increase rowspan of the 1st td currentCell.remove(); var firstCellRowSpan = firstCell.attr('rowspan'); // increment rowspan of the first td firstCell.attr('rowspan', typeof firstCellRowSpan == "undefined" ? 2 : parseInt(firstCellRowSpan) + 1); } else { // this cell is different from the last firstCell = currentCell; } }); return; } // increment the col index, to scan for the next td, nth column may need merging colIndex++; }); }); } </script> </div> </body> </html>

1 answers

solution1
 0  2018-07-30 10:26:39

I wrote a JS function to inject a new row after each group of data. It's not very generic, but solved my purpose. Below is the code snippet 

  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Reorder Column</title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.mobile.all.min.css"> <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/jszip.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script></head> <body> <div id="example"> <div id="grid"></div> <script> $(document).ready(function() { $("#grid").kendoGrid({ columns: [ { field: "Issue", title:"Issue"}, { field: "Description", title:"Description"}, { field:"Components", columns:[ { field: "Make", title: "Make"}, { field: "Model", title: "Model"}, ]} ], dataSource: [ { Issue: "1", Description: "Test", Make: "K1", Model: "L1"}, { Issue: "1", Description: "Test", Make: "K2", Model: "L2"}, { Issue: "1", Description: "Test", Make: "K3", Model: "L3"}, { Issue: "2", Description: "Check", Make: "K4", Model: "L4"}, { Issue: "2", Description: "Check", Make: "K4", Model: "L4"}] , reorderable: true }); addGroupHeader("grid", "Description"); // Merging cells should start from Right to Left. Otherwise, column index will change & hence will create issue mergeGridRows("grid", "Description"); mergeGridRows("grid", "Issue"); }); function mergeGridRows(gridId, colTitle) { // looping through grid data $('#' + gridId + '>.k-grid-content>table').each(function (index, item) { var colIndex = 1; // looping through grid header $('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () { // Get the column for which rows need to be merged if ($(this).text() == colTitle) { // first instance of the identical cell(td) value to be merged var firstCell = null; $(item).find('tr').each(function () { // get the td to be merged var currentCell = $(this).find('td:nth-child(' + colIndex + ')'); if (firstCell == null) { firstCell = currentCell; } else if (currentCell.text() == firstCell.text()) { // if value in current td & prevous td is same, remove the current td & increase rowspan of the 1st td currentCell.remove(); var firstCellRowSpan = firstCell.attr('rowspan'); // increment rowspan of the first td firstCell.attr('rowspan', typeof firstCellRowSpan == "undefined" ? 2 : parseInt(firstCellRowSpan) + 1); } else { // this cell is different from the last firstCell = currentCell; } }); return; } // increment the col index, to scan for the next td, nth column may need merging colIndex++; }); }); } // title of column, after which secondary header should be placed function addGroupHeader(gridId, colTitle){ // When value in 2 adjacent cells for the column varies, add a tr with secondary header // looping through grid data $('#' + gridId + '>.k-grid-content>table').each(function (index, item) { var colIndex = 1; // looping through grid header $('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () { // Get the column for which rows need to be merged if ($(this).text() == colTitle) { // first instance of the identical cell(td) value to be merged var firstCell = null; $(item).find('tr').each(function () { // get the td to be merged var currentCell = $(this).find('td:nth-child(' + colIndex + ')'); if (firstCell == null) { firstCell = currentCell; } else if (currentCell.text() !== firstCell.text()) { // if value in current td & prevous td are different, add a tr before parent of first cell $('<tr><td></td><td></td><td class = "secondaryheader">Make</td><td class = "secondaryheader">Model</td></tr>').insertAfter(firstCell.parent()); } firstCell = currentCell; }); return; } // increment the col index, to scan for the next td, nth column may need grouping colIndex++; }); }); } </script> <style> .secondaryheader{ font-weight: bold; border: 1px solid black !important; } </style> </div> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Kendo Grid - How to make grid displayed grouped data by one column by default (init)? Kendo UI grid - grouped Header Columns How do I get the index and data of a selected row in a grouped Kendo grid Angular Kendo data grid resizing columns causes the headers to misalign on new remote datasource search how to create a custom dropdown filter in kendo ui grid with grouped values Kendo grid hierarchy data not displaying Kendo grid not showing with remote data Reload Kendo Grid, not just the data in it Kendo grid columns with dynamic data How to filter the Kendo Grid data
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM