[CLOSED] Combox Box not displaying selected name, inside the grid

[PriceRightHTML5team]

Hi,

I have a simple combo box which is populated with country list, inside the grid, the issue i am facing is when i select a combo box item it display value in the grid instead of text.
For Example Say if i select a country "Austria", grid displays its value "1", instead of text "Austria".

Here is the snap shot:



Here is my Sample Code:

//Model:

        public class GridWithComboBoxDTO
        {
            public int FromCountryID { get; set; }

            public string FromCountry { get; set; }

            public int ToCountryID { get; set; }

            public string ToCountry { get; set; }

            public int Cost { get; set; }
        }

        public class CountryDTO
        {
            public int CountryId { get; set; }
            public string CountryName { get; set; }
        }

//Controller:

 public ActionResult GetCountryData()
        {
            List<CountryDTO> lst = new List<CountryDTO>();

            CountryDTO country = new CountryDTO();
            country.CountryId = 1;
            country.CountryName = "Austria";
            lst.Add(country);

            country = new CountryDTO();
            country.CountryId = 2;
            country.CountryName = "Belguim";
            lst.Add(country);

            country = new CountryDTO();
            country.CountryId = 3;
            country.CountryName = "India";
            lst.Add(country);

            country = new CountryDTO();
            country.CountryId = 4;
            country.CountryName = "USA";
            lst.Add(country);

            return this.Store(lst);
        }

        public ActionResult GetGridWithComboBoxData()
        {
            List<GridWithComboBoxDTO> lst = new List<GridWithComboBoxDTO>();
          
            GridWithComboBoxDTO obj = new GridWithComboBoxDTO();
            obj.FromCountryID = 1;
            obj.FromCountry = "Austria";
            obj.ToCountryID = 2;
            obj.ToCountry = "Belguim";
            obj.Cost =1010;
            lst.Add(obj);

            obj = new GridWithComboBoxDTO();
            obj.FromCountryID = 1;
            obj.FromCountry = "Austria";
            obj.ToCountryID = 3;
            obj.ToCountry = "India";
            obj.Cost = 1020;
            lst.Add(obj);
           
            return this.Store(lst);
        }

        public ActionResult GridWithComboBox()
        {
            return View();
        }

//View:

@{
    ViewBag.Title = "Cell Editing - Ext.NET MVC Examples";
    var X = Html.X();
   
}


@(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig))

    

    @(
 Html.X().GridPanel()
            .Width(450)
            .Height(200)
            .Title("Country Matrix")
            .Frame(true)
            .Store(
                Html.X().Store()
                    .Proxy(
                        Html.X().AjaxProxy()
                            .Url(Url.Action("GetGridWithComboBoxData","Grid"))
                            .Reader(
                                Html.X().JsonReader().Root("data")
                            )
                    )
                    .Model(
                        Html.X().Model()
                            .Name("modelCountryMatrix")
                            .Fields(
                                Html.X().ModelField().Name("FromCountry").Type(ModelFieldType.String),
                                Html.X().ModelField().Name("ToCountry").Type(ModelFieldType.String),
                                Html.X().ModelField().Name("Cost").Type(ModelFieldType.Int)
                            )
                    )
                  
            )
            .ColumnModel(
                Html.X().Column()
                    .Text("From Country")
                    .DataIndex("FromCountry")
                    .Width(150)
                    .Editor(
                          Html.X().ComboBox()
                            .TypeAhead(true)
                            .SelectOnTab(true)
                            .DisplayField("CountryName")
                            .ValueField("CountryId")
                            .Store(
                                Html.X().Store()
                                    .Proxy(
                                        Html.X().AjaxProxy()
                                            .Url(Url.Action("GetCountryData"))
                                            .Reader(
                                                Html.X().JsonReader().Root("data")
                                            )
                                    )
                                    .Model(
                                        Html.X().Model()
                                            .Name("modelCountry1")
                                            .Fields(
                                                Html.X().ModelField().Name("CountryId").Type(ModelFieldType.Int),
                                                Html.X().ModelField().Name("CountryName").Type(ModelFieldType.String)
                                            )
                                    )
                  
                            )
                    ),

                Html.X().Column()
                    .Text("To Country")
                    .DataIndex("ToCountry")
                    .Width(150)
                    .Editor(
                         Html.X().ComboBox()
                            .TypeAhead(true)
                            .SelectOnTab(true)
                            .DisplayField("CountryName")
                            .ValueField("CountryId")
                            .Store(
                                Html.X().Store()
                                    .Proxy(
                                        Html.X().AjaxProxy()
                                            .Url(Url.Action("GetCountryData"))
                                            .Reader(
                                                Html.X().JsonReader().Root("data")
                                            )
                                    )
                                    .Model(
                                        Html.X().Model()
                                            .Name("modelCountry2")
                                            .Fields(
                                                Html.X().ModelField().Name("CountryId").Type(ModelFieldType.Int),
                                                Html.X().ModelField().Name("CountryName").Type(ModelFieldType.String)
                                            )
                                    )
                  
                            )
                    ),
                    

                Html.X().NumberColumn()
                    .Text("Cost")
                    .DataIndex("Cost")
                    .Editor(
                         Html.X().NumberField()
                            
                            )
                    .Width(100),
                    
                     Html.X().ImageCommandColumn()
                    .Width(30)
                    .Commands(
                        Html.X().ImageCommand()
                            .Icon(Icon.Decline)
                            .ToolTip(t =>
                            {
                                t.Text = "Delete Row";
                            })
                            .CommandName("delete")
                    )
                    .Listeners(l => {
                        l.Command.Handler = "this.up('gridpanel').store.removeAt(recordIndex);";
                    })

             
            )
            .SelectionModel(
                Html.X().CellSelectionModel()
            )
            .Plugins(
                Html.X().CellEditing().ClicksToEdit(1)
            )
    )

Thanks

[Daniil]

Hi @PriceRightHTML5team,

You should use a Renderer for the Column. Please look at the Department column in this example.
https://examples2.ext.net/#/GridPane...Field_Mapping/