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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid editing - using multiselect

Thread ID:

Created:

Updated:

Platform:

Replies:

150349 Jan 3,2020 12:23 AM UTC Jan 8,2020 12:58 PM UTC Vue 6
loading
Tags: Data Grid
Alex E
Asked On January 3, 2020 12:23 AM UTC

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

Prasanna Kumar Viswanathan [Syncfusion]
Replied On 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. 
 
App.vue 
 
 
<template> 
  <div id="app"> 
    <ejs-grid id="Grid" ref="grid" :dataSource="data" :allowPaging="true" :editSettings="editSettings" 
      :toolbar="toolbar"> 
      <e-columns> 
        <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> 
        ------------- 
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
 
<script> 
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"; 
Vue.use(GridPlugin); 
Vue.use(MultiSelectPlugin); 
 
let elem; 
let multiSelectObj; 
 
 
 
export default { 
  data() { 
    return { 
      data: data, 
      ---------------------------- 
       dpParams: { 
            create: function() { 
                elem = document.createElement('input'); 
                return elem; 
            }, 
            read: () => { 
                return multiSelectObj.value; 
            }, 
            destroy: () => { 
                multiSelectObj.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’] 
                }); 
                multiSelectObj.appendTo(elem); 
            } 
        } 
    }; 
  }, 
  provide: { 
    grid: [Page, Edit, Toolbar] 
  } 
}; 
</script> 
 
<style> 
</style> 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 


Alex E
Replied On 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?"

Alex E
Replied On 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

Thanks
Alex

Dhivya Rajendran [Syncfusion]
Replied On 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. 

Regards, 
R.Dhivya 


Alex E
Replied On 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

Thanks
Alex



Dhivya Rajendran [Syncfusion]
Replied On 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.  


Regards, 
R. Dhivya 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon