1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Multiselect dropdown in grid cell

Multiselect dropdown in grid cell

I could have a multiselect dropdown (i.e., checkbox list) in a grid cell in EJ1 with a set of event handlers modifying the editing control based on a comma separated list in the data record. Is there a way to do this in EJ2? 

5 Replies
MS Madhu Sudhanan P Syncfusion Team December 17, 2018 07:02 AM UTC

Hi R Brian Lindahl, 

Thanks for contacting Syncfusion support. 

We have created a sample to use MultiSelect as cell editor using the Edit property of the columns and the same can be downloaded from the below link. 



    <ejs-grid id="Grid" dataSource="ViewBag.datasource" height="315" allowPaging="true"> 
 
        <e-grid-columns> 
            ... 
            <e-grid-column field="tags" edit="@(new {create = " create ", read = "read ", write = "write "})" width="120"></e-grid-column> 
            .... 
        </e-grid-columns> 
    </ejs-grid> 
    <script> 
        function create(args) { 
            elem = document.createElement('input'); 
            return elem; 
        } 
        function write(args) { 
            multiselect = new ej.dropdowns.MultiSelect({ 
                dataSource: ['JavaScript', 'ASP.NET MVC', 'Vue', 'Angular', 'React', 'ASP.NET Core'], 
                placeholder: "Select Tags", 
                value: args.rowData[args.column.field] ? args.rowData[args.column.field].split(',') : null, 
                mode: 'CheckBox' 
            }); 
            multiselect.appendTo(elem); 
        } 
        function read(args) { 
            return multiselect.value.join(',') 
        } 
    </script> 


Please refer to the below help links for more information. 



Regards, 
Madhu Sudhanan P 


NE Nelson replied to Madhu Sudhanan P April 12, 2019 08:16 PM UTC

Hi R Brian Lindahl, 

Thanks for contacting Syncfusion support. 

We have created a sample to use MultiSelect as cell editor using the Edit property of the columns and the same can be downloaded from the below link. 



    <ejs-grid id="Grid" dataSource="ViewBag.datasource" height="315" allowPaging="true"> 
 
        <e-grid-columns> 
            ... 
            <e-grid-column field="tags" edit="@(new {create = " create ", read = "read ", write = "write "})" width="120"></e-grid-column> 
            .... 
        </e-grid-columns> 
    </ejs-grid> 
    <script> 
        function create(args) { 
            elem = document.createElement('input'); 
            return elem; 
        } 
        function write(args) { 
            multiselect = new ej.dropdowns.MultiSelect({ 
                dataSource: ['JavaScript', 'ASP.NET MVC', 'Vue', 'Angular', 'React', 'ASP.NET Core'], 
                placeholder: "Select Tags", 
                value: args.rowData[args.column.field] ? args.rowData[args.column.field].split(',') : null, 
                mode: 'CheckBox' 
            }); 
            multiselect.appendTo(elem); 
        } 
        function read(args) { 
            return multiselect.value.join(',') 
        } 
    </script> 


Please refer to the below help links for more information. 



Regards, 
Madhu Sudhanan P 


Hi, a simple question. How can i pass data from a db to the multiselect control?
thanks

HJ Hariharan J V Syncfusion Team April 15, 2019 11:17 AM UTC

Hi R Brian Lindahl,  
 
In the below sample link, we have mapped remote data service to the multi select component for binding data from remote(“here we can pass values from db or list from server”) and make this changes on grid edit’s write method to achieve your requirement.. 
 
Please refer the source tab on the below sample. 
 
Regards,
Hariharan 


RA Ramazan replied to Madhu Sudhanan P June 8, 2021 01:23 AM UTC

Hi R Brian Lindahl, 

Thanks for contacting Syncfusion support. 

We have created a sample to use MultiSelect as cell editor using the Edit property of the columns and the same can be downloaded from the below link. 



    <ejs-grid id="Grid" dataSource="ViewBag.datasource" height="315" allowPaging="true"> 
 
        <e-grid-columns> 
            ... 
            <e-grid-column field="tags" edit="@(new {create = " create ", read = "read ", write = "write "})" width="120"></e-grid-column> 
            .... 
        </e-grid-columns> 
    </ejs-grid> 
    <script> 
        function create(args) { 
            elem = document.createElement('input'); 
            return elem; 
        } 
        function write(args) { 
            multiselect = new ej.dropdowns.MultiSelect({ 
                dataSource: ['JavaScript', 'ASP.NET MVC', 'Vue', 'Angular', 'React', 'ASP.NET Core'], 
                placeholder: "Select Tags", 
                value: args.rowData[args.column.field] ? args.rowData[args.column.field].split(',') : null, 
                mode: 'CheckBox' 
            }); 
            multiselect.appendTo(elem); 
        } 
        function read(args) { 
            return multiselect.value.join(',') 
        } 
    </script> 


Please refer to the below help links for more information. 



Regards, 
Madhu Sudhanan P 


Hello, thanks for solution but seems there is syntax errors in sample code at grid column line, i realized after 30 mins, i was confused where i am doing wrong.

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

here I made background blue, parameter names contains space.

BS Balaji Sekar Syncfusion Team June 10, 2021 12:14 PM UTC

Hi Ramazan, 

Thanks for your patience. 

We checked your query and we suspect that you have declared the cellEditTemplate functions(create, read and write functions) with space it is not valid declaration since it will throw error. 

Hence we suggest you to avoid the space on the cellEditTemplate functions declaration it will overcome reported problem. 

Regards, 
Balaji Sekar. 


Loader.
Up arrow icon