PDA

View Full Version : [CLOSED] ComboBox cascading in Grid Panel



MTSI
Mar 12, 2013, 12:12 PM
We need to cascade state and city combo box in grid panel.
The functionality is just a grid panel with two columns namely state and city,
in this we need to load city based on the state.
Please provide simple example code.

Daniil
Mar 12, 2013, 4:20 PM
Hi @MTSI,

This should help you to start.
http://examples2.ext.net/#/Form/ComboBox/Linked_Combos_In_Grid/

MTSI
Mar 14, 2013, 2:17 PM
Hi @MTSI,

This should help you to start.
http://examples2.ext.net/#/Form/ComboBox/Linked_Combos_In_Grid/

Hi,

I am using MVC 3 Razor View Engine.
I am having two combo boxes state and city in a grid panel.
based on state i have to load the city.
I am not using edit mode. the combo boxes are always showing in grid.
When I change the state drop down I should reload the city (please see the attached image for more information).

or is there any possibility to find the combo box control in a selected row or selected store record?

Thanks.

Daniil
Mar 14, 2013, 4:56 PM
Example

<Select Handler="var value = records[0].get(this.valueField), // a selected value of the current ComboBox
column2 = App.ComponentColumn2, // a column with another ComboBox
rowIndex = this.column.rowIndex, // an index of the current row
comboBox2 = column2.getComponent(rowIndex); // a ComboBox of another column in the same row

comboBox2.setValue(value); // here you should organize loading" />

MTSI
Mar 15, 2013, 10:10 AM
Example

<Select Handler="var value = records[0].get(this.valueField), // a selected value of the current ComboBox
column2 = App.ComponentColumn2, // a column with another ComboBox
rowIndex = this.column.rowIndex, // an index of the current row
comboBox2 = column2.getComponent(rowIndex); // a ComboBox of another column in the same row

comboBox2.setValue(value); // here you should organize loading" />


Thanks Daniil. Its working.
I am having one more issue. The corresponding stateid and cityid is not selecting in the gridpanel combobox and it shows the id value and even the corresponding id is not selected in the combobox
(Please see the screen shot for more information)
I have enclosed the code below.


@Html.X().Hidden().ID("CoverageAreaList")
@(

Html.X().GridPanel()
.ID("gvCoverageArea")
.Title("Coverage Area<span class='red'>*</span>")
.Width(500)
.Height(200)
.Listeners(listen => { listen.SelectionChange.Fn = "selectionchange"; })
.Store(Html.X().Store().ID("CoverageAreaStore")
.Model(Html.X().Model().IDProperty("RowId")
.Fields(
new ModelField("StateId", ModelFieldType.Int) { Mapping = "StateId" },
new ModelField("CityId", ModelFieldType.Int) { Mapping = "CityId" },
new ModelField("StateName", ModelFieldType.Int) { Mapping = "StateName" },
new ModelField("CityName", ModelFieldType.Int) { Mapping = "CityName" },
new ModelField("RowId"),
new ModelField("Id", ModelFieldType.Int)
)
)
.DataSource(new CoverageAreaExtension().Parse(Model.SupplierCovera geList))
)
.ColumnModel(
Html.X().ComponentColumn().ID("StateColumn")
.Editor(true)
.Width(200)
.DataIndex("StateId")
.Flex(1)
.Text("State")
.Selectable(true)
.Component(Html.X().ComboBox()
.ID("StateComboBox")
.Editable(false)
.QueryMode(DataLoadMode.Remote)
.TriggerAction(TriggerAction.All)
.SelectOnFocus(true)
.TypeAhead(true)
.QueryMode(DataLoadMode.Local)
.DisplayField("name")
.LabelSeparator("")
.ValueField("id")
.EmptyText("-- Select State --")
.ValueNotFoundText("Loading...")
.Width(190)
.Store(Html.X().Store()
.AutoLoad(true)
.Model(Html.X().Model()
.IDProperty("Id")
.Fields(
new ModelField("id", ModelFieldType.String) { Mapping = "Id" },
new ModelField("name", ModelFieldType.String) { Mapping = "Name" }
)
)
.Proxy(Html.X()
.AjaxProxy()
.Url(Url.Content("~/AjaxData/GetStates/")
)
.Reader(Html.X().JsonReader().Root("data")))
)
.Listeners(listen =>
{
listen.Select.Fn = "onSelectChange";
})
)

,
Html.X().ComponentColumn().ID("CityColumn")
.Editor(true)
.Width(200)
.DataIndex("CityId")
.Flex(1)
.Text("City")
.Component(Html.X().ComboBox()
.ID("cityComboBox")
.Editable(false)
.QueryMode(DataLoadMode.Remote)
.TriggerAction(TriggerAction.All)
.SelectOnFocus(true)
.TypeAhead(true)
.QueryMode(DataLoadMode.Local)
.DisplayField("name")
.LabelSeparator("")
.ValueField("id")
.EmptyText("-- Select City --")
.ValueNotFoundText("Loading...")
.Width(190)
.Listeners(listen => { listen.BeforeQuery.Fn = "onCityQuery"; })
.Store(Html.X().Store()
.AutoLoad(false)

.Model(Html.X().Model()
.IDProperty("Id")
.Fields(
new ModelField("id", ModelFieldType.String) { Mapping = "Id" },
new ModelField("name", ModelFieldType.String) { Mapping = "Name" }
)
)
.Proxy(Html.X()
.AjaxProxy()
.Url(Url.Content("~/AjaxData/GetAllCitiesByStateIdAjaxData"))
.Reader(Html.X().JsonReader().Root("data")))
.Parameters(ps =>
ps.Add(new StoreParameter("stateid", "getStateId()", ParameterMode.Raw))
)
)
)
,
Html.X().CommandColumn()
.Align(Alignment.Center)
.Width(50)
.Commands(
Html.X().GridCommand()
.CommandName("Delete")
.Icon(Icon.Cross)
.ToolTip(tt => tt.Text = "Remove")
)
.Listeners(ls => ls.Command.Fn = "RemoveCoverageArea")
)
.BottomBar(gvBottomBar =>
{
gvBottomBar.Add(Html.X().Toolbar().ID("CoverageAreaToolbar").Items(tools =>
{
tools.Add(Html.X().Button().Text("Add Additional Coverage Area").Icon(Ext.Net.Icon.Add).Listeners(len =>
{
len.Click.Handler = "AddCoverageArea();";
}));
tools.Add(Html.X().Button().Text("Save Coverage Area").Icon(Ext.Net.Icon.Add).Listeners(len =>
{
len.Click.Handler = "saveCoverageArea();";
}));
})
);
})

)

Daniil
Mar 15, 2013, 11:10 AM
Thank you for the screenshot. But, unfortunately, the code that you provided is not enough to reproduce the problem.

For example, I can't see the actions and any JavaScript. I think it is an essential part to get the sample launched.

Please provide a runnable test case and detailed steps to reproduce.