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

  1. #1

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

    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
    Attached Thumbnails Click image for larger version. 

Name:	Untitled.png 
Views:	31 
Size:	6.0 KB 
ID:	12221  
    Last edited by Daniil; Jun 10, 2014 at 5:18 AM. Reason: [CLOSED]
  2. #2
    Hi @PriceRightHTML5team,

    You should use a Renderer for the Column. Please look at the Department column in this example.
    http://examples2.ext.net/#/GridPanel...Field_Mapping/
    Last edited by Daniil; Jun 06, 2014 at 12:34 PM.

Similar Threads

  1. Replies: 14
    Last Post: Apr 27, 2016, 12:49 AM
  2. Replies: 18
    Last Post: Mar 13, 2013, 10:40 AM
  3. Replies: 3
    Last Post: Mar 13, 2013, 8:39 AM
  4. Ext.net Combox Selected item.value in Ext2.0
    By OSSAGHO in forum 2.x Help
    Replies: 5
    Last Post: Aug 08, 2012, 11:04 AM
  5. Replies: 0
    Last Post: Feb 23, 2012, 12:42 PM

Posting Permissions