how to auto-adjust row header width?

Question

Hi,In my pivot table, there are row header texts that exceed the 200px width. How do I make the row header width auto-fit the row header text?I tried to use the "drill" and "actionComplete" events and modify the style attribute of the row header, but it's not working for me.Below is my code:public actionCompleted(e: PivotActionCompleteEventArgs) {        console.log('actionCompleted', e);        if (e.actionName === 'Table view shown') {            this.pvData.refresh();        } else if (e.actionName === 'Drill down') {            let rowHeader = this.pvData.element.querySelector('.e-frozencontent.e-frozen-left-content>.e-table');            let rowHeaderColGroup = rowHeader.querySelector('colgroup>col');            rowHeaderColGroup.removeAttribute('style');            rowHeader.removeAttribute('style');            rowHeader.setAttribute('style','width: auto');            let width = rowHeader.clientWidth;            let cornerHeader = this.pvData.element.querySelector('.e-frozenheader.e-frozen-left-header>.e-table');            let cornerHeaderColGroup = cornerHeader.querySelector('colgroup>col');            cornerHeaderColGroup.removeAttribute('style');            cornerHeader.removeAttribute('style');            rowHeader.removeAttribute('style');            cornerHeader.setAttribute('style','width: ' + width + 'px');            rowHeader.setAttribute('style','width: ' + width + 'px');            console.log('rowHeader', rowHeader);            console.log('cornerHeader', cornerHeader);        }    }Please help!Jose

AngelinFaithSheeba PaulvannanRajadurai · Accepted Answer

Hi Jose,Please enable textWrap
property and the textWrapSettings is set to ‘Header’ to resolve
the reported issue at your end. Please refer the below code example.Code
Example:Index.html

this.gridSettings = {
        allowTextWrap: true,
        textWrapSettings: { wrapMode: 'Header' },
        columnRender: this.observable.subscribe((args) => {
          for (var i = 0; i < (args as any).columns.length; i++) {
            (args as any).stackedColumns[0].maxWidth = 400;
            (args as any).columns[i].autoFit = true;
          }
        }) as any,
      } as GridSettings;

Meanwhile, we have modified your sample for your
convenience below.Sample: ​ https://stackblitz.com/edit/angular-w4rxau-rggp2e?file=app.component.tsRegards,Angelin Faith
Sheeba.

AngelinFaithSheeba PaulvannanRajadurai · Answer

Hi Jose,Using the
"columnRender" event, you can auto fit each column in the
pivot table. Please see the code below for an example.Code
Example:

this.gridSettings = {
        columnRender: this.observable.subscribe((args) => {
          for (var i = 0; i < (args as any).columns.length; i++) {
            (args as any).columns[i].autoFit = true;
          }
        }) as any,
      } as GridSettings;

Meanwhile, we have prepared a
sample for your reference. Please find it from below link.Sample: Ldrwph
(forked) - StackBlitzPlease see the document link below
for more information on the "Auto Fit" option.Document: Row
and Column in Angular Pivot Table component - SyncfusionPlease let
us know if you have any concerns.Regards,Angelin
Faith Sheeba.

Jose · Answer

Thanks a lot for the solution. That worked perfectly and this is so much simpler than what I was doing.

I have a follow up enquiry though. Having auto-fit working, I noticed that some row header texts are so long that it takes up more than half of the screen. I want to limit it to at most, for example, 400px and just add a tooltip to show the entire text. Is it possible to do it from columnRender as well?

I was able to do it thru dataBound event, but I'm hoping that there is a simpler way to do it.

Below is my code to set the width to auto-fit with a maximum width of 400px.

        let frozenColumn = this.pvData.element.querySelector('.e-frozencontent.e-frozen-left-content>.e-table') as HTMLElement;
        let rows = frozenColumn.querySelectorAll('.e-rowcell.e-rowsheader');
        if(rows){
            rows.forEach((row) => {
                let cell = row.querySelector('.e-cellvalue');
                row.setAttribute('title', unescape(cell.innerHTML));
            });
        }

        // get actual width
        let widthStyle = frozenColumn.style.width;
        frozenColumn.style.width = 'auto';
        let width = frozenColumn.clientWidth;

        if(width < 400) {
            frozenColumn.style.width = widthStyle;
            return;
        }

        // set max width
        width = 400;

        let frozenColumnCols = frozenColumn.querySelector('colgroup>col') as HTMLTableColElement;
        let frozenHeader = this.pvData.element.querySelector('.e-frozenheader.e-frozen-left-header>.e-table') as HTMLElement;
        let frozenHeaderCols = frozenHeader.querySelector('colgroup>col') as HTMLElement;
        let frozenScrollbar = this.pvData.element.querySelector('.e-frozenscrollbar.e-frozen-left-scrollbar') as HTMLElement;

        // set actual width
        frozenHeader.style.width = width + 'px';
        frozenHeaderCols.style.width = width + 'px';
        frozenColumn.style.width = width + 'px';
        frozenColumnCols.style.width = width + 'px';
        frozenScrollbar.style.width = (width + 2) + 'px';


        let movableHeader = this.pvData.element.querySelector('.e-movableheader>.e-table') as HTMLElement;
        let movableCols = movableHeader.querySelectorAll<HTMLTableColElement>('colgroup>col');

        if(movableCols.length > 0){
            let colWidth = movableCols[0].style.width;
            movableCols.forEach((col) => {
                if(col.style.width !== colWidth){
                    col.style.width = colWidth;
                }
            });
        }

        let movableContent = this.pvData.element.querySelector('.e-movablecontent>.e-table') as HTMLElement;
        movableCols = movableContent.querySelectorAll<HTMLTableColElement>('colgroup>col');

        if(movableCols.length > 0){
            let colWidth = movableCols[0].style.width;
            movableCols.forEach((col) => {
                if(col.style.width !== colWidth){
                    col.style.width = colWidth;
                }
            });
        }

AngelinFaithSheeba PaulvannanRajadurai · Answer

Hi Jose,You can set the maxWidth for specific column
using stackedColumns option and set the autoFit property
to true for the specific column in the columnRender event.
This helps to show the desired columns based on its content upto the
maximum width that we specified. Also using the "dataBound"
event, you can create tooltips for row and column headers. Please refer the
code example.Code Example:

this.gridSettings = {
        columnRender: this.observable.subscribe((args) => {
          for (var i = 0; i < (args as any).columns.length; i++) {
            (args as any).stackedColumns[0].maxWidth = 400;
            (args as any).columns[i].autoFit = true;
          }
        }) as any,
      } as GridSettings;
   
  ondataBound(args) {
      if (this.tooltip === undefined) {
        this.tooltip = new Tooltip({
          target: 'td.e-rowsheader, th.e-columnsheader',
          position: 'BottomLeft',
          beforeRender: this.beforeRenders.bind(this),
        });
        this.tooltip.appendTo(this.pivotObj.element);
      }
    }
   
    beforeRenders(args) {
      this.tooltip.content = args.target.querySelector('.e-cellvalue')
        ? args.target.querySelector('.e-cellvalue').innerText
        : args.target.querySelector('.e-headertext')
        ? args.target.querySelector('.e-headertext').innerText
        : args.target.querySelector('.e-stackedheadercelldiv')
        ? args.target.querySelector('.e-stackedheadercelldiv').innerText
        : '';
    }

Meanwhile, we have prepared a
sample for your reference. Please find it from below link.Sample: https://stackblitz.com/edit/angular-w4rxau-epzpo7?file=app.component.tsPlease see the document link below
for more information on the "Auto Fit" option.Document: Row
and Column in Angular Pivot Table component - SyncfusionPlease let
us know if you have any concerns.Regards,Angelin
Faith Sheeba.

Jose · Answer

Hi Angelin,Thank you for helping me out with this.Setting the maxWidth worked, however, the autoFit is not.The row header text is being truncated even if the width is less than 400px.I can see that it is attempting to autoFit, but the width calculation is off.

How can we fix the autoFit width for row headers? Regards,Jose

Jose · Answer

Hi Angelin,Thank you for your help.That solution worked perfectly.Regards,Jose

AngelinFaithSheeba PaulvannanRajadurai · Answer

Hi Jose,Please contact us if
you have any other queries. We are always happy to assist you.Regards,Angelin Faith Sheeba.