Match Values to Their Corresponding Text in Grid Column

[Ssekamatte James]

(This is an EJ1 ASP.NET Query)

Dear Syncfusion, 

I am saving multiple records as strings in numeric format in a column (shown by RecordsSaved image in attachment). I want these records to be displayed with their actual text from the clm_PickupPoint shown in PickUpPoint image in attachment. For example 4,3 should display as Lusanja,Kigo but the grid does not display any thing.

How can I attain this in my grid ? 

Below is how I am initializing the Code with the Foreign Key Property:

 col.Field("PickupPoint").Width(120).HeaderText("Pick Up Point").ForeignKeyField("PuPCode").ForeignKeyValue("PuPDescription").DataSource((IEnumerable<Object>)ViewBag.PuP).Add();

The table I am referring to to pick the text allocated to the saved values is called pclm_PickupPoint and consists of two columns (PuPCode and PuPDescription) as shown in the attachment.

Attachment: PuP_deb33e9.rar

[Padmavathy Kamalanathan]

Hi Ssekamatte,

Thanks for contacting Syncfusion Forums.

Query: I am saving multiple records as strings in numeric format in a column. I want these records to be displayed with their actual text

Based on your requirement, we bound the RolesID  column for the Grid with values “1,2” which is the list of the RolesID (1,2,3…) with the corresponding Roles (“Admin, Manager”). Refer to the following table structure.

[Controller]

     List<Roles> emp = new List<Roles>();  

        List<Orders> Ord = new List<Orders>();  

  

  

        public ActionResult Index()  

        {  

            BindDataSource();  

            ViewBag.dataSource = Ord;  

            ViewBag.dropData = emp;  

            return View();  

        }  

  

        private void BindDataSource()  

        {  

            //Column DataSource  

            emp.Add(new Roles(1, "Tester"));  

            emp.Add(new Roles(2, "Engineer"));  

           ---- 

            int code = 10000;  

            for (int i = 1; i <= 9; i++)  

            {  

                string str = i.ToString() + "," + (i + 1).ToString();  

                //Main dataSource for Grid  

                Ord.Add(new Orders(code + 1, "ALFKI", i, 2.3 * i, new DateTime(1991, 05, 15), "Berlin" + i, str));  

                code += 5;  

            }  

Here Ord will be bound to the Grid whereas the emp will be bind to the Column RoleID. To render these type of Relational strings with the string concatenation, you can use the queryCellInfo event. Based on the values of RoleID (“1,2”), corresponding values (Roles) will be retrieved from the column dataSource and place them in the cell. Refer to the following code example.

@(Html.EJ().Grid<object>("Grid").Datasource((IEnumerable<object>)ViewBag.dataSource)  

            .AllowPaging().EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })  

              .ClientSideEvents(eve =>  

              {  

                  eve.QueryCellInfo("queryCellInfo");  

              })  

            .Columns(col =>  

            {  

                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add();  

                col.Field("CustomerID").HeaderText("Customer ID").Add(); 
 

                col.Field("EmployeeID").HeaderText("Employee ID").Add();  

                col.Field("RoleID")  

                    .EditTemplate(a =>  

                    {  

                        a.Create("create").Read("read").Write("write");  

                    })  

                    .DataSource(ViewBag.dropData).HeaderText("Roles").Add();  

            }))  

 

<script>  

  

    function create() {  

        return "<input>";  

    }  

    function read(args) {  

        var data = args.ejDropDownList("getSelectedValue");  

  

        if (!data)  

            return {};  

  

        return data;  

    }  

    function write(args) {  

        var val = ej.isNullOrUndefined(args.rowdata["RoleID"]) ? "" : args.rowdata["RoleID"];  

        var datas = ej.DataManager(args.column[3].dataSource) 

                    .executeLocal(new ej.Query().where("RoleID", "equal", val));  

        args.element.ejDropDownList({  

            dataSource: args.column[3].dataSource,  

            fields: { text: "Role", value: "RoleID" },  

            showCheckbox: true,  

            width: "100%",  

            value: val  

        });  

    }  

  

    function queryCellInfo(args) {  

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

            var field = args.column.field, merge = false; preds = [];  

            var txt = args.data.RoleID.split(",");  

            var predicate = new ej.Predicate(field, "equal", ej.parseInt(txt[0]));  

            for (var tx = 1; tx < txt.length; tx++) {  

                preds.push(new ej.Predicate(field, "equal", txt[tx]));  

                merge = true;  

            }  

            if (merge) {  

                preds.unshift(predicate);  

                predicate = ej.Predicate.or(preds);  

            }  

            var datas = ej.DataManager(args.column.dataSource).executeLocal(new ej.Query().where(predicate));  

            var str = "";  

            for (var s = 0; s < datas.length; s++) {  

                str = s == 0 ? str.concat(datas[s].Role) : str.concat("," + datas[s].Role)  

            }  

            $(args.cell).text(str);  

        }  

    }  

</script>  

Likewise, we can handle this string concatenation for editing using the EditTemplate of the Grid columns.

We have created sample for your reference. You can download the same from the below link,

https://www.syncfusion.com/downloads/support/forum/156956/ze/MVCSample-156956853235497

Please check the below screenshot,

Kindly get back to us for further assistance.

Regards,

Padmavathy Kamalanathan