Cells with same values can be merged across rows or columns?

Question

I am planning to use Kendo UI Grid in AngularJS. I have a scenario with cells with same values can be merged across rows.

I want to implement row span in Kendo UI gird like attached picture?

Can anyone please help me on this.

Thank you so much in advance..

there is no direct method yet, can you checkout these links [link1](https://www.codeproject.com/Questions/708865/How-to-merge-cells-in-Kendo-ui-Grid), [link2](https://stackoverflow.com/questions/25682573/how-to-merge-cells-in-kendo-ui-grid) — Naren Murali, Aug 19 '17 at 06:55
I had the same problem with angular datatables, atleast kendo ui grid has a hot fix kind of thing, you need to add the javascript rowspan colspan code provided in the above links to a directive and try to make it work, if you are very determined to make it work. — Naren Murali, Aug 19 '17 at 14:36
Can you please guide me where I need to add this javascript code? — Biswaranjan Pradhan, Aug 19 '17 at 15:08
could you please tell me if you are working with angular 1? cause I have based my answer on angular 1 — Naren Murali, Aug 19 '17 at 21:58

score 0 · Answer 1 · answered Aug 19 '17 at 21:58

I took the code from the merging tables in javascript, kendo UI rowspan and converted it into a working angular directive, I hope this will fix your issue.

JSFiddle: here

Code:

myApp.directive('spanSupport', function() {
    return {
        restrict: 'A',
        link: function(scope,element,attrs) {
            var listOfColumns = scope.$eval(attrs.spanSupport) || [];
            console.log(listOfColumns);
                listOfColumns.forEach(function(column){
            angular.element('#' + attrs.id + '>.k-grid-content>table').each(function (index, item) {

                var dimension_col = 1;
                // First, scan first row of headers for the "Dimensions" column.
                angular.element('#' + attrs.id + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
                  if (angular.element(this).text() == column) {

                    // first_instance holds the first instance of identical td
                    var first_instance = null;

                    angular.element(item).find('tr').each(function () {

                      // find the td of the correct column (determined by the column)
                      var dimension_td = angular.element(this).find('td:nth-child(' + dimension_col + ')');
                      if (first_instance == null) {
                        first_instance = dimension_td;
                      } else if (dimension_td.text() == first_instance.text()) {
                        // if current td is identical to the previous
                        // then remove the current td
                        dimension_td.remove();
                        if(angular.element(this).find('td:nth-child(' + dimension_col + ')')[0] !== undefined){
                            var next_td = angular.element(this).find('td:nth-child(' + dimension_col + ')');
                            next_td.css("border-left-width", "1px");                          
                        } 
                        // increment the rowspan attribute of the first instance
                        first_instance.attr('rowspan', typeof first_instance.attr('rowspan') == "undefined" ? 2 : parseInt(first_instance.attr('rowspan')) + 1);
                      } else {
                        // this cell is different from the last
                        first_instance = dimension_td;
                      }
                    });
                    return;
                  }
                  dimension_col++;
                });
              });
            });
        }
    };
});

Thanks! Naren for the code..will this work in the grid with editable column and filters? — Biswaranjan Pradhan, Aug 20 '17 at 05:42
@BiswaranjanPradhan I have no idea, try it and adjust the code, I have provided the starting point for you — Naren Murali, Aug 20 '17 at 05:45

Cells with same values can be merged across rows or columns?

1 Answers1