DataGrid and Multiselect

[Nelson]

If i had a multiselect dropdown  in a grid cell (razor page)  with a multiselect filled with objects direct from a db. How can i get the selected values in the handler of the grid(with urladaptor)? Can i get some example?

Thanks

[Vignesh Natarajan]

Hi Nelson,  

Thanks for contacting Syncfusion forums. 

Query: “How can i get the selected values in the handler of the grid(with urladaptor)?” 

Before proceeding with your query, we need some additional details regarding your query. So kindly share the following details.  

1.  Share the Grid rendering code.(client and server side).
2. You have mentioned that you are using multiselect dropdown in Grid, are you referring to dropdown control with multiselect option or individual MultiSelect control. Kindly confirm your control which you have used inside the Grid.
3. Share the code example how you have rendered the multiselect dropdown (i.e) using columnTemplate or edit type of column?
4.  Confirm your Essential JavaScript version. (i.e) EJ1 or EJ2.

Requested details will be helpful for us to validate the reported issue at our end and provide the solution as soon as possible. 

We also would like to let you know about our next generation JavaScript product - Essential JS 2, in case if you are not aware of it. Essential JS 2 is fully re-written to be modular, responsive and lightweight.  

   

We suggest you consider our following product page for more details. 

  

https://www.syncfusion.com/products/essential-js2     

   

Demo page for ej2 Grid  

https://ej2.syncfusion.com/aspnetcore/Grid/GridOverview#/material  

Regards, 

Vignesh Natarajan. 

[Nelson]

Thanks. Yes, im using EJ2 and a multiselect control. Im adding some sample of the code

Attachment: Desktop_a55a3139.rar

[Hariharan J V]

Hi Nelson, 

 

Based on your requirement we have created a sample. Here, we have created multiselect dropdown by using cell edit template. Please find the below code example and sample for your reference. 

 

[code example] 

... 

<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-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=MultiDropDataSource', 

                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', 

            value: args.rowData[args.column.field] 

        }); 

        multiSelectEle.appendTo(element); 

    } 

 

    ... 

    

</script> 

 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/RazorpagesMultiSelectDropdown1308436527  

 

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