Need to add varying datasource for dropdown in grid column for each row

[Harshita Ojha]

I have added a column with dropdown list multiselect in grid . I need to add different datasource for each dropdown in each column.

how can we achieve it .

[Harshita Ojha]

The grid code is :

<ejs-grid #clientGrid id="clientGrid" [dataSource]='clientData' enableStickyHeader='true'

                        allowTextWrap='true' [enableHover]="false" allowPaging='true' [pageSettings]='pageSettings'

                        [toolbar]="toolbar" [allowExcelExport]='true' allowResizing='true'

                        (actionBegin)="actionBegin($event)" locale='en-US' (dataStateChange)="dataStateChange($event)"

                        actionBegin="actionBegin($event)">

                        <e-columns>

                            <e-column field='clientName' headerText='Client'

                                width='80'></e-column>

                            <e-column field='status' headerText='Status' width='50'>

                                <ng-template #template let-data>

                                    <label class="switch">

                                        <input type="checkbox" checked>

                                        <span class="slider round"></span>

                                    </label>

                                </ng-template>

                            </e-column>

                         

                            <e-column field="boForClients" headerText="Beneficial owner" width="100">

                                <ng-template let-data #template>

                                    <ejs-multiselect id='boForClients' placeholder='Benificial owner' name="boForClients"

                                        [dataSource]='boForClients' [fields]='fields' (close)="onClose($event)"

                                          [selectAllText]='selectAllText'

                                        showDropDownIcon='true' showSelectAll=true floatLabelType="always">

                                    </ejs-multiselect>

                                </ng-template>

                            </e-column>

                        </e-columns>

                    </ejs-grid>

[Vinitha Balasubramanian]

Hi Harshita Ojha,

Greetings from Syncfusion support.

Before providing a solution to your query, we need some information to know your requirement clearly which will help us proceed further at our end. Kindly share the below details.

1. Kindly ensure that the different dataSource you want to render in the dropdown want to update the values to the Grid column.

2. Please ensure that does have any relationship for dropdown dataSource and Grid dataSource  

3. Also ensure that you want to render different dataSource only for the display purpose.

4. Share the type of the data binding you are using for the dropdown you want to bound.

5. Share the package version you are using.

6. Share the details if you have any customization on close event of dropdown.

7. Do you want to bound the different dataSource in multiselect dropdown for every column

Regards,

Vinitha Balasubramanian

[Harshita Ojha]

hi Vinitha,

Thanks for your reply. I am able to bind the datasource in the grid columns. But now the issue i am facing is the data selected in the dropdown template is not able to get in the ngmodel. Could you please help how can we retrieve the selected data in the grid.

the grid code is:

<ejs-grid #clientGrid id="clientGrid" [dataSource]='clientData' enableStickyHeader='true'

                        allowTextWrap='true' [enableHover]="false" allowPaging='true' [pageSettings]='pageSettings'

                        [toolbar]="toolbar"  allowResizing='true'

                       locale='en-US'   >

                        <e-columns>

                            <e-column field='clientName' headerText='Client'

                                width='80'></e-column>

                            <e-column field='isActive' headerText='Status' width='50'>

                                <ng-template #template let-clientData>

                                    <label class="switch">

                                        <input type="checkbox" [checked]="clientData.isActive" [(ngModel)]="clientData.isActive">

                                        <span class="slider round"></span>

                                    </label>

                                </ng-template>

                            </e-column>

                         

                            <e-column field="selectedBO" headerText="Beneficial owner" width="100">

                                <ng-template let-clientData #template >

                                    <ejs-multiselect id='boForClients' placeholder='Benificial owner' name="boForClients"

                                        [dataSource]='clientData.boForClients' [fields]='fields' (close)="onClose($event)"

                                          [selectAllText]='selectAllText' [(ngModel)]="clientData.selectedBO" [(value)]="clientData.selectedBO"

                                        showDropDownIcon='true' showSelectAll=true floatLabelType="always">

                                    </ejs-multiselect>

                                 

                                </ng-template>

                            </e-column>

                        </e-columns>

                    </ejs-grid>

the json used is: Sample

clientData=[ {clientId=1, clientName='abc',boForClients={item_id:'1',item_text:'ssss'},selectedBO=null,isActive=null}]

package.json

   "@syncfusion/ej2-angular-base": "^20.3.56",

    "@syncfusion/ej2-angular-buttons": "20.3.56",

    "@syncfusion/ej2-angular-calendars": "^20.3.56",

    "@syncfusion/ej2-angular-charts": "^20.3.56",

    "@syncfusion/ej2-angular-dropdowns": "^20.3.56",

    "@syncfusion/ej2-angular-grids": "^20.3.56",

    "@syncfusion/ej2-angular-inputs": "^20.3.56",

    "@syncfusion/ej2-angular-navigations": "^20.3.56",

    "@syncfusion/ej2-angular-pivotview": "^20.3.56",

    "@syncfusion/ej2-angular-popups": "^20.3.56",

    "@syncfusion/ej2-angular-progressbar": "^20.3.56",

    "@syncfusion/ej2-angular-splitbuttons": "^20.3.56",

    "@syncfusion/ej2-angular-treegrid": "^20.3.56",

    "@syncfusion/ej2-base": "^20.3.56",

    "@syncfusion/ej2-data": "^20.3.56",

    "@syncfusion/ej2-grids": "^20.3.56",

    "@syncfusion/ej2-svg-base": "^20.3.56",

[Vinitha Balasubramanian]

Currently, we are validating your reported problem with your shared information, and we will update you the details shortly. Until then we appreciate your patience.

[Vinitha Balasubramanian]

From your query, we suggest you use blur event of Multiselect Dropdown component. In this event, we get the change value when focus-out from Multiselect Dropdown and it will update to Grid dataSource using setRowData method of Grid.

Now you can get the updated Grid row details using Grid’s dataSource property while click on submit button.

Note: You should define the column.isPrimaryKey property in unique Grid’s column.

Please refer the below code example and sample for your reference.

[app.component.html]

 

 <button (click)="saveAction($event)">Submit</button>

  <ejs-grid

    #grid

    [dataSource]="data"

    allowPaging="true"

    [pageSettings]="pageSettings"

    [allowSorting]="true"

  >

    <e-columns>

      <e-column

        field="Feature"

        [isPrimaryKey]="true"

        headerText="Feature"

        width="120"

        textAlign="Right"

      ></e-column>

      <e-column headerText="Pod Assignment" width="150">

        <ng-template #template let-data>

          <div>

            <ejs-multiselect

              #multiselectCheckbox

              name="multiselectCheckbox"

              id="multiselectCheckbox"

              [dataSource]="aPods"

              [placeholder]="checkWaterMark"

              [fields]="podFields"

              [mode]="mode"

              [popupHeight]="popHeight"

              [showDropDownIcon]="true"

              showSelectAll="true"

              [(ngModel)]="data.podAssign"

              [value]="data.podAssign"

              (blur)="multiSelectFocusout($event)"

            >

            </ejs-multiselect></div

        ></ng-template>

      </e-column>

    </e-columns>

  </ejs-grid>

 

[app.component.ts]

 

 saveAction(args) {

    console.log(this.grid.dataSource);

  }

  multiSelectFocusout(args) {

    if ((event as Event).target.classList.contains('e-dropdownbase')) {

      var multiSelectDropdown = event.target.closest('.e-multiselect')

        .parentElement.ej2_instances[0];

      var rowObj = this.grid.getRowInfo(event.target);

      rowObj.rowData['podAssign'] = multiSelectDropdown.value;

      this.grid.setRowData(

        this.grid.getPrimaryKeyFieldNames()[0],

        rowObj.rowData

      );

    }

  }

Sample link: https://stackblitz.com/edit/angular-cdv3bb-f5ihng?file=app.component.ts,app.component.html

Help Documentation:     https://ej2.syncfusion.com/angular/documentation/api/multi-select#blur

                                                https://ej2.syncfusion.com/angular/documentation/api/grid/#setrowdata