Multi-select DropDownList in Grid
5 Replies
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
Refer our help documentation for your reference
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
SIGN IN To post a reply.
