Allow User to enter value or select from dropdown list

[Danyelle]

When a user edits a record I have a dropdown list for notes. I want the user to also be able to enter their own value.

Code:

 var notesList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = @Model.Notes, Query = "new ej.data.Query()", AllowFiltering = true, Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "NoteID", Text = "Description" } };

    <ejs-grid id="Grid" [email protected] dataBound="dataBound" height="510px" allowPaging="true" allowSorting="true" allowFiltering="true" allowGrouping="true" allowReordering="true" allowResizing="false" allowMultiSorting="true" allowPdfExport="true" allowExcelExport="true" showColumnChooser="true" toolbarClick="toolbarClick" printComplete='printComplete'  actionComplete="actionComplete" actionBegin="actionBegin" toolbar="@(new List<string>() {"Add","Edit","Print", "PdfExport", "ExcelExport", "Search", "ColumnChooser"})">

        <e-grid-groupsettings></e-grid-groupsettings>

        <e-grid-filterSettings columns="filterColumns" type="Excel"></e-grid-filterSettings>

        <e-grid-pagesettings pageCount="6" pageSize="16" pageSizes="@(new string[] {"5", "10", "16", "20", "All"})"></e-grid-pagesettings>

        <e-grid-sortsettings columns="cols"></e-grid-sortsettings>

        <e-grid-editSettings allowAdding="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>

        <e-data-manager json="@Model.Tools.ToArray()" adaptor="RemoteSaveAdaptor" insertUrl="/Home/AddTool" updateUrl="/Home/UpdateTool"></e-data-manager>

        <e-grid-columns>

           ...

            <e-grid-column field="Note" headerText="Notes"editType="dropdownedit" edit="new {@params = notesList }" width="150"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

[Rajapandi Ravi]

Hi Danyelle, 

Query#: I want the user to also be able to enter their own value. 

By default, the dropdown values are displayed which was exist only in the dropdown datasource. So, before we start providing solution on your query, we need some information for our clarification. So please share the below details that would be helpful for us to provide better solution. 

1)      In your query you have mentioned that “I want the user to also be able to enter their own value”. So please confirm you like to add the dynamic values in the dropdown list and share your  

          requirement with detailed description. 

2)      If possible, explain your requirement scenario with pictorial representation or video demonstration. 

Regards,
Rajapandi R 

[Danyelle]

When A user Adds/ or edits a tool in the grid there is a  dropdown where they can select Notes. The user needs to be able to type in a note which will then be saved with the record. The Notes are string values. The Note List comes from my database.

User can Select Note from List:

The user may need to enter a note that is not listed. The user should be able to enter a note and then save it.

I have changed this line of code :

var notesList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = @Model.Notes, Query = "new ej.data.Query()", AllowFiltering = true, Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "NoteID", Text = "Description" } };

to

var notesList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = @Model.Notes, Query = "new ej.data.Query()", AllowFiltering = true, Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Description", Text = "Description" } };

so I am only concerned with the note string.

[Rajapandiyan Settu]

Hi Danyelle, 

 

Thanks for your update. 

 

Based on your requirement, you need to manually enter the value in the dropdown and save the selected value or custom value to the Grid. You can achieve your requirement by rendering autoComplete control using cellEditTemplate feature. 

 

The cell edit template is used to add a custom component for a particular column by invoking the create, write, read, destroy functions. Refer to the below documentation for more information. 

 

cellEditTemplate: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template 

 

By using this feature, we rendered the autoComplete control to edit the CustomerID field. The create, write, read and destroy functions will be triggered for each time When you editing a row. Refer to the below code example for more information. 

 

 

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="CustomerID" width="120" edit="@(new {create="create", read="read", destroy="destroy", write="write"})"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

 

<script> 

    var ddlObject; 

    var data = @Json.Serialize(ViewBag.DataSource); 

 

    function create() { 

        //  create a input element 

        return document.createElement('input'); 

    } 

 

    function read(args) { 

        // return the value which will be saved in the grid 

        return ddlObject.value; 

    } 

 

    function destroy() { 

        // destroy the custom component. 

        ddlObject.destroy(); 

    } 

 

    function write(args) { 

        console.log(args); 

        console.log(args.rowData); 

        // create a autoComplete control 

        ddlObject = new ej.dropdowns.AutoComplete({ 

            //bind the data manager instance to dataSource property 

            dataSource: data, 

            //bind the current cell value to the Dropdown which will be displayed only when the dropdown dataSource contains that value 

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

            //map the appropriate columns to fields property 

            fields: { text: 'CustomerID', value: 'CustomerID' }, 

            //set the placeholder to DropDownList input 

            placeholder: "Find a customer" 

        }); 

        //render the component 

        ddlObject.appendTo(args.element); 

    } 

</script> 

 

 

 

Note: The autoComplete displays the current cell value only when the value is available in its dataSource. 

  

AutoComplete doc:  

https://ej2.syncfusion.com/javascript/documentation/auto-complete/data-binding/#array-of-object  

https://ej2.syncfusion.com/javascript/documentation/api/auto-complete/ 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S 

[Danyelle]

This is not what I wanted. It is no longer a drop-down. I still want it to be a drop-down. I want the user to either select a value from the drop-down or be able to type a value into it and save it.

[Rajapandiyan Settu]

Hi Danyelle, 

  

Thanks for your update. 

  

Query: This is not what I wanted. It is no longer a drop-down. I still want it to be a drop-down. I want the user to either select a value from the drop-down or be able to type a value into it and save it. 

  

You can achieve your requirement by setting the showPopupButton property as true in the autoComplete component. Please find the modified code example for your reference. 

  

showPopupButton: https://ej2.syncfusion.com/javascript/documentation/api/auto-complete/#showpopupbutton 

  

  

<script> 

    ---- 

  

    function write(args) { 

        ddlObject = new ej.dropdowns.AutoComplete({ 

            dataSource: data, 

            showPopupButton: true,  // renders the popup button 

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

            fields: { text: 'CustomerID', value: 'CustomerID' }, 

        }); 

        ddlObject.appendTo(args.element); 

    } 

</script> 

  

  

Or, you can use comboBox control to achieve your requirement. Please find the below documentation and code example for your reference. 

  

comboBox doc: https://ej2.syncfusion.com/javascript/documentation/combo-box/data-binding/#2-array-of-json-data 

  

  

<script> 

    ---- 

    function write(args) { 

        console.log(args); 

        console.log(args.rowData); 

        ddlObject = new ej.dropdowns.ComboBox({ 

            dataSource: data, 

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

            fields: { text: 'CustomerID', value: 'CustomerID' }, 

        }); 

        ddlObject.appendTo(args.element); 

    } 

</script> 

  

  

Please get back to us if you need further assistance with this. 

  

Regards, 

Rajapandiyan S