How to maintain link and merge cells in group column when grouping?

[luckduck]

Hi,

If there is a link in the column set with titleIndx, it is not shown in a hierarchical structure after grouping.
Can grouped rows be plain text and ungrouped rows can be implemented as a hierarchical structure with links?

And

When ungrouping, cell merging is normal, but even after grouping, merging is performed at the same location as when ungrouping.
Is it possible to change cell merge dynamically during group / ungroup?

https://jsfiddle.net/bv5h8qwr/

[paramvir]

For clarity, please create separate posts for different questions with more details.

The links can be displayed in normal columns with column.render callback while can be displayed in row grouping columns with column.renderLabel callback.

https://paramquery.com/pro/api#option-column-renderLabel

[luckduck]

Even if you use renderLabel, it is not displayed in a hierarchical structure.

Code: [Select]

            { title: "Shipping Via", width: 130, dataIndx: "ShipVia",
                render: function(ui) {
                    if( !ui.rowData.pq_gtitle ){
                    return "<a href='url'>" + ui.rowData.ShipVia + "</a>";
                     } else {
                      return ui.rowData.ShipVia;
                     }
                },
                renderLabel: function(ui) {
                    return ui.rowData.ShipVia;
                }
            },

https://jsfiddle.net/bvkw3oa2/

Please tell me how to use renderLabel in detail.

[paramvir]

column.render is used for complete rendering of cell while column.renderLabel is used for partial rendering of cell.

For complete definition of renderLabel, please consult the API https://paramquery.com/pro/api#option-column-renderLabel

Data is not displayed in hierarchical structure in your jsfiddle because your implementation of column.render ( which needs correction ) overwrites the row grouping cell renderer.

If you need to display grouped row titles as plain text, while normal rows as links:

1. you need to correct your column.render callback

2. you don't need to implement column.renderLabel.

Code: [Select]

            { title: "Shipping Via", width: 130, dataIndx: "ShipVia",
                render: function(ui) {
                    if( !ui.rowData.pq_gtitle && ui.cellData){ //normal rows.
                    return "<a href='url'>" + ui.cellData + "</a>";
                    }
                }
            },


https://jsfiddle.net/s9vb528m/

[luckduck]

Thank you.

I checked the grouping with the code below. Is this correct?
Also, is it possible to set the text indent style value automatically when toggle grouping?

Code: [Select]

            { title: "Shipping Via", width: 130, dataIndx: "ShipVia",
                render: function(ui) {
                    var isOn = this.Group().primary.options.groupModel.on;
                    if( !ui.rowData.pq_gtitle ){
                        if( isOn  ){
                        return {
                            text : "<a href='url'>" + ui.rowData.ShipVia + "</a>",
                            style: {"text-indent": "60px"}
                            };
                        } else {
                        return "<a href='url'>" + ui.rowData.ShipVia + "</a>";
                        }
                    }
                }
            },

https://jsfiddle.net/uktcm8w5/

[paramvir]

Excellent, I see that you have already set the text indent value with toggle grouping.

Small correction:

Please correct isOn value to

Code: [Select]

  var isOn = this.option('groupModel.on');


Final render

Code: [Select]

      render: function(ui) {
        var isOn = this.option('groupModel.on');

        if (!ui.rowData.pq_gtitle) {
          return {
            text: "<a href='url'>" + ui.rowData.ShipVia + "</a>",
            style: {
              "text-indent": (isOn ? "60px" : 0)
            }
          };
        }
      }

https://jsfiddle.net/a7b8xctf/

[luckduck]

Thank you very much.

I am wondering if it can be set dynamically according to the group level without fixing the text-indent to 60px (for example).

And I wonder if there is a way to merge cells after grouping?

https://jsfiddle.net/j2cLq6xn/

[paramvir]

Yes text-indent can be made dynamic.

Code: [Select]

      render: function(ui) {
        var GM = this.option('groupModel'),
          isOn = GM.on,
          level = GM.dataIndx.length;

        if (!ui.rowData.pq_gtitle) {
          return {
            text: "<a href='url'>" + ui.rowData.ShipVia + "</a>",
            style: {
              "text-indent": (isOn ? (level * 20) + "px" : 0)
            }
          };
        }
      }


Manual cell merge during grouping is an interesting case though it may not work correctly because grouping also sets merge cells and that may lead to a conflict. It would be great if you can post your merge cell with grouping rows requirement in the suggestion board.