Multiselect inside grid

[Nelson]

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]

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> 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/RazorpagesSample15042019-2085244706.zip 

Help Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#batch 

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

Regards, 

Hariharan 

[Nelson]

Hi, thanks! this work correctly.

I highly recommend everyone to use syncfusion :)

[Hariharan J V]

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]

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> 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/RazorpagesSample15042019-2085244706.zip 

Help Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#batch 

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]

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> 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/RazorpagesSample15042019-2085244706.zip 

Help Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#batch 

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]

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]

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); 

        } 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/143994/ze/RazorpagesSample-24042019512131620.zip 

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

Regards, 

Hariharan 

[Nelson]

Hi, thanks! this work correctly.

[Hariharan J V]

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