How to set Row Width in Ej2 Pivotgrid (EJ2)

[Bhavesh Patil]

I want to set row width in ej2 pivotgrid. Is there any property to set the width..you given only rowHeight property to set height but i want to set width to row..

[Manikandan Murugesan]

Hi Bhavesh, 

 

You can set row width by using columnRender event. Please refer following code snippet. 

 

Code Snippet: 

var pivotGridObj = new ej.pivotview.PivotView({ 

    gridSettings: { columnWidth: 140, 

      columnRender: function(args) { 

        args.columns[0].width = 100; 

      } 

     } 

}); 

pivotGridObj.appendTo('#PivotView'); 

 

 

Sample: https://stackblitz.com/edit/qixhhh?file=index.js 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Manikandan. 

[Bhavesh Patil]

And What if I am not using Columns. I am using only Value fields  & That time I want to set the Row Width.

[Jagadeesan Pichaimuthu]

Hi Bhavesh, 

  

Thanks for your reply. 

  

You can change the width of each column if the total width of the columns exceeds the width of the pivot table. If not exceeded, the columns will automatically be stretched based on the width of the pivot table. This is the pivot table default behavior. 

  

Please let us know if any concerns. 

  

Regards, 

Jagadeesan 

[Bhavesh Patil]

 var pivotGridObj = new ej.pivotview.PivotView({

                            dataSource: {

                                data: data,

                                expandAll: false,

                                allowLabelFilter: true,

                                allowValueFilter: true,

                                enableSorting: true,

                                values: [{ name: 'DrAmount', caption: 'DR' }, { name: 'CrAmount', caption: 'CR' }, { name: 'Balance', caption: 'Balance', type: 'RunningTotals' }],

                                rows: [{ name: 'SubType', caption: 'SubType' }, { name: 'ExchangeCode', caption: 'ExchangeCode' }, { name: 'd_ACCPostingDate', showSubTotals:                                        true, caption: 'Date' }, { name: 'n_JournalNo', caption: 'JNO.' }, { name: 'AccountName', caption: 'Particulars' }],

                                calculatedFieldSettings: [{ name: 'Balance', formula: '"Sum(CrAmount)"-"Sum(DrAmount)"' }],

                               height: 800,

                              enableVirtualization: true,

                            gridSettings: {

                                rowHeight: 20,

                                allowResizing: false,

                                columnRender: function (args) {

                                    for (var i = 0; i < args.columns.length; i++) {

                                        if (args.columns[i].headerText != undefined && args.columns[i].headerText.indexOf("DR") > 0)

                                            args.columns[i].width = 120; // You can customize the width of specific column here.

                                    }

                                }

                            }

                        });

Here I am not using Columns field so i want to set a width to value fields.   

args.columns[i].width = 120;  

this is not working for me how should i achieve these in values field..

Thanks in Advance...

[Scintilla Arul Jothi Raj]

  

Hi Bhavesh, 

We have analyzed your query and please find the following code snippet to set width for the first column. 

Code snippet: [JavaScript] 

 

columnRender: function (args) { 

    for (var i = 0; i < args.columns.length; i++) { 

        if (args.columns[i].headerText != undefined && args.columns[i].headerText == "") 

        args.columns[i].width = 120; // You can customize the width of specific column here. 

    } 

  } 

 

Sample link: https://stackblitz.com/edit/vcxjhk?file=index.html 

Screenshot: 

 

 

Note: As we updated earlier, when element width exceeds the total column width the columns in pivot table stretched to maximum width. This is the default behavior of pivot table control. Also, we would like to inform you that, while using “virtualization” along with column customization (customizing the column width), we can get the chances for alignment problems in some cases. Because, we have considered common column width to improve the performance. So, we ensure that we will include the limitation of virtualization in our User Guide documentation ASAP. 

Please let us know if you have any concerns. 

Regards, 

Scintilla A