PDA

View Full Version : [CLOSED] Combox Box not displaying selected name, inside the grid



PriceRightHTML5team
Jun 06, 2014, 12:36 PM
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:
http://forums.ext.net/attachment.php?attachmentid=12221&stc=1


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
Jun 06, 2014, 1:02 PM
Hi @PriceRightHTML5team,

You should use a Renderer for the Column. Please look at the Department column in this example.
http://examples2.ext.net/#/GridPanel/Data_Presentation/Editor_Field_Mapping/