Edit Grid - how can I avoid a page reload if I add a new value for a dropdown field in edit mode?

[soon]

Good morning, I'll explain the problem if the title isn't clear.

When I enter edit mode in a grid, I would like to be able to update the datasource of a dropdown field (in this specific case, add another data, therefore a fast entry operation), without exiting edit mode and without having to refresh the grid itself. Is it possible?

I await your responses.

[Sivaranjani Rajasekaran]

Hi soon,

Greetings from Syncfusion support!

Based on your inquiry, we understand that you want to update the data source of a dropdown column while the Grid is in edit mode, without refreshing the Grid and while maintaining the edit state.

To achieve your requirement, you can render the DropDown component using the editTemplate. In the open event of the dropdown, you can dynamically add the item using the addItem method of the DropDown.

Please refer to the code below for more information:

Code Example : 

[app.component.html]

 <e-column field="CustomerID" headerText="Customer ID" width="180">

        <ng-template #editTemplate let-data>

          <ejs-dropdownlist

            #dropDown

            [dataSource]="updatedDataSource"

            [(value)]="orderData.CustomerID"

            (open)="open($event)"

          ></ejs-dropdownlist>

        </ng-template>

      </e-column>

[app.component.ts]

open(args) {

    if (this.dropDown && !this.isOpen) {

      this.isOpen = true;

      const newItem = 'Added New Item';

      this.dropDown.addItem(newItem);

    }

  }

  actionBegin(args) {

    if (args.requestType === 'beginEdit' || args.requestType === 'add') {

      this.orderData = Object.assign({}, args.rowData);

      this.isOpen = false;

    }

    if (args.requestType === 'save') {

      (args.data as any)['CustomerID'] = this.orderData['CustomerID'];

    }

  }

Sample Link : Jnjqsujk (forked) - StackBlitz

Documentation Link : 

1. Render Dropdown : https://ej2.syncfusion.com/angular/documentation/grid/editing/edit-types#render-dropdownlist-component-in-edit-form
2. Add Item : https://ej2.syncfusion.com/angular/documentation/api/drop-down-list/#additem

Alternate solution : 

In Syncfusion’s Grid component, you have an option to provide a custom data source for the DropDownList component in the edit form. This feature allows you to define a specific set of values for the DropDownList.

To achieve this, you can utilize the columns->edit->params property. This property allows you to define the edit params for the column within the grid.

When setting a new data source using the edit params, you need to specify a new query property for the DropDownList. The query property allows you to define custom queries for data retrieval and filtering.

In the below demo, DropDownList is rendered with custom data source for the ShipCountry column :

<e-column 
field='ShipCountry' 
headerText='Ship Country' 
editType= 'dropdownedit' 
[validationRules]='shipCountryRules' 
 [edit]='countryParams' 
width=150></e-column>

this.countryParams = 
{ params: 
    { dataSource: new DataManager(this.country), 
      fields: { text: 'countryName', value: 'countryName' }, 
      query: new Query(), 
      actionComplete: () => false } };

Sample Link : https://stackblitz.com/edit/angular-yxufah3p?file=src%2Fmain.ts

Documentation Link : https://ej2.syncfusion.com/angular/documentation/grid/editing/edit-types#provide-custom-data-source-for-dropdownlist-component

Please get back to us if you have any questions.

Regards,

Sivaranjani R.

[soon]

I think my question needs clarification.

I would like that while in edit mode of the grid, I can add a custom value to the dropdown datasource via API, without exiting edit mode and without refreshing the grid itself.

In the first example, the added value is done statically, and furthermore, the value is added while opening the dropdown. In my case, the value should be added by pressing an add button in a custom dropdown template, which provides a modal that add the value via API.

Could you please help me with this task?

[soon]

I think my question needs clarification.

I would like that while in edit mode of the grid, I can add a custom value to the dropdown datasource via API, without exiting edit mode and without refreshing the grid itself.

In the first example, the added value is done statically, and furthermore, the value is added while opening the dropdown. In my case, the value should be added by pressing an add button in a custom dropdown template, which provides a modal that add the value via API.

Could you please help me with this task?

[Sivaranjani Rajasekaran]

Hi Soon,

Thank you for your inquiry!

We understand that you want to add a custom value to the dropdown data source via API while the Grid remains in edit mode. To better assist you, we need some additional details:

1. You mentioned that the value should be added by clicking an "Add" button in a custom dropdown template. Is this button placed inside the Grid column, or are you rendering an external dropdown? Please share the relevant dropdown template & model code along with the complete Grid rendering code so we can understand how the dropdown is integrated, including the column configuration and the editing type you are using
2. Could you provide a more detailed explanation of your exact requirement? Please share a video demo showing how you want the action to be performed.
3. How is data bound to the Grid—locally or remotely? If using a remote data source, please share the adaptor details.
4. Could you please share the version details of the Syncfusion Grid and related components you are using?
5. Please share a minimal reproducible sample or try replicating the issue in the sample we provided.
1. Sample Link : https://stackblitz.com/edit/angular-yxufah3p?file=src%2Fmain.ts
2. Documentation Link : https://ej2.syncfusion.com/angular/documentation/grid/editing/edit-types#provide-custom-data-source-for-dropdownlist-component

Once we have this information, we will provide a precise solution.

Looking forward to your response.