Multi-select DropDownList in Grid

[Chris]

Hi,

I have been following https://www.syncfusion.com/kb/4809/how-to-set-the-multi-select-dropdown-as-edit-type-for-a-column to get a multi-select drop down list inside a grid.  (the grid is of type "batch").

I have it working as described in the article and I even get a list of the text back for the multi select items in the batch update method in the controller.

However, I would like it to display the text in the grid but I would like to pass back the values (number(s), not the text) back to the controller.  It would be a lot easier if I had the numbers in the controller for updating my child table.  (I could get it to work the way it is but then I would have to find the Id value for each item and what if the text in the options had duplicates...)

Is this doable?  How could you do it?

Thanks,

Chris

[Vignesh Natarajan]

Hi Chris, 

 

Thanks for using Syncfusion products. 

 

Query: “I would like it to display the text in the grid but I would like to pass back the values (number(s), not the text) back to the controller” 

 

From your query, we understand that you need to render multiselect dropdownlist with text and value pair.  We have achieved your requirement using query-cell-info event and edit-template feature of ejGrid. 

 

Refer the below code example 

 

<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource" query-cell-info="cellinfo" > 

    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true"></e-edit-settings> 

    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' /> 

    <e-columns> 

        <e-column field="OrderID" is-primary-key="true" header-text="Order ID"></e-column> 

        <e-column field="CustomerID" header-text="CustomerID"></e-column>        

        <e-column field="EmployeeID" datasource="ViewBag.DDl" header-text="Freight"> 

            <e-edit-template create="create" read="read" write="write">    </e-edit-template> 

        </e-column> 

 

 

    </e-columns> 

</ej-grid> 

<script type="text/javascript"> 

    var dropData = @Html.Raw(Json.Serialize(ViewBag.DDl));  // to retrieve the data from server 

    function cellinfo(args) {  

        var data = []; 

        if (args.column.field == "EmployeeID") { 

            for (i = 0; i < args.rowData.EmployeeID.length; i++) 

                for (j = 0; j < dropData.length; j++) { 

                    if (args.rowData.EmployeeID[i] == dropData[j].EmployeeID) { 

                        data.push(dropData[j].CustomerID); 

                        break; 

                    } 

                } 

            args.cell.innerHTML = data.join(","); //assign the value to cell  

        } 

    }    

    function create(args) { 

        return "<input>"; 

    } 

    function read(args) { 

        var selvalue = []; 

        var selected = args.ejDropDownList("getSelectedValue").split(","); 

        for (i = 0; i < selected.length; i++) 

            for (j = 0; j < dropData.length; j++) { 

                if (selected[i] == dropData[j].CustomerID) { 

                    selvalue.push(dropData[j].EmployeeID); 

                    break; 

                } 

            } 

        return selvalue; 

    } 

    function write(args) { 

        var selIndex = []; 

        if (args.rowdata != undefined) 

        { 

            for (i = 0; i < args.rowdata["EmployeeID"].length; i++) 

            for (j = 0; j < dropData.length; j++){ 

                if (args.rowdata["EmployeeID"][i] == dropData[j].EmployeeID) { 

                    selIndex.push(j); 

                    break; 

                } 

            } 

        } 

        args.element.ejDropDownList({ width: "100%", dataSource: dropData, fields: { id: "EmployeeID", text: "CustomerID", value: "value" }, showCheckbox: true, allowMultiSelection: true, selectedItems: args.rowdata !== undefined ? selIndex : "" }); 

    } 

</script> 

 

 

 

Refer the below screenshots for output 

 

1. While editing 

 

 

 

2. While saving the saving the data 

 

 

 

 

For your convenience we have prepared a sample which can be downloaded from below link 

 

Sample:  http://www.syncfusion.com/downloads/support/forum/141189/ze/WebApplication1-26411867  

Refer our help documentation for your reference 

 

https://help.syncfusion.com/aspnet-core/grid/editing?cs-save-lang=1&cs-lang=csharp#cell-edit-template  

 

https://help.syncfusion.com/api/js/ejgrid#events:querycellinfo  

 

Query2: “I could get it to work the way it is but then I would have to find the Id value for each item and what if the text in the options had duplicates...)” 

 

From your query, we understand that you need to know what will happen when dropdownlist has multiple text related to single value. Dropdownlist cannot have duplicate value while having text and value pair dataSource. Because only text is visible to user, he will not able to see the value. So single value cannot have multiple text.   

 

If we misunderstood your query, please get back to us with more details. 

 

 

Regards, 

Vignesh Natarajan 

[Chris]

Hi,

Thanks for the reply.  My grid is in "Batch" mode.  QueryCellInfo doesn't fire after selecting items in the drop down. My edit settings look like:

<e-edit-settings allow-editing="true" allow-adding="true" allow-deleting="true" edit-mode="@(EditMode.Batch)" show-confirm-dialog="false" show-delete-confirm-dialog="true" />

If you add edit-mode="@(EditMode.Batch)" to edit settings in the sample you sent me you can see what I mean.  On the initial load it looks good but if you change the selected items in one of the drop downs it displays the numerical values.

How would I do it when it is in batch mode?

Don't worry about Query 2.

Thanks,

Chris

[Vignesh Natarajan]

Hi Chris, 

 

Sorry for the inconvenience caused. 

 

From your query we understand that you need to render the multiselect dropdown list with text and value in ejGrid while using batch editing. We have modified the previously provided solution by using cellSave, beforeBatchSave  event and setCellValue method of ejGrid. refer the below code example 

 

<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource" query-cell-info="cellinfo" cell-save="onSave" before-batch-save="beforeSave" > 

    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="Batch"></e-edit-settings> 

    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' /> 

    <e-columns> 

        <e-column field="OrderID" is-primary-key="true" header-text="Order ID"></e-column> 

        <e-column field="CustomerID" header-text="CustomerID"></e-column>        

        <e-column field="EmployeeID" datasource="ViewBag.DDl" header-text="Freight"> 

            <e-edit-template create="create" read="read" write="write">    </e-edit-template> 

        </e-column> 

 

 

    </e-columns> 

</ej-grid> 

<script type="text/javascript"> 

    var dropData = @Html.Raw(Json.Serialize(ViewBag.DDl));  // to retrieve the data from server 

    var editedData; 

    function onSave(args) { // to display the value after selecting the value. 

        if (args.columnName == "EmployeeID") { 

            var data = []; 

            for (i = 0; i < args.value.length; i++) 

                for (j = 0; j < dropData.length; j++) { 

                    if (args.value[i] == dropData[j].EmployeeID) { 

                        data.push(dropData[j].CustomerID); 

                        break; 

                    } 

                } 

            editedData = data.join(",");  

            setTimeout(function () { 

                var grid = $("#FlatGrid").ejGrid("instance");               

                grid.setCellValue(grid.getSelectedRows().index(),"EmployeeID",editedData); // to display the text instead of value after saving the value  

            },0) 

        } 

    } 

    function beforeSave(args) {       // to change the value from text to interger while saving the changes in dataSource. 

        if (args.batchChanges.changed.length) { 

            for (var k = 0; k < args.batchChanges.changed.length; k++) { 

                if (!(typeof args.batchChanges.changed[k].EmployeeID[0] == "number")) { 

                    var data = []; 

                    for (i = 0; i < args.batchChanges.changed[k].EmployeeID.split(",").length; i++) 

                        for (j = 0; j < dropData.length; j++) { 

                            if (args.batchChanges.changed[k].EmployeeID.split(",")[i] == dropData[j].CustomerID) { 

                                data.push(dropData[j].EmployeeID); 

                                break; 

                            } 

                        } 

                    args.batchChanges.changed[k].EmployeeID = data.join(",") 

                } 

 

            } 

 

        } 

 

    } 

    // to modify the value during intial rendering 

    function cellinfo(args) {  

        var data = []; 

        if (args.column.field == "EmployeeID") { 

            for (i = 0; i < args.rowData.EmployeeID.length; i++) 

                for (j = 0; j < dropData.length; j++) { 

                    if (args.rowData.EmployeeID[i] == dropData[j].EmployeeID) { 

                        data.push(dropData[j].CustomerID); 

                        break; 

                    } 

                } 

            args.cell.innerHTML = data.join(","); // return the selected value from dropdownlist  

        } 

    }    

    function create(args) { 

        return "<input>"; 

    } 

    function read(args) { 

        var selvalue = []; 

        var selected = args.ejDropDownList("getSelectedValue").split(","); 

        for (i = 0; i < selected.length; i++) 

            for (j = 0; j < dropData.length; j++) { 

                if (selected[i] == dropData[j].CustomerID) { 

                    selvalue.push(dropData[j].EmployeeID); 

                    break; 

                } 

            } 

        return selvalue; 

    } 

    function write(args) { 

        var selIndex = []; 

        if (args.rowdata != undefined && typeof args.rowdata.EmployeeID[0] == "number") {   

            for (i = 0; i < args.rowdata["EmployeeID"].length; i++) 

                for (j = 0; j < dropData.length; j++) { 

                    if (args.rowdata["EmployeeID"][i] == dropData[j].EmployeeID) { 

                        selIndex.push(j); 

                        break; 

                    } 

                } 

        } 

        else if (typeof args.rowdata.EmployeeID.split(",")[0] == "string") { // for second time editng changes without saving it. 

            for (i = 0; i < args.rowdata["EmployeeID"].length; i++) 

                for (j = 0; j < dropData.length; j++) { 

                    if (args.rowdata["EmployeeID"].split(",")[i] == dropData[j].CustomerID) { 

                        selIndex.push(j); 

                        break; 

                    } 

                } 

        } 

        args.element.ejDropDownList({ width: "100%", dataSource: dropData, fields: { id: "EmployeeID", text: "CustomerID", value: "value" }, showCheckbox: true, allowMultiSelection: true, selectedItems: args.rowdata !== undefined ? selIndex : "" }); 

    } 

</script> 

 

Refer the below link for the modified sample.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/141189/ze/WebApplication11587301781  

 

Refer our help documentation for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#methods:setcellvalue  

 

https://help.syncfusion.com/api/js/ejgrid#events:cellsave  

 

https://help.syncfusion.com/api/js/ejgrid#events:beforebatchsave  

 

 

Please get back to us if you have further queries. 

    

 

Regards, 

Vignesh Natarajan 

[Chris]

Thanks for you help.  I just got handed a new urgent project, so I will have to leave this alone until January.

I did get to work on it a little this morning and I think it will work.  I'm not fully finished but it looks like I found a way to simplify it a bit.  I figured out a way to display it the text yet have the actual numerical data get sent to the controller.

Here is what I came up with for the read and cellsave methods:

    function read(args) {

        var selValues = args.ejDropDownList("getSelectedValue").split(",");
        if (selValues.length == 1) {
            if (selValues[0] == "") {
                selValues = null;
            }
        }

        return selValues;
    }

    function onCellSave(args) {
        if (args.columnName == "thecolumnname") {
            var ddl = $("#Gridnamethecolumnname").data("ejDropDownList");
            var textVal = ddl.getValue();

            setTimeout(function () {

                // this doesn't change the actual values of the cell, just the text

                args.cell[0].innerText = textVal;
            }, 0)

        }
    }

Thanks for your help!

Chris

[Vignesh Natarajan]

Hi Chris, 

Thank for the update. 

We will wait till your project get over and will be happy to assist you. 

Regards, 

Vignesh Natarajan