Customize Add / Edit Dialog in Pivot Table

Question

Hello, I've seen several posts about how to customize the add / edit dialog in Grids, but have not seen how to customize within a pivot table. I would like to be able to hide certain fields, change a text field to be multi-line, but not sure how to do that in the Pivot Table.

Thanks!
Chuck

AngelinFaithSheeba PaulvannanRajadurai · Accepted Answer

Hi Charles,Please find the response below:

Query

Comments

Is it possible to adjust the
  layout of the add/edit dialog? For example the order of fields?

Yes, you
  can change the order of fields dynamically by enabling the allowReordering
  property. As a result, you can drag the header and drop it where we need to
  place. Please see the code example below:
   
  Code Example:

beginDrillThrough(args): void {
        args.gridObj.allowReordering = true;
    }

You can also swap the order of fields in code-behind by
  using beginDrillThrough event. Please see the code example below:
   
  Code Example:

// Swap the fields by
    rearranging the columns as like as below.
    beginDrillThrough(args): void {
        var array = args.gridObj.columns;
        var element = array[5];
        array[5] = array[6];
        array[6] = element;
      }

Meanwhile, we have prepared a sample for your
  reference.
  Sample:  https://stackblitz.com/edit/angular-2ezus4-8e5pbv?file=app.component.ts
   
  Also, please refer the
  following documentation for more details about “allowReordering”.
  Document: Row
  and Column in Angular Pivot Table component - Syncfusion

When you open the add / edit
  dialog in a pivot table, you get a multi-line edit and then if you have the
  "Dialog" setting, you get another pop up when you click to edit. Is
  it possible to not show the multi-line edit before the dialog and just show the
  dialog when you click to edit a cell in the pivot table?

You can
  perform editing through drillthrough dialog which is the default behavior in
  our pivot table. Inline editing, on the other hand, is only available for
  unique data sources and allows you to edit the value cell directly without
  using an edit (drillthrough) dialog. 
   
  Also, please refer the
  following documentation for more details about “inline editing”.
  Document: Editing
  in Angular Pivot Table component - Syncfusion

Please let us know if you
have any concerns.Regards, Angelin Faith Sheeba.

AngelinFaithSheeba PaulvannanRajadurai · Answer

Hi Charles,Please find the
response below:

Query

Comments

I've seen several posts about how to customize the add /
  edit dialog in Grids, but have not seen how to customize within a pivot
  table. I would like to be able to hide certain fields.

You
  can perform CRUD operations such as adding, editing, and deleting data in
  each pivot table cell by enabling the allowEditing setting in the editSettings.
  You can also restrict the fields that appear in the grid table UI by using
  the column options in the drillThrough dialoge at run time. However, you can
  hide the field from code-behind using beginDrillThrough event. Please
  refer to the screenshot and source code below.
   
  Screenshot:

Dialog editing
  Dialogue:

Code Example:

this.editSettings = {
          allowEditing: true,
          allowAdding: true,
          allowDeleting: true,
          mode: 'Dialog', // Here, we have enabled dialog
    mode editing.
    } as CellEditSettings;
     
    beginDrillThrough(args): void {
        for (var i = 0; i < args.gridObj.columns.length; i++) {
          if (args.gridObj.columns[i].field == 'Year') {
            args.gridObj.columns[i].visible = false; // Here, we have hide the “years” field.
          }
        }
      }

Change a text field to be multi-line, but not sure how to
  do that in the Pivot Table.

To display the long text content in multiple lines, please
  set the allowTextWrap property to true
  in the beginDrillThrough event. Please refer
  to the following code example.
   
  Code Example:

beginDrillThrough: function (args) {
        for (var i = 0; i < args.gridObj.columns.length; i++) {
          args.gridObj.allowTextWrap = true;
        }
      },

Meanwhile. We
have prepared a sample for your reference.Sample: https://stackblitz.com/edit/angular-2ezus4-wbwxdj?file=app.component.tsPlease check the following document for more information about “Cell
Editing”.Document: Editing
in Angular Pivot Table component - SyncfusionPlease let us
know if you have any concerns.Regards,Angelin Faith
Sheeba.

Charles Dunn · Answer

Thank you very much! That helps with two of the issues I was researching. Two additional questions if you could answer:

Is it possible to adjust the layout of the add/edit dialog? For example the order of fields?
When you open the add / edit dialog in a pivot table, you get a multi-line edit and then if you have the "Dialog" setting, you get another pop up when you click to edit. Is it possible to not show the multi-line edit before the dialog and just show the dialog when you click to edit a cell in the pivot table?

Thank you for your help, it is much appreciated!

Chuck

Charles Dunn · Answer

Thank you for your help!

AngelinFaithSheeba PaulvannanRajadurai · Answer

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