1. Home
  2. Forum
  3. Vue
  4. search in dropdown

search in dropdown

Hi there,
I am editing a record in the dialog. There I have a field which pulls data over another database table and creates a dropdown list from it. I would like to search the dropdown and only see the results.

best regards Sascha

3 Replies
RS Rajapandiyan Settu Syncfusion Team January 11, 2021 12:35 PM UTC

Hi Sascha, 
 
Thanks for contacting Syncfusion support. 
 
Query: I would like to search the dropdown and only see the results. 
 
By default, the DropDownList sends a request for fetching data from the server at initial rendering. This is the behavior DropDownList component. 
 
We understand your requirement. You want to send a request to the server when performing the search operation. So, we have suggested using the AutoComplete component. 
 
   
You can render the AutoComplete component in EJ2 Grid by using the cell EditTemplate feature. 
 
 
We have prepared a sample with this. Please find the below code example and sample for your reference. 
 
 
<template> 
  <div id="app"> 
    <ejs-grid 
      :dataSource="data" 
      :editSettings="editSettings" 
      :toolbar="toolbar" 
      height="273px" 
    > 
      <e-columns> 
        <e-column 
          field="OrderID" 
          headerText="Order ID" 
          textAlign="Right" 
          :isPrimaryKey="true" 
          width="100" 
        ></e-column> 
        <e-column 
          field="CustomerID" 
          headerText="Customer ID" 
          width="120" 
        ></e-column> 
        <e-column 
          field="ShipCountry" 
          headerText="Ship Country" 
          :edit="autocomParams" 
          width="150" 
        ></e-column> 
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
<script> 
---- 
 
let elem; 
let autocompleteObj; 
 
export default { 
  data() { 
    return { 
      data: data, 
      editSettings: { 
        allowEditing: true, 
        allowAdding: true, 
        allowDeleting: true, 
      }, 
      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"], 
// create the cell edit control 
      autocomParams: { 
        create: function () { 
          elem = document.createElement("input"); 
          return elem; 
        }, 
        read: () => { 
          return autocompleteObj.value; // returned value will be bound in Grid 
        }, 
        destroy: () => { 
          autocompleteObj.destroy(); 
        }, 
        write: (args) => { 
          autocompleteObj = new AutoComplete({ 
            // bind the  Data to datasource property 
            dataSource: new DataManager({ 
              url: 
              adaptor: new ODataV4Adaptor(), 
              crossDomain: true, 
            }), 
            // value: args.rowData[args.column.field], 
            // maps the appropriate column to fields property 
            fields: { field: "ShipCountry", value: "ShipCountry" }, 
            //set the placeholder to AutoComplete input 
            placeholder: "Find a Country", 
          }); 
          autocompleteObj.appendTo(elem); 
        }, 
      }, 
    }; 
  }, 
  provide: { 
    grid: [Page, Edit, Toolbar], 
  }, 
}; 
</script> 
 
 
 
Note: By default, the AutoComplete component only fetches the top 20 records only from the server based on the searched value for better performance. Please find the AutoComplete documentation for more information. 
 
 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S

SA Sascha January 12, 2021 07:38 AM UTC

Thank you very much that worked out great. Now I still have the problem that when I open the dialog the value in the DB is not displayed there. But the search goes very well

many thanks Sascha

Attachment: Unbenannt_2856f835.zip

RS Rajapandiyan Settu Syncfusion Team January 13, 2021 10:09 AM UTC

Hi Sascha, 
 
Thanks for your update. 
 
Query: Thank you very much that worked out great. Now I still have the problem that when I open the dialog the value in the DB is not displayed there. But the search goes very well 
 
You’re welcome. We have validated your query at our end. By using value property of the autoComplete component, you can bind the value in it. So, the autoComplete control will rendered with that value. Find the below code example for your reference. 
 
 
If the value is defined in the autoComplete control, then it request the server to get the correspond value at initial render and it will be displayed in the autoComplete.  
 
Screenshot: If the value is defined in the AutoComplete component, then it fetches the top 20 filtered records based on that value from the server. 
 
 
 
 
Refer to the below code example and sample for more information. 
 
 
 
[App.vue] 
autocomParams: { 
        create: function () { 
          elem = document.createElement("input"); 
          return elem; 
        }, 
        read: () => { 
          return autocompleteObj.value; 
        }, 
        destroy: () => { 
          autocompleteObj.destroy(); 
        }, 
        write: (args) => { 
          autocompleteObj = new AutoComplete({ 
            // bind the  Data to datasource property 
            dataSource: new DataManager({ 
              adaptor: new ODataV4Adaptor(), 
              crossDomain: true, 
            }), 
            // bind the cell value to the autoComplete control 
            value: args.rowData[args.column.field], // it request top 20 records based on the cell value 
            // maps the appropriate column to fields property 
            fields: { field: "ShipCountry", value: "ShipCountry" }, 
            //set the placeholder to AutoComplete input 
            placeholder: "Find a Country", 
          }); 
          autocompleteObj.appendTo(elem); 
        }, 
      }, 
    }; 
 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S

Loader.
Up arrow icon