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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Multiselect dropdown in grid cell

Thread ID:

Created:

Updated:

Platform:

Replies:

141515 Dec 14,2018 04:29 PM UTC Apr 15,2019 11:17 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: DataGrid
R Brian Lindahl
Asked On December 14, 2018 04:29 PM UTC

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? 

Madhu Sudhanan P [Syncfusion]
Replied On 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 


Nelson
Replied On 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

Hariharan J V [Syncfusion]
Replied On 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
 


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

;