We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to set Row Width in Ej2 Pivotgrid (EJ2)

Thread ID:

Created:

Updated:

Platform:

Replies:

144926 May 29,2019 07:56 AM UTC Aug 23,2019 11:18 AM UTC JavaScript - EJ 2 5
loading
Tags: PivotGrid
Bhavesh Patil
Asked On May 29, 2019 07:56 AM UTC

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 [Syncfusion]
Replied On May 29, 2019 02:39 PM UTC

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'); 
 
 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Manikandan. 


Bhavesh Patil
Replied On June 13, 2019 06:35 AM UTC

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 [Syncfusion]
Replied On June 14, 2019 10:45 AM UTC

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
Replied On August 22, 2019 07:58 AM UTC

 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 [Syncfusion]
Replied On August 23, 2019 11:18 AM UTC

  
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. 
    } 
  } 
 
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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon