Hi, Team!
I need a multi-select field in a grid with a pair of (Id,Text).
A multi-select dropdown list works in a cell of the grid.
But my strings are not displaing in the cell of the Grid by selected Ids in the dropdown list.
Is this possible in current version 14.2.0.26 or in the future?
Regards
Lev
Test Code:
Index2.cshtml@(Html.EJ().Grid<object>("Grid")
.Datasource(((IEnumerable<object>)ViewBag.dataSource))
.AllowPaging()
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.EditSettings(edit => edit.AllowEditing().AllowAdding().AllowDeleting())//.EditMode(EditMode.Batch))
.Columns(col =>
{
col.Field("CustomerID").HeaderText("Customer ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Add();
col.Field("CustomerName").HeaderText("Customer Name").Add();
col.Field("OrderID").HeaderText("Order ID").Add();
col.Field("OrderList").HeaderText("Order List").
ForeignKeyField("value").
ForeignKeyValue("text").
DataSource((List<object>)ViewData["data"]).
EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Add();
})
)
<script type="text/javascript">
var dropData = @Html.Raw(Json.Encode(ViewData["data"]))
function create(args) {
return "<input>";
}
function read(args) {
// return args.ejDropDownList("getValue").split(","); // it is for simple string multi-select dropdown list
var selectedValues = args.ejDropDownList("getSelectedValue");
var selectedSplittedValues = selectedValues.split(",");
return selectedValues;
}
function write(args) {
var selIndex = [];
if (args.rowdata != undefined)
{
for (i = 0; i < args.rowdata["OrderList"].length; i++)
for (j = 0; j < dropData.length; j++){
if (args.rowdata["OrderList"][i] == dropData[j].value) {
selIndex.push(j);
break;
}
}
}
args.element.ejDropDownList({ width: "100%", dataSource: dropData, fields: { id: "value", text: "text", value: "value" }, showCheckbox: true, allowMultiSelection: true, multiSelectMode: ej.MultiSelectMode.VisualMode, selectedItems: args.rowdata !== undefined ? selIndex : "" });
}
</script>
HomeCotroller.cs public ActionResult Index2()
{
List<OrderData> order = new List<OrderData>();
List<OrderItem> list0 = new List<OrderItem>();
list0.Add(new OrderItem(1, "Cream"));
list0.Add(new OrderItem(2, "Milk"));
list0.Add(new OrderItem(3, "Eggs"));
list0.Add(new OrderItem(4, "Butter"));
list0.Add(new OrderItem(5, "Curd"));
list0.Add(new OrderItem(6, "yogurt"));
List<int> list = new List<int>();
list.Add(1); // Cream
list.Add(2); // "Milk"
list.Add(3); // "Eggs"
list.Add(4); // "Butter"
list.Add(5); // "Curd"
list.Add(6); // "yogurt"
List<int> list1 = new List<int>();
list1.Add(1); // Cream
list1.Add(3); // "Eggs"
list1.Add(5); // "Curd"
List<int> list2 = new List<int>();
list2.Add(1); // "Cream"
list2.Add(2); // "Milk"
list2.Add(4); // "Butter"
list2.Add(6); // "yogurt"
for (int i = 1; i < 9; i++)
{
order.Add(new OrderData(1, "Sam", 2, list));
order.Add(new OrderData(2, "Mercy", 4, list1));
order.Add(new OrderData(3, "Jim", 2, list));
order.Add(new OrderData(4, "Dev", 6, list2));
order.Add(new OrderData(5, "Jessi", 4, list1));
order.Add(new OrderData(6, "Cath", 6, list2));
}
ViewBag.dataSource = order;
var drop = list0.ToList();
var dropData = new List<object>();
foreach (var li in drop)
{
dropData.Add(new { value = li.ItemID, text = li.ItemName });
}
ViewData["data"] = dropData;
return View();
}
OrderItem.cs public class OrderItem
{
public int ItemID { get; set; }
public string ItemName { get; set; }
public OrderItem(int ItemID, string ItemName)
{
this.ItemID = ItemID;
this.ItemName = ItemName;
}
}
OrderData.cs public class OrderData
{
public int CustomerID { get; set; }
public string CustomerName { get; set; }
public int OrderID { get; set; }
public IEnumerable<int> OrderList { get; set; }
public OrderData(int CustomerID, string CustomerName, int OrderID, IEnumerable<int> OrderList)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.CustomerName = CustomerName;
this.OrderList = OrderList;
}
}
32
