We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid editing - using multiselect

How can I use multiselect component inside grid (when editing)? I could only find examples with regular dropdowns but not multiselect 

6 Replies

PK Prasanna Kumar Viswanathan Syncfusion Team January 3, 2020 01:20 PM UTC

Hi Alex, 
Greetings from Syncfusion Support 
Query#: How can I use multiselect component inside Grid (when editing)? 
From analyzing your query we understand that you need to use ‘MultiSelect’ component in Grid when editing. To achieve this requirement we used edit template feature of Grid. For your convenience we have prepared a sample which can be downloaded from the below link. 
Please refer the below code example for more information. 
  <div id="app"> 
    <ejs-grid id="Grid" ref="grid" :dataSource="data" :allowPaging="true" :editSettings="editSettings" 
        <e-column field="OrderID" headerText="Order ID" width="90" isPrimaryKey="true"></e-column> 
        <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column> 
        <e-column field="ShipCountry" headerText="Ship Country" width="150" :edit='dpParams'></e-column> 
import Vue from "vue"; 
import { GridPlugin, Edit, Page, Toolbar } from "@syncfusion/ej2-vue-grids"; 
import { data } from "./datasource"; 
import { MultiSelectPlugin, MultiSelect } from "@syncfusion/ej2-vue-dropdowns"; 
let elem; 
let multiSelectObj; 
export default { 
  data() { 
    return { 
      data: data, 
       dpParams: { 
            create: function() { 
                elem = document.createElement('input'); 
                return elem; 
            read: () => { 
                return multiSelectObj.value; 
            destroy: () => { 
            write: (args) => { 
              var data = args.rowData.ShipCountry; 
                multiSelectObj = new MultiSelect({ 
                  value: typeof(data) === 'string' ? args.rowData.ShipCountry.split() : data, 
                  fields: {text: 'ShipCountry', value: 'ShipCountry'}, 
                  dataSource: dataSource[‘countries’] 
  provide: { 
    grid: [Page, Edit, Toolbar] 
Please get back to us if you need further assistance. 
Prasanna Kumar N.S.V 

AE Alex E January 3, 2020 02:59 PM UTC

Thanks Prasanna! It works.
Is there any plans to add standard support to multiselect via editType property of e-column?

Also is there trick to make solution above "reusable" so it can be applied to various columns or different grids using some "one-liner?"

AE Alex E January 3, 2020 05:42 PM UTC

One more question:

For this multiselect is there way to switch it to "treeview" control so that user can pick multiple options from dropdown containing options in hierarchical format?

I found the following control, but I don't see equivalent one for vue: https://js.syncfusion.com/demos/web/?_ga=2.265198735.1612657126.1577975266-1783316370.1577218105#!/bootstrap/dropdowntree/multi-select


DR Dhivya Rajendran Syncfusion Team January 6, 2020 01:07 PM UTC

Hi Alex, 

Thanks for your update. 

Query#1: MultiSelect via editType property? 
As provided in the previous update , you can use editTemplate option to use the MultiSelect control when editing in Grid. 

Query#2: Is there way to switch it to TreeView Control ? 

From your query we can understand that you need to use TreeView Control instead of MultiSelect Control which was provided in the previous update. 
We have analyzed your query and achieved your requirement. Please look into the sample link for more details. 

If we have misunderstood your query, please share us more details that will be helpful for us to provide better assistance. 


AE Alex E January 6, 2020 02:46 PM UTC

For query #2:
Thanks for example but what I meant is the following:

When user goes into row edit mode, first user should see exactly the same as in multiselect (collapsed drowdown). When user clicks on dropdown icon, instead of linear dropdown list (as in multiselct), user should see tree selection


DR Dhivya Rajendran Syncfusion Team January 8, 2020 12:58 PM UTC

Hi Alex, 

Sorry for the inconvenience caused. 

Currently, we don’t have Dropdown tree component in EJ2.  We have already considered “Dropdown Tree view component for EJ2” as a feature and added it to our feature request. We will include this feature in our Essential studio Volume1, 2020 release. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

R. Dhivya 

Live Chat Icon For mobile
Up arrow icon