1. Home
  2. Forum
  3. Vue
  4. Multi selcet drop down inside a grid when editing

Multi selcet drop down inside a grid when editing

Hi

I'm trying to add a multiselect drop down to a grid. I have a <q-input> component for that and I tried to integrate it using template
<e-column field="items" headerText="Items" :template="itemsDropDown" />

            itemsDropDown: function() {
                return {
                    template: Vue.component("bindDropdown", {
                        template: `<q-select v-model="multipleP" multiple :options="itemsList()"/>`,
                        data() {
                            return {
                                multipleP: null,
                            };
                        },
                        components: {
                            QSelect,
                        },
                        methods: {
                            itemsList() {
                                var pList = [];
                                for (var item in this.userInfo().items) {
                                    if (item != "All items") pList.push(item);
                                }
                                return pList;
                            },
                        },
                    }),
                };
            },


When I click the Add button, I see the following
Which is the default input of syncfusion for editing data.
If then I click outside the input area, I see the following
As you can see, now it's showing my component along with the relevant options menu above it.
If I multi select options, they are even shown as selected
BUT, the grid is not in editing mode anymore (see toolbar buttons), it was not in edit mode from when I clicked outside the default input (step 2 above).

I know you also have a multiselect component and even saw a question about it from January:
https://www.syncfusion.com/forums/150349/grid-editing-using-multiselect
But the demo link leads to a demo that was changed to something else so I can't "learn" from it. So my questions are

1. Did I do something wrong that shows the default input instead of my component when editing?
2. Same question for "grid exiting edit mode", did I miss anything?
3. Can I use a non-syncfusion component to achieve it? If so, how can I then take the selected items and "push" them into the grid's datasource?
4. If it's not possible to use a non-syncfusion component for that, where can I see a demo that is using your component?

Thanks
p

3 Replies
RR Rajapandi Ravi Syncfusion Team July 28, 2020 01:28 PM UTC

Hi Amos, 

Greetings from syncfusion support 

From analyzing your query we understand that you need to use ‘MultiSelect’ component in Grid when editing. We have prepared a sample based on your query and achieved your requirement by using cellEditTemplate feature of Grid. The cell edit template is used to add a custom component for a particular column by invoking the following functions read, create, write and destroy. Please refer the below code example, sample, documentation and screenshot  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-column field="ShipCity" headerText="Ship City" width="120"></e-column> 
        <e-column field="Freight" headerText="Freight" format="C2" width="90"></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 * as dataSource from "./data.json"; 
import { MultiSelectPlugin, MultiSelect } from "@syncfusion/ej2-vue-dropdowns"; 
Vue.use(GridPlugin); 
Vue.use(MultiSelectPlugin); 

let elem; 
let multiSelectObj; 



export default { 
  data() { 
    return { 
      data: data, 
      editSettings: { 
        allowAdding: true, 
        allowEditing: true, 
        allowDeleting: true 
      }, 
      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"], 
       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: [ 
              "France", 
              "Germany", 
              "Brazil", 
              "France", 
              "Belgium", 
              "Switzerland", 
              "Venezuela", 
              "Austria", 
              "Mexico" 
            ] 
          }); 
          multiSelectObj.appendTo(elem); 
            } 
        } 
    }; 
  }, 
  provide: { 
    grid: [Page, Edit, Toolbar] 
  } 
}; 
</script> 

<style> 
</style> 



Screenshot: 

 

Regards, 
Rajapandi R 


AM Amos July 28, 2020 01:51 PM UTC

Your demo uses your dropdown component for that. Is there a way to use your solution but using another dropdown component?
If not, I will give your solution a try.
Thanks

RR Rajapandi Ravi Syncfusion Team July 30, 2020 11:56 AM UTC

Hi Amos, 

Thanks for the update 

Query#: Is there a way to use your solution but using another dropdown component? 

We have analyzed your query and we could see that you like to use you custom component. You can also render your custom component by using the cellEditTemplate. Please refer the below code example and documentation for more information. 

     
var multiSelectEle; 
    var element 
    function Create(args) { 
        element = document.createElement('input');  //create a element at the time of initialization 
        return element; 
    } 
    function Read(e) { 
        return multiSelectEle.value; //return the multiselect value here as string format to save the value 
    } 
    function Destroy() {    //used to destroy the component 
        multiSelectEle.destroy(); 
    } 
    function Write(args) { 
        multiSelectEle = new ej.dropdowns.MultiSelect({    //create your custom component here 
             
        }); 
        multiSelectEle.appendTo(element); 
    } 
 


Regards, 
Rajapandi R 


Loader.
Up arrow icon