ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: luckduck on April 12, 2020, 11:04:40 am

Title: How to maintain link and merge cells in group column when grouping?
Post by: luckduck on April 12, 2020, 11:04:40 am

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/ (https://jsfiddle.net/bv5h8qwr/)

Title: Re: How to maintain link and merge cells in group column when grouping?
Post by: paramvir on April 13, 2020, 10:02:04 am

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

Title: Re: How to maintain link and merge cells in group column when grouping?
Post by: luckduck on April 13, 2020, 02:55:37 pm

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/ (https://jsfiddle.net/bvkw3oa2/)

Please tell me how to use renderLabel in detail.

Title: Re: How to maintain link and merge cells in group column when grouping?
Post by: paramvir on April 13, 2020, 04:05:19 pm

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/

Title: Re: How to maintain link and merge cells in group column when grouping?
Post by: luckduck on April 14, 2020, 11:12:24 am

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/ (https://jsfiddle.net/uktcm8w5/)

Title: Re: How to maintain link and merge cells in group column when grouping?
Post by: paramvir on April 14, 2020, 11:38:13 am

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/

Title: Re: How to maintain link and merge cells in group column when grouping?
Post by: luckduck on April 14, 2020, 01:06:47 pm

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/ (https://jsfiddle.net/j2cLq6xn/)

Title: Re: How to maintain link and merge cells in group column when grouping?
Post by: paramvir on April 14, 2020, 11:13:00 pm

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.