We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use multi-select field inside a Grid and ForeignKeyField,ForeignKeyValue

Thread ID:





125020 Jul 15,2016 04:02 AM UTC Jul 18,2016 12:09 PM UTC ASP.NET MVC 1
Tags: Grid
Lev Kadisov
Asked On July 15, 2016 04:02 AM UTC

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 or in the future?



Test Code:

             .ToolbarSettings(toolbar =>
                                 toolbar.ShowToolbar().ToolbarItems(items =>
                            .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) {
        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 : "" });


        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();


    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;

    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;               

Prasanna Kumar Viswanathan [Syncfusion]
Replied On July 18, 2016 12:09 PM UTC

Hi Kadisov, 

Thanks for contacting Syncfusion support. 

We will create a custom sample  for your requirement and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.  

Prasanna Kumar N.S.V 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon