Adding Dynamic DropDownList to Div on PivotView Field Drag

[Shreekumar]

I'm using PivotView as shown below:

<div fxLayout='column'>

  <div fxLayout='row' #dynamicFilter id='dynamicFilter' style="background-color: bisque; padding: 2px;height: auto;  min-height: 35px;">

  </div>

  <ejs-pivotview #pivotview id='PivotView' height='500' showGroupingBar='true' allowCalculatedField='true'

    allowDrillThrough='true' (drillThrough)="editCell($event)" (created)='created()' [showFieldList]='false'

    [showTooltip]='false' [dataSourceSettings]='dataSourceSettings' (dataBound)='dataBound($event)'

    [gridSettings]='gridSettings' allowConditionalFormatting='true' (onFieldDropped)='fieldDropped($event)'>

  </ejs-pivotview>

</div>

I want to add dynamic DropDownList controls to DIV element on Field Drag event (onFieldDropped) of the PivotView control.

1] DropDownList controls should add to DIV only when Fields are dropped on COLUMN AREA of the PivotView.

2] Also, added DropDownList should be removed from the DIV when fields are moved back from Column Area to Filter Area.

How to do this?

fieldDropped(args: FieldDroppedEventArgs): void { 

let dynamicFilter = document.getElementById("dynamicFilter");

    let dropdown = new DropDownList({

      dataSource: [],

      fields: { value: 'id', text: 'text' },

      placeholder: '--Select--',

      width: '200px',

      floatLabelType: 'Never'

    });

}

[Sivamathi Natarajan]

Hi Shreekumar, 

 

Thanks for contacting Syncfusion support. 

 

Based on your requirement we have prepared a sample for your reference. It can achieved by using fieldDrop event. Please check the below sample link. 

 

Sample: https://stackblitz.com/edit/angular-gowvkb-yeegui?file=app.component.ts 

 

We hope the above sample meets your requirements. 

 

Regards, 

Sivamathi. 

[Shreekumar]

Hi Team

This is working as expected. The only issue is, if I add more filters to Column Area, dropdownlist controls will be added one above another.

Might be appending action is the issue.

[Sivamathi Natarajan]

Hi ShreeKumar, 

 

We suspect that your requirement is to add the fields in the drop-down list while dropping fields in column axis (or) your requirement is to create a new drop down list for every fields which is added in column axis. So, we have modified the sample as per your requirement. 

 

Sample: https://stackblitz.com/edit/angular-gowvkb-56lr9b?file=app.component.ts 

 

We hope the above sample meets your requirements.  

 

Regards, 

Sivamathi. 

[Shreekumar]

The requirement is to create a new drop down list for every field which is added in column axis. 

And remove dropdown when the field is removed from the column axis.

[Sivamathi Natarajan]

Hi ShreeKumar, 

 

We have modified the sample based on your requirement. Kindly get the same in the following link. 

 

Sample: https://stackblitz.com/edit/angular-gowvkb-ehspfq?file=app.component.ts 

 

Please let us know if you have concern. 

 

Regards, 

Sivamathi.