PDA

View Full Version : [CLOSED] Unable to populate combo2 on onchange event of combo1



alscg
Dec 12, 2013, 12:22 PM
Hi ,

I have taken a ext.net form panel having multiple combos .
I want to populate combo box 2 on change event of combo box 1.
On change event of combo box 1,I am sending selectedvalue of combo box 1 to controller to get data for combo box 2.
Please refer below code.


@(Html.X().FormPanel()
.ID("LeftSideFormPanel")
.BodyStyle("background:#eee !important; padding:0px 15px;")
.Border(false)
.ButtonAlign(Alignment.Center)
.FieldDefaults(def =>
{
def.MsgTarget = MessageTarget.Under;
def.LabelSeparator = "";
def.LabelAlign = LabelAlign.Top;
def.AutoDataBind = true;
def.EnforceMaxLength = true;
})
.Items
(
Html.X().ComboBox().FieldCls("comboField").EmptyText("All").Flex(1).ID("combo1").FieldLabel("State").Margin(5)
.Items(from state in Model.States select new Ext.Net.ListItem { Text = state.Name, Value= state.ID.ToString()})
.Listeners(ls=>ls.Change.Fn="ChangeInsurer") ,

Html.X().ComboBox().FieldCls("comboField").EmptyText("All").Flex(1).FieldLabel("Insurer").ID("combo2").Margin(5)
.Items(from insurer in Model.Insurers select new Ext.Net.ListItem { Text = insurer.Name, Value= insurer.ID.ToString()})
,
Html.X().ComboBox().FieldCls("comboField").EmptyText("All").Flex(1).FieldLabel("Category").ID("comboCategory").Margin(5)
.Items(from category in Model.Categories select new Ext.Net.ListItem { Text = category.Name, Value= category.ID.ToString()})
,
Html.X().ComboBox().FieldCls("comboField").EmptyText("All").Flex(1).FieldLabel("Class").ID("comboClass").Margin(5)
.Items(from cls in Model.Classes select new Ext.Net.ListItem { Text = cls.Name, Value= cls.ID.ToString()})
,
Html.X().Button().Text("Submit").Cls("btn btn-primary").StyleSpec("float:right").Handler("SubmitCriteria")
)
)


There is a javascript function - 'ChangeInsurer'


var ChangeInsurer = function (record) {
$.ajax({
url: '@Url.Action("GetInsurerByState","State")',
datatype: "json",
type: "POST",
data: { state: record.value },
success: function (data) {
var store = App.combo2.getStore();
App.combo2.reset();
store.clearData();
App.combo2.getStore().Add(data);
// store.loadData(data);
},
failure: function (data) {
}
});
};


I want to assign store from controller or value from controller to combo2.


public ActionResult GetInsurerByState(string state)
{
FilterDTO filterdto = new FilterDTO();
filterdto.Insurers = HEStateService.GetInsurerByStateId(Convert.ToInt32 (state)).TheEntity.Insurers;
return this.Store(filterdto.Insurers);
}


My query is how to assign that store to combo2 in javascript?
suggest any other possible way to achieve above.

Thanks.

Daniil
Dec 12, 2013, 3:17 PM
Hi @alscg,

Well, this

this.Store(filterdto.Insurers)
is supposed to be used with a Store's Proxy requests.

I think you can return a common JSON result.

Anyway, it should not break anything.

I see this in your code:

// store.loadData(data);

Indeed, it looks that you should use the loadData method in your scenario.

alscg
Dec 13, 2013, 5:24 AM
Hi @alscg,

Well, this

this.Store(filterdto.Insurers)
is supposed to be used with a Store's Proxy requests.

I think you can return a common JSON result.

Anyway, it should not break anything.

I see this in your code:

// store.loadData(data);

Indeed, it looks that you should use the loadData method in your scenario.

I have tried with your inputs above but unfortunately not resolved my problem.
I used
store.loadData(action.result); ..(which is json result having list of records ).
The combo2 populating without data in it. I think I missed something in above coding.

Thanks

Daniil
Dec 13, 2013, 5:32 AM
Please try

alert(Ext.encode(action.result));
and post the displayed test here.

alscg
Dec 13, 2013, 6:12 AM
Please try

alert(Ext.encode(action.result));
and post the displayed test here.


Hi Daniil,

the displayed test result is -


[{"ID":11,"Name":"Insurance Company"},
{"ID":12,"Name":"Blue Cross"},
{"ID":68,"Name":"New India Insurer"},
{"ID":69,"Name":"Test"},
{"ID":74,"Name":"Brand new Insurer"}]


javascript is -


var ChangeInsurer = function (record) {
Ext.net.directRequest({
url: '@( Url.Action("GetInsurerByState", "State"))',
extraParams: { state: record.value },
success: function (form,action) {
alert(Ext.encode(action));
var store = App.comboInsurer.getStore();
store.loadData(action);
},
failure: function (data) {
}
});
};

Daniil
Dec 13, 2013, 11:25 AM
To apply this data a ComboBox must have ValueField="ID" and DisplayField="Name". Please not that it is not possible to change those settings on the fly.

alscg
Dec 13, 2013, 11:51 AM
To apply this data a ComboBox must have ValueField="ID" and DisplayField="Name". Please not that it is not possible to change those settings on the fly.

Thanks Daniil.
I have tried with Ajax Proxy as per ext.net example of AjaxLinkedCombos and it worked as per our requirement.