How to remove an item from a droptownlist inside a grid?

Question

I want that every time I add a row to the grid by selecting an item from the droptownlist, the item is removed from the list.

For example, I have 4 items in the droptownlist. Add a row with 1 of the items, for the next row I would have only 3 items left and so on.

Rajapandiyan Settu · Accepted Answer

Hi Luis,Thanks for contacting Syncfusion support.Based on your requirement, you want to dynamically remove
the item from dropdown after adding it to the Grid. You can achieve this by
using cellEditTemplate feature of the Grid. In which you can bind
the customized data to that dropdown before editing the column.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 the custom component or assign a 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.
cellEditTemplate: https://ej2.syncfusion.com/javascript/documentation/grid/editing/edit-types/#custom-editors-using-templateIn the read method, you can dynamically remove the item from
dropdown dataSource when adding a record to Grid.

var dObj;
  var isAdding = false;
  var grid = new ej.grids.Grid({
    ---
    columns: [
      {
        field: 'ShipCountry',
        headerText: 'Ship Country',
        editType: 'dropdownedit',
        width: 150,
        edit: {
          create: function () {
            var elem = document.createElement('input');
            return elem;
          },
          read: function (args) {
            if (isAdding) {
              isAdding = false;
              // here you can remove the selected item from ddData
            }
            return dObj.value;
          },
          destroy: function () {
            dObj.destroy();
          },
          write: function (args) {
            dObj = new ej.dropdowns.DropDownList({
              // bind the DataSource
              dataSource: ddData,
              // bind the cell value
              value: args.rowData[args.column.field],
              // maps the appropriate column to fields property
              fields: { text: 'ShipCountry', value: 'ShipCountry' },
              //set the placeholder to DropDownList input
              placeholder: 'Select Country',
            });
            dObj.appendTo(args.element);
          },
        },
      },
    ],
    actionBegin: actionBegin,
  });
  grid.appendTo('#Grid');
   
  function actionBegin(args) {
    if (args.requestType == 'add') {
      isAdding = true;
    }
    if (args.requestType == 'beginEdit') {
      isAdding = false;
    }
  }

Sample: https://stackblitz.com/edit/ujykrq?file=index.js,index.htmlBut if you remove the item from dropdown dataSource, we
can’t see the cell value on dropdown when you edit that row. So, kindly share
the below details to validate further.
 Are you want to perform
     only add action in that column and don’t want to perform the edit action?
 Or, are you want to bind
     different dataSource on add action and edit action?
 Are you want to add only
     unique values to that column?
 Which type of
     data-binding you have used? Share the Adaptor details.
Please let us know if you have any concerns.Regards,Rajapandiyan S

Luis Guerrero · Answer

Thank you very much, I specify my requirements below:

I need that when adding a row, the added value is removed from the droptownlist.
If you delete the row, the deleted value reappears in the droptownlist.
Don't modify that column.

So, in short, I need the values that are added in the rows not to appear in the droptownlist.

Rajapandiyan Settu · Answer

Hi Luis,Thanks for your update.Based on your requirement, you want to dynamically remove
the item from dropdown dataSource after adding it to the Grid and want to push
the item to the dropdown dataSource when you delete a record in the Grid. You
can achieve this by using cellEditTemplate feature and actionComplete
event of the Grid.In the read method Grid, you can remove the
selected value from the dropdown dataSource.

[index.js]
   
  var eObj;
  var isAdding = false;
  var grid = new ej.grids.Grid({
    editSettings: {
      allowEditing: true,
      allowAdding: true,
      allowDeleting: true,
    },
    allowPaging: true,
    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
    columns: [
      ----
      {
        field: 'ShipCountry',
        headerText: 'Ship Country',
        editType: 'dropdownedit',
        allowEditing: false,
        width: 150,
        edit: {
          create: function () {
            var elem = document.createElement('input');
            return elem;
          },
          read: function (args) {
            if (isAdding && eObj.itemData) {
              isAdding = false;
              // remove the selected item from ddData
              ddData.splice(ddData.indexOf(eObj.itemData), 1); 
  // do your operation
            }
            return eObj.value;
          },
          destroy: function () {
            eObj.destroy();
          },
          write: function (args) {
            if (isAdding) {
             
  // Render Dropdown component on adding a column
              eObj = new ej.dropdowns.DropDownList({
                // bind the DataSource
                dataSource: ddData,
                enabled: isAdding,
                // bind the cell value
                value: args.rowData[args.column.field],
                //set the placeholder to DropDownList input
                placeholder: 'Select Country',
              });
              eObj.appendTo(args.element);
            } else {       
   
              // Render TextBox component with disabled state on
  editing a column
              eObj = new ej.inputs.TextBox({
                // bind the cell value
                value: args.rowData[args.column.field],
                enabled: false,
              });
              // Render initialized TextBox
              eObj.appendTo(args.element);
            }
          },
        },
      },
    ],
    actionBegin: actionBegin,
    actionComplete: actionComplete,
  });
  grid.appendTo('#Grid');
   
  function actionBegin(args) {
    if (args.requestType == 'add') {
      isAdding = true;
    }
    if (args.requestType == 'beginEdit') {
      isAdding = false;
    }
  }

In the actionComplete (requestType as delete)
event, you can include the deleted items to the dropdown’s dataSource.

function actionComplete(args) {
    if (args.requestType == 'delete' && args.data) {
      args.data.map((item) => {
        if (item.ShipCountry) {
          ddData.push(item.ShipCountry); 
  // push he deleted item to the dropdown data
        }
      });
    }
  }

Sample: https://stackblitz.com/edit/ujykrq-qutmpd?file=index.jsPlease let us know if you have any concerns.Regards,Rajapandiyan S

Luis Guerrero · Answer

Thanks very much, however, in my droptownlist datasource, I have a Json type object, so in the option to edit the field, I need to see the name and not the id. I tried in the following example but I was not successful.

https://stackblitz.com/edit/ujykrq-abxecq?file=index.js,index.html

Rajapandiyan Settu · Answer

Hi Luis,Thanks for your update.In your
code example, you are defining foreignKeyValue and ForeignKeyField
in the tco_id column. Is your requirement to perform grid actions
like Filtering, Sorting, CRUD, etc., on one field and display another field in
Grid? Are you want to use the ForeignKeyColumn feature for this?
Demo: https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/grid/foreign-key.html

DOC: https://ej2.syncfusion.com/javascript/documentation/grid/columns/foreign-key-column/Please
confirm your requirement to proceed further.Regards,Rajapandiyan S

Luis Guerrero · Answer

Hello,

I only need to display this field, but it is a field with a key and value, so I need to display the value and display it on edit as well.

In short, the value does not appear to me on the screen, only the Key.

Rajapandiyan Settu · Answer

Hi Luis,Thanks for your update.Based on your requirement, you want to perform grid actions
on one field and display another field in Grid. If so, you can achieve this by
using to use foreignKey column feature.To bind a foreign key column in the grid, we have to set foreignKeyValue,
ForeignKeyField, and dataSource to that column. Refer to the below
documentation for more information.ForeignKey-column: https://ej2.syncfusion.com/javascript/documentation/grid/columns/foreign-key-column/Demo: https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/grid/foreign-key.htmlNote: The data mapping is performed based on
the column field name and foreignKeyField. So, the
foreignKeyField should contain the column field values in its dataSource. Then
the corresponding foeignKeyValue will be shown in the Gird.We have modified some codes in the provided sample to
achieve your requirement.

[index.js]
  
  // dataSource used for edit dropdown
  var ddData = [
    { tco_id: 1, tco_nombre: 'UNO' },
    { tco_id: 2, tco_nombre: 'DOS' },
    { tco_id: 3, tco_nombre: 'TRES' },
  ];
  
  // foreignKey column’s dataSource
  var foreignKeyData = [
    { tco_id: 1, tco_nombre: 'UNO' },
    { tco_id: 2, tco_nombre: 'DOS' },
    { tco_id: 3, tco_nombre: 'TRES' },
  ];
  var eObj;
  var isAdding = false;
  var grid = new ej.grids.Grid({
    editSettings: {
      allowEditing: true,
      allowAdding: true,
      allowDeleting: true,
    },
    allowPaging: true,
    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
    columns: [
      {
        field: 'tco_id',
        headerText: 'Ship Country',
        editType: 'dropdownedit',
        allowEditing: false,
        foreignKeyField: 'tco_id',
        foreignKeyValue: 'tco_nombre',
        dataSource: foreignKeyData, 
  // we must bind the dataSource for foreignKey
  column
        width: 150,
        edit: {
          create: function () {
            var elem = document.createElement('input');
            return elem;
          },
          read: function (args) {
            if (isAdding && eObj.itemData) {
              isAdding = false;
              // remove the selected item from ddData
              ddData.splice(ddData.indexOf(eObj.itemData), 1);
            }
            return eObj.value;
          },
          destroy: function () {
            eObj.destroy();
          },
          write: function (args) {
            eObj = new ej.dropdowns.DropDownList({
              // dynamically bind the DataSource based
  on add or edit action
              dataSource: isAdding ? ddData : foreignKeyData,
  
             //
  enable or disable the input when add or edit a column
              enabled: isAdding,
  
              fields: { text: 'tco_nombre', value: 'tco_id' },
              // bind the cell value
              value: args.rowData.tco_id,
              //set the placeholder to DropDownList input
              placeholder: 'Select Country',
            });
            eObj.appendTo(args.element);
          },
        },
      },
    ],
    actionBegin: actionBegin,
    actionComplete: actionComplete,
  });
  grid.appendTo('#Grid');
   
  function actionBegin(args) {
    if (args.requestType == 'add') {
      isAdding = true;
    }
    if (args.requestType == 'beginEdit') {
      isAdding = false;
    }
  }
   
  function actionComplete(args) {
    if (args.requestType == 'delete' && args.data) {
      // add the deleted item value
  to the ddData
      args.data.map((item) => {
        if (item.tco_id) {
          foreignKeyData.map((x) => {
            if (x.tco_id == item.tco_id) {
              ddData.push(x);
            }
          });
        }
      });
    }
  }

Sample: https://stackblitz.com/edit/ujykrq-wckn3a?file=index.jsPlease get back to us if you need further assistance.Regards,Rajapandiyan S