Dropdown template using distinct strings found in rows

[Jeff Voigt]

Is it possible to have a cell template utilize a dropdown that, when opened, shows a listing of unique strings found within the column?  For example, if a grid was showing 3 rows and one of the columns was bound to a string called 'Ingredient'.  And out of those 3 rows, 2 of the rows have an Ingredient value of 'egg' and the other is set to 'flour'.  When the dropdown opens, I would like to show 2 values 'egg' and 'flour'.  But the dropdown would also allow the user to type in something different.

It would have to be dynamic in that it would look at all items in the column before popping up so that when users add another row with another value, the next time the dropdown opens, it would include that new value.

Thanks,

- Jeff

[Vinitha Balasubramanian]

Hi Jeff,

Greetings from Syncfusion support.

Query1 : Dropdown template using distinct strings found in rows

Yes,  by default when perform edit action using dropdown it will shows only distinct values from the respective columns. We have attached the sample for your reference.

Sample :  https://stackblitz.com/edit/react-v94tiu-fnxajk?file=index.js,data.js

Query2 : If users add another row with another value, the next time the dropdown opens, it would include that new value.

By default, dropdown values show the existing values from the dataSource on performing edit action in the Grid component. Before proceeding your query, kindly share the below details with us which is more helpful to proceed your query further.

• Please share your exact requirement with detailed description.
• Please share the video demo of your reported problem.
• Please share the complete grid code file and package.json file.

Regards,

Vinitha Balasubramanian   

[Jeff Voigt]

So, the demonstration does, in fact, show a dropdown of the distinct values found within the rows.  However, the user is not able to type in something different if what they see is not in the list.  I would need the ability to allow the user to freely type as an additional option.

[Joseph Christ Nithin Issack]

Jeff,

  Based on your requirement, you want to have a dropdown with a list of options and you also want to type some other options which is not in the list. Your requirement can be achieved by rendering a combo box instead of the dropdown list. Refer the below documentation for more details on combobox.

Documentation:


https://ej2.syncfusion.com/react/documentation/combo-box/getting-started/

[Jeff Voigt]

That's great, but you just referenced an example of a standalone combobox component instead of how it would be used within a grid for my specific use case.

[Vinitha Balasubramanian]

Currently we are validating the reported scenario “Dropdown template using distinct strings found in rows” at our end. So we will update further details shortly. Until then we appreciate your patience.

[Vinitha Balasubramanian]

As per your requirement we have prepared a sample with combo Box to add a custom value to the dataSource. You can add the custom value using “filtering” event of comboBox. The “onFiltering” function is called when the customer searches for an item in the ComboBox or enters a custom value. It filters the comboBoxData based on the search string and updates the ComboBox with the filtered data. If the customer enters a value that is not in the list, a button is displayed in the ComboBox popup that allows the customer to add the custom value to the list. When the button is clicked, the custom value is added to the comboBoxData and selected in the ComboBox. Here is an example of how to implement this:

[index.js]

 

<ComboBoxComponent

        dataSource={this.comboBoxData}

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

        id="customvalue"

        ref={(ComboBox) => {

          this.listObj = ComboBox;

        }}

        filtering={this.onFiltering.bind(this)}           

        allowFiltering={true}

        noRecordsTemplate={this.template}

        placeholder="Select a country"

      />

// set the template content when the typed character(s) is not present in the list

template =

    '<div id="nodata"> No matched item, do you want to add it as new item in list?</div> <button id="btn" class="e-control e-btn">Add New Item</button>';

 

onFiltering = (e) => {

    let query = new Query();

    // frame the query based on search string with filter type.

    query =

      e.text !== '' ? query.where('Name', 'startswith', e.text, true) : query;

    // pass the filter data source, filter query to updateData method.

    e.updateData(this.comboBoxData, query);

    let proxy = this;

    if (document.getElementById('nodata')) {

      // bind click event to button which is shown in popup element when the typed character(s) is not present in the list

      document.getElementById('btn').onclick = function () {

        // get the typed characters

        let customValue = document.getElementById('customvalue').value;

        // make new object based on typed characters

        let newItem = { id: customValue, name: customValue };

        // new object added to data source.

        proxy.listObj.dataSource.push(newItem);

        // close the popup element.

        proxy.listObj.hidePopup();

        // pass new object to addItem method.

        proxy.listObj.addItem(newItem);

        // select the newly added item.

        proxy.listObj.inputElement.value = customValue;

      };

    }

  };

Sample : https://stackblitz.com/edit/react-v94tiu-lahkk7?file=index.js,data.js

API : https://ej2.syncfusion.com/react/documentation/api/combo-box/#filtering