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. Image for the cookie policy date

Multiselect inside grid

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?

9 Replies

HJ Hariharan J V Syncfusion Team 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 



NE Nelson April 15, 2019 07:35 PM UTC

Hi, thanks! this work correctly.

I highly recommend everyone to use syncfusion :)



HJ Hariharan J V Syncfusion Team 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 



NE Nelson replied to Hariharan J V 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") ???


NE Nelson replied to Nelson 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;
    }



GA Grey Andrew 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.


HJ Hariharan J V Syncfusion Team 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 



NE Nelson April 25, 2019 07:53 PM UTC

Hi, thanks! this work correctly.


HJ Hariharan J V Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon