Separate data source for cell dropdown edit not working

[Marcel Lorenz]

I have a many-to-many relationship between two DB-entities, I want to display in two DataGrids. So when I click on a record in the process-table I want to see all the machines linked to this process in the machine-table. The machine-table looks like this:

<ejs-grid
  #machineGrid id="machineGrid"
  [allowSelection]='false' [allowPaging]="true" [allowFiltering]="true" [allowSorting]="true"
  [pageSettings]="pageSettings" [filterSettings]="filterSettings" [editSettings]="editSettings"
  [toolbar]="['Add', 'Delete', 'Update', 'Cancel']">
  <e-columns>
    <e-column field='Name' headerText='Name' editType='dropdownedit' [edit]="machineDropDownEditParams"></e-column>
    <e-column field='Description' headerText="Beschreibung"></e-column>
  </e-columns>
</ejs-grid>

When adding a new value to the machine-table I want to select the machine name from all available machines and all the other columns should be autofilled based on the selected name (unique). But no matter which value a pass to the machineDropDownEditParams.params.dataSource (array of string) I can only select from values already present in the machine-table, which is the exact opposite of what I want.

So how can I achieve the mentioned behavior?

[Rajapandiyan Settu]

Hi Marcel,

Thanks for contacting Syncfusion support.

We can achieve your requirement by using cellEditTemplate feature of Grid. In which you can customize the edit component as per our need.

CellEditTemplate: https://ej2.syncfusion.com/angular/documentation/grid/editing/edit-types/#custom-editors-using-template

The cell edit template is used to add a custom component for a particular column by invoking the following functions:

• create - It is used to create the element at the time of initialization.
• write - It is used to create a custom components or assign default value at the time of editing.
• read - It is used to read the value from the component at the time of save.
• destroy - It is used to destroy the component.

 

[app.component.html]

 

    <e-column

      field="ShipCountry"

      headerText="Ship Country"

      width="150"

      [edit]="editparams"

    ></e-column>

 

[app.component.ts]

 

  public ngOnInit(): void {

    this.editparams = {

      create: () => {

        var elem = document.createElement('input');

        return elem;

      },

      read: () => {

        return this.dropdownObj.value; // return the value which will be saved to the Grid

      },

      destroy: () => {

        this.dropdownObj.destroy();

      },

      write: (args) => {

        // create a dropdown component to edit a column

        this.dropdownObj = new DropDownList({

          // bind the dataSource as you want

          dataSource: this.dropdownData,

          // bind the cell value to the dropdown

          value: args.rowData[args.column.field],

          change: this.dropdownChange.bind(this),  // bind the change event to the dropdown

        });

        this.dropdownObj.appendTo(args.element);

      },

    };

  }

 

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

Query #2: all the other columns should be autofilled based on the selected name (unique)

You can modify the other columns' values by using the change event of the Dropdown Component.

Change: https://ej2.syncfusion.com/documentation/api/drop-down-list/#change

 

  dropdownChange(args) {

    var inputID = this.grid.element.id + 'CustomerID'; // customerID – column field name

    var CustomerIDInput = this.grid.element.querySelector('.e-gridform #' + inputID); //get the input element

    CustomerIDInput.value = 'Modified Text';  // modify the value

  }

 

Please let us know if you have any concerns.

Regards,

Rajapandiyan S