1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Grid inline editing multiselect dropdown mode checkbox not displaying values

Grid inline editing multiselect dropdown mode checkbox not displaying values

Hello

I am using ASP.NET CORE EJ 2 version 16.1.0.37 (nuget package).

I have some problems including the Multiselect (mode checkbox) into a grid. I followed the example here:
but this does not work for me.

When I edit the row then the multiselect does not display any values (the dropdown button is not even available). But there are no errors in the console.

In my model I have a list of strings that I want to bind to the Multiselect.

Could you please provide me with an example where the model has a list of strings that can be selected in a grid by using the multiselect (mode checkbox)?


Kind regards
Phil

5 Replies
DR Dhivya Rajendran Syncfusion Team May 2, 2018 10:18 AM UTC

Hi Phil, 

Thanks for contacting Syncfusion support. 

We have analyzed your requirement and created a sample for your reference. In the below Grid sample we have created multiselect dropdown for shipCountry column using cell edit template. You can also achieve your requirement by using this way. 

Kindly refer the below code example and sample for more information. 

[index.cshtml] 
<div> 
    <ejs-grid id="Grid" dataSource="ViewBag.dataSource" load="load" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true"> 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 
        <e-grid-columns> 
            . . . . 
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>  
        </e-grid-columns> 
    </ejs-grid> 
</div> 
<script> 
    var city  
    function load() { 
        city = ["Denmark", "Brazil", "Germany"]  
        this.columns[4].edit = { 
            create: function () { 
                elem = document.createElement('input'); 
                return elem; 
            }, 
            read: function () { 
                return multiSelectObj.value; 
            }, 
            destroy: function () { 
                multiSelectObj.destroy(); 
            }, 
            write: function (args) { 
                multiSelectObj = new ej.dropdowns.MultiSelect({ 
                    dataSource: city, 
                }); 
                multiSelectObj.appendTo(elem); 
            } 
        } 
    } 
 
</script> 

 



Please get back to us if you need further assistance. 

Regards, 
R.Dhivya 


UN Unknown May 2, 2018 01:57 PM UTC

Thank you for this response.
Now I was able to add the MultiSelect to the Grid.

However, there is still a small thing missing.

I use the MultiSelect in "CheckBox" mode. When the Grid column has already some values, they should be checked when opening the MultiSelect. When I open it now, no values are already checked.

...
city = [{ "id": "Denmark", "name": "Denmark" }, { "id": "Brazil", "name": "Brazil" }, { "id": "Germany", "name": "Germany" }];
this.columns[3].edit = {
                create: function () {
                    elem = document.createElement('input');
                    return elem;
                },
                read: function (args) {
                    return multiSelectObj.value;
                },
                destroy: function () {
                    multiSelectObj.destroy();
                },
                write: function (args) {
                    multiSelectObj = new ej.dropdowns.MultiSelect({
                        dataSource: city,
                        placeholder: 'select...',
                        mode: 'CheckBox',
                        fields: {
                            value: "id",
                            text: "name"
                        }
                    });
                    multiSelectObj.appendTo(elem);
                }
            }
...

In my scenario the datasource is a list of objects with an id and a name property. The model that is passed to the grid has a List<string> as the data type for the column that uses the MultiSelect. The value of this column equals the id property that should be used in the MultiSelect.

How can I check the values in the MultiSelect (mode checkbox) that are already present in the Grid when editing?



DR Dhivya Rajendran Syncfusion Team May 3, 2018 01:09 PM UTC

Hi Phil, 

Thanks for your update. 

We have analyzed your requirement and created sample for your reference. In the below sample we have use multiselect dropdown with mode as checkbox. We have check and uncheck the multiselect checkboxes based on the value is already exist or not in Grid. We have achieve your requirement by using value property of multiselect dropdown. 

Kindly refer the below code example and documentation link for more information. 

<div> 
    <ejs-grid id="Grid" dataSource="ViewBag.dataSource" load="load" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true"> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" width="120"></e-grid-column> 
        . . . . . 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
<script> 
    var city; 
    var value1; 
    function load() { 
        city = [{ "id": "Denmark", "name": "Denmark" }, { "id": "Brazil", "name": "Brazil" }, { "id": "Germany", "name": "Germany" }]; 
        this.columns[4].edit = { 
            create: function () { 
                elem = document.createElement('input'); 
                return elem; 
            }, 
            read: function () { 
                return multiSelectObj.value; 
            }, 
            destroy: function () { 
                multiSelectObj.destroy(); 
            }, 
            write: function (args) { 
                finalValue = (Array.isArray(args.rowData.ShipCountry)) ? args.rowData.ShipCountry : [args.rowData.ShipCountry]; 
                multiSelectObj = new ej.dropdowns.MultiSelect({ 
                    mode: 'CheckBox', 
                    dataSource: city, 
                    fields: { 
                        value: "id", 
                        text: "name" 
                    }, 
                    value: finalValue, 
                    showSelectAll: true, 
                    // set true for enable the dropdown icon. 
                    showDropDownIcon: true, 
                }); 
                multiSelectObj.appendTo(elem); 
            } 
        } 
    } 
 
</script> 


Regards, 
R.Dhivya 


UN Unknown May 4, 2018 11:51 AM UTC

Thank you very much for your help.
This solution works perfectly fine.

Update
It did not work when adding new records.
I needed to change the line
value1 = (Array.isArray(args.rowData.ShipCountry)) ? args.rowData.ShipCountry : [args.rowData.ShipCountry];
to
value1 = (Array.isArray(args.rowData.ShipCountry)) ? args.rowData.ShipCountry : [];

Now everything works perfectly fine.

DR Dhivya Rajendran Syncfusion Team May 7, 2018 09:00 AM UTC

Hi Phil, 

Thanks for your update. 

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

Please get back to us if you need further assistance. 

Regards, 
R.Dhivya 


Loader.
Up arrow icon