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

[Thavasianand Sankaranarayanan]

Hi Nelson, 

 

Greetings from Syncfusion. 

 

Query: 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? 

 

We have validated your query and created a sample based on your requirement. 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, 

Thavasianand S. 

[Nelson]

Hi, thanks! this work correctly.

[Pavithra Subramaniyam]

Hi Nelson,  

Thanks for your update. 

We are happy to hear that your problem has been solved. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  

Pavithra S.