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

Multiselect inside grid

Thread ID:

Created:

Updated:

Platform:

Replies:

143994 Apr 12,2019 09:40 PM UTC Apr 26,2019 06:00 AM UTC ASP.NET Core - EJ 2 9
loading
Tags: DataGrid
Nelson
Asked On April 12, 2019 09:40 PM UTC

Can i get some example of multiselect dropdown  in a grid cell in EJ2 (razor page)? . Is there a way to get the multiselect filled(with objects) direct from a db?

Hariharan J V [Syncfusion]
Replied On April 15, 2019 12:35 PM UTC

Hi Nelson, 

Thanks for contacting Syncfusion support, 

Query #1: Can i get some example of multiselect dropdown  in a grid cell in EJ2 (razor page)  
 
You can able to edit the grid cell with Multiselect dropdown on the EJ2 Grid. we have bind that editing in the “CustomerID” column. Please refer the below code example for more information. 
 
Query #2: Is there a way to get the multiselect filled(with objects) direct from a db? 
 
Yes, you can bind and save the changes on DB in MultiSelect dropdown editing using “URL Adaptor”.  Please refer the below code example and Documnentation to know about the DataManager and multiselect with urladaptor. 

[index.cshtml] 
<ejs-grid id="Grid" allowPaging="true" load="onLoad" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 
    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editsettings> 
    <e-data-manager url="/Index?handler=DataSource" batchUrl="/Index?handler=BatchUpdate" adaptor="UrlAdaptor"></e-data-manager> 
    <e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>         
        <e-grid-column field="CustomerID" headerText="Customer ID" textAlign="Right" width="120" edit="@(new {create = "onCreate", read = "onRead", write = "onWrite", destroy= "onDestroy"})"></e-grid-column> 
        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column> 
        <e-grid-column field="ShipCity" headerText="Ship City" textAlign="Right" width="120"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
<script> 
 
 
    var multiSelectEle; 
    var element 
    function onCreate(args) { 
        element = document.createElement('input'); 
        return element; 
    } 
    function onRead(e) { 
        return multiSelectEle.value; 
    } 
    function onDestroy() { 
        multiSelectEle.destroy(); 
    } 
    function onWrite(args) { 
        multiSelectEle = new ej.dropdowns.MultiSelect({    //rendering multiSelectEle component  
            dataSource: new ej.data.DataManager({ 
                url: '/Index?handler=AutoCompleteDataSource', 
                adaptor: new ej.data.UrlAdaptor(), 
                crossDomain: true, 
                headers: [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }] 
            }), 
            query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(), fields: { text: "FirstName", value: 'FirstName' }, 
            // set the placeholder to multiSelectEle input element 
            placeholder: 'e.g. Andrew Fuller', 
            // sort the resulted items 
            sortOrder: 'Ascending', 
            // set the filterType to searching operation 
            filterType: 'StartsWith', 
        }); 
        multiSelectEle.appendTo(element); 
    } 
    function onLoad() {    
        this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }]; 
 
          } 
     
</script> 



Please get back to us, if you need further assistance. 

Regards, 
Hariharan 


Nelson
Replied On April 15, 2019 07:35 PM UTC

Hi, thanks! this work correctly.

I highly recommend everyone to use syncfusion :)


Hariharan J V [Syncfusion]
Replied On April 16, 2019 11:18 AM UTC

Hi Nelson, 
 
Thanks for your update.  
  
We are happy to hear that the provided solution helped you.   
  
Please contact us if you need any further assistance. As always, we will be happy to assist you.   
  
Regards, 
Hariharan 


Nelson
Replied On April 17, 2019 07:52 PM UTC

Hi Nelson, 

Thanks for contacting Syncfusion support, 

Query #1: Can i get some example of multiselect dropdown  in a grid cell in EJ2 (razor page)  
 
You can able to edit the grid cell with Multiselect dropdown on the EJ2 Grid. we have bind that editing in the “CustomerID” column. Please refer the below code example for more information. 
 
Query #2: Is there a way to get the multiselect filled(with objects) direct from a db? 
 
Yes, you can bind and save the changes on DB in MultiSelect dropdown editing using “URL Adaptor”.  Please refer the below code example and Documnentation to know about the DataManager and multiselect with urladaptor. 

[index.cshtml] 
<ejs-grid id="Grid" allowPaging="true" load="onLoad" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 
    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editsettings> 
    <e-data-manager url="/Index?handler=DataSource" batchUrl="/Index?handler=BatchUpdate" adaptor="UrlAdaptor"></e-data-manager> 
    <e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>         
        <e-grid-column field="CustomerID" headerText="Customer ID" textAlign="Right" width="120" edit="@(new {create = "onCreate", read = "onRead", write = "onWrite", destroy= "onDestroy"})"></e-grid-column> 
        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column> 
        <e-grid-column field="ShipCity" headerText="Ship City" textAlign="Right" width="120"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
<script> 
 
 
    var multiSelectEle; 
    var element 
    function onCreate(args) { 
        element = document.createElement('input'); 
        return element; 
    } 
    function onRead(e) { 
        return multiSelectEle.value; 
    } 
    function onDestroy() { 
        multiSelectEle.destroy(); 
    } 
    function onWrite(args) { 
        multiSelectEle = new ej.dropdowns.MultiSelect({    //rendering multiSelectEle component  
            dataSource: new ej.data.DataManager({ 
                url: '/Index?handler=AutoCompleteDataSource', 
                adaptor: new ej.data.UrlAdaptor(), 
                crossDomain: true, 
                headers: [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }] 
            }), 
            query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(), fields: { text: "FirstName", value: 'FirstName' }, 
            // set the placeholder to multiSelectEle input element 
            placeholder: 'e.g. Andrew Fuller', 
            // sort the resulted items 
            sortOrder: 'Ascending', 
            // set the filterType to searching operation 
            filterType: 'StartsWith', 
        }); 
        multiSelectEle.appendTo(element); 
    } 
    function onLoad() {    
        this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }]; 
 
          } 
     
</script> 



Please get back to us, if you need further assistance. 

Regards, 
Hariharan 


Im trying to do the same in Grid Dialog mode, and cannot find the way of get the selected items in the multiselect. How can i take these selected values in the handler of the grid (e g. .. /Index?handler=Insert") ???

Nelson
Replied On April 18, 2019 02:40 PM UTC

Hi Nelson, 

Thanks for contacting Syncfusion support, 

Query #1: Can i get some example of multiselect dropdown  in a grid cell in EJ2 (razor page)  
 
You can able to edit the grid cell with Multiselect dropdown on the EJ2 Grid. we have bind that editing in the “CustomerID” column. Please refer the below code example for more information. 
 
Query #2: Is there a way to get the multiselect filled(with objects) direct from a db? 
 
Yes, you can bind and save the changes on DB in MultiSelect dropdown editing using “URL Adaptor”.  Please refer the below code example and Documnentation to know about the DataManager and multiselect with urladaptor. 

[index.cshtml] 
<ejs-grid id="Grid" allowPaging="true" load="onLoad" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 
    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editsettings> 
    <e-data-manager url="/Index?handler=DataSource" batchUrl="/Index?handler=BatchUpdate" adaptor="UrlAdaptor"></e-data-manager> 
    <e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>         
        <e-grid-column field="CustomerID" headerText="Customer ID" textAlign="Right" width="120" edit="@(new {create = "onCreate", read = "onRead", write = "onWrite", destroy= "onDestroy"})"></e-grid-column> 
        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column> 
        <e-grid-column field="ShipCity" headerText="Ship City" textAlign="Right" width="120"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
<script> 
 
 
    var multiSelectEle; 
    var element 
    function onCreate(args) { 
        element = document.createElement('input'); 
        return element; 
    } 
    function onRead(e) { 
        return multiSelectEle.value; 
    } 
    function onDestroy() { 
        multiSelectEle.destroy(); 
    } 
    function onWrite(args) { 
        multiSelectEle = new ej.dropdowns.MultiSelect({    //rendering multiSelectEle component  
            dataSource: new ej.data.DataManager({ 
                url: '/Index?handler=AutoCompleteDataSource', 
                adaptor: new ej.data.UrlAdaptor(), 
                crossDomain: true, 
                headers: [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }] 
            }), 
            query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(), fields: { text: "FirstName", value: 'FirstName' }, 
            // set the placeholder to multiSelectEle input element 
            placeholder: 'e.g. Andrew Fuller', 
            // sort the resulted items 
            sortOrder: 'Ascending', 
            // set the filterType to searching operation 
            filterType: 'StartsWith', 
        }); 
        multiSelectEle.appendTo(element); 
    } 
    function onLoad() {    
        this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }]; 
 
          } 
     
</script> 



Please get back to us, if you need further assistance. 

Regards, 
Hariharan 


Im trying to do the same in Grid Dialog mode, and cannot find the way of get the selected items in the multiselect. How can i take these selected values in the handler of the grid (e g. .. /Index?handler=Insert") ???

Now i can get the selected values, but i get these in json.

{{
  "Group": {
    "Nombre": [ 1 ]
  },
  "Customer": {
    "Name": [ 1,  3 ]
  }
}}

How could turn that in an object?
My model is:
    public class CustomerGroup
    {
        [Key]
        public int ID { get; set; }

        public int GroupID { get; set; }
        public virtual Group Group { get; set; }

        public int CustomerID { get; set; }
        public virtual Customer Customer { get; set; }
        public virtual string CustomerName => Customer?.Name;
    }


Grey Andrew
Replied On April 19, 2019 09:29 AM UTC

This will be going to find out the part which will be going to get the ASP.NET core that will be able to manage it in such part to get the valuable work for the user through logitech h111 mic not working will provide the part perfectly.

Hariharan J V [Syncfusion]
Replied On April 24, 2019 05:41 AM UTC

Hi Nelson, 

As per your query, we have created a sample with Dialog editing in URL Adaptor in the razor page and we have bind the edited cell value on “MultiSelect” edit type. Please refer the below code example for more information. 
[index.cshtml] 
<ejs-grid id="Grid" allowPaging="true" load="onLoad" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 
    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editsettings> 
    <e-data-manager url="/Index?handler=DataSource"  insertUrl="/Index?handler=Insert" updateUrl="/Index?handler=Update" removeUrl="/Index?handler=Delete"  adaptor="UrlAdaptor"></e-data-manager> 
    <e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>         
        <e-grid-column field="CustomerID" headerText="Customer ID" textAlign="Right" width="120" edit="@(new {create = "onCreate", read = "onRead", write = "onWrite", destroy= "onDestroy"})"></e-grid-column> 
        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column> 
        <e-grid-column field="ShipCity" headerText="Ship City" textAlign="Right" width="120"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
    .      .       .        .   
function onWrite(args) {         
        multiSelectEle = new ej.dropdowns.MultiSelect({    //rendering multiSelectEle component  
            dataSource: new ej.data.DataManager({ 
                url: '/Index?handler=AutoCompleteDataSource', 
                adaptor: new ej.data.UrlAdaptor(), 
                crossDomain: true, 
                headers: [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }] 
            }), 
            query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(), fields: { text: "FirstName", value: 'FirstName' }, 
            // Grid edited cell value bound on MultiSelect edit type 
            value: args.rowData.CustomerID, 
            // sort the resulted items 
            sortOrder: 'Ascending', 
            // set the filterType to searching operation 
            filterType: 'StartsWith', 
        }); 
        multiSelectEle.appendTo(element); 
        // Made the label for CustomerID edit mode           
        var parentEle = new ej.grids.parentsUntil(args.element, "e-rowcell"); 
        var labelEle = document.createElement("label"); 
        labelEle.innerHTML = args.column.headerText; 
        labelEle.id = "label_" + args.element.id; 
        labelEle.style.fontWeight = "normal"; 
        labelEle.style.color = "rgba(0, 0, 0, 0.42)"; 
        parentEle.prepend(labelEle); 
    } 
[index.cshtml.cs] 

public JsonResult OnPostInsert([FromBody]CRUDModel<Orders> value) 
        { 
 
            Orders.GetAllRecords().Insert(0, value.Value); 
            return new JsonResult(value.Value); 
        } 
 
        public JsonResult OnPostUpdate([FromBody]CRUDModel<Orders> value) 
        { 
            var ord = value.Value; 
            Orders val = Orders.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 
            val.OrderID = ord.OrderID; 
           val.EmployeeID = ord.EmployeeID; 
            val.CustomerID = ord.CustomerID; 
            val.ShipCity = ord.ShipCity; 
 
            return new JsonResult(value.Value); 
        } 
 
 
        public JsonResult OnPostDelete([FromBody]CRUDModel<Orders> value) 
        { 
            Orders.GetAllRecords().Remove(Orders.GetAllRecords().Where(or => or.OrderID == int.Parse(value.Key.ToString())).FirstOrDefault()); 
            return new JsonResult(value); 
        } 
 

Please get back to us, if you need further assistance. 

Regards, 
Hariharan 


Nelson
Replied On April 25, 2019 07:53 PM UTC

Hi, thanks! this work correctly.

Hariharan J V [Syncfusion]
Replied On April 26, 2019 06:00 AM UTC

Hi Nelson, 
 
Thanks for your update.  
  
We are happy to hear that the provided solution helped you.   
  
Please contact us if you need any further assistance. As always, we will be happy to assist you.   
  
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

Live Chat Icon For mobile
Live Chat Icon