PDA

View Full Version : [CLOSED] Ajax Linked Combobox SetValue()



matrixwebtech
Aug 12, 2014, 6:03 AM
I take an example of ajax linked combo in MVC Razor.No problem in Load but when I set value click on Set button,both city and country field get blank.
may be I am doing some mistake,please suggest me how do I do this.

View


@model System.Collections.IEnumerable



@Html.X().ResourceManager()
@(Html.X().FormPanel().ID("f").Items

(
Html.X().ComboBox()
.ID("ComboBoxCountry")
.Editable(false)
.QueryMode(DataLoadMode.Local)
.TriggerAction(TriggerAction.All)
.EmptyText("Select a country")
.DisplayField("Name")
.ValueField("Id")
.FieldLabel("Country")

.ForceSelection(true)
.Listeners(ls =>
{
ls.Select.Handler = "App.ComboBoxCity.clearValue(); App.ComboBoxCity.getStore().load()";
})
.Store(Html.X().Store()


.Model(Html.X().Model()
.IDProperty("Id")
.Fields(

Html.X().ModelField().Name("Id").Type(ModelFieldType.String),
Html.X().ModelField().Name("Name").Type(ModelFieldType.String)
)

)
.DataSource(ViewBag.country)

)



,
Html.X().ComboBox()
.ID("ComboBoxCity")
.TypeAhead(true)
.QueryMode(DataLoadMode.Local)
.ForceSelection(true)
.FieldLabel("City")
.TriggerAction(TriggerAction.All)
.DisplayField("name")
.ValueField("id")
.EmptyText("Loading...")
.ValueNotFoundText("Loading...")
.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.Action("GetCities"))
.Reader(Html.X().JsonReader().Root("data"))
)
.Parameters(ps =>
ps.Add(new StoreParameter("country", "App.ComboBoxCountry.getValue()", ParameterMode.Raw))
)
.Listeners(ls =>
ls.Load.Handler = @"var combo = App.ComboBoxCity;
combo.setValue(records[0].get(combo.valueField));"
)
)
)
.Buttons
(
Html.X().Button().Text("set")
.DirectEvents(de =>
{
de.Click.FormID = "f";
de.Click.Action = "set";
})
)
)



CONTROLLER


public ActionResult Index()
{
loadcountry();
return View();
}

public ActionResult GetCities(string country)
{
return this.Store(Cities(country));
}

public void loadcountry()
{
List<object> country = new List<object>(10);

country.Add(new { Id = 1, Name = " Country 1" });
country.Add(new { Id = 2, Name = " Country 2" });

ViewBag.country = country;
}

public object Cities(string country)
{

List<object> cities = new List<object>(10);
for (int i = 1; i <= 10; i++)
{
cities.Add(new { Id = i.ToString() + i,Name= i.ToString()+" City of "+country });
}

return cities;


}

public DirectResult set()
{
X.GetCmp<ComboBox>("ComboBoxCountry").SetValue(1);
X.GetCmp<ComboBox>("ComboBoxCity").SetValue(1);
return this.Direct();
}

Daniil
Aug 12, 2014, 1:54 PM
Hi @matrixwebtech,

You are using a ModelFieldType.String, so, you should use a string "1" instead of a number 1.

Also, I think, you should avoid setting a value of the second ComboBox since it depends on the first one.

So, I would use this code:

public DirectResult Set()
{
X.GetCmp<ComboBox>("ComboBoxCountry").SetValueAndFireSelect("1");

return this.Direct();
}

matrixwebtech
Aug 12, 2014, 3:25 PM
I cant avoid setting a value of the second ComboBox since it depends on the first one,because I have 2 fields like CountryID and CityID I save value from combobox and when I want to view I need to set value each combo from data base?please suggest me what to do?

Daniil
Aug 13, 2014, 8:59 AM
Then you should preload the data to a ComboBox's Store before setting a value.

matrixwebtech
Aug 13, 2014, 10:33 AM
Is Preload the linked combo is only option?

I change ComboBoxCountry from Setvalue() property to SetValueAndFireSelect


X.GetCmp<ComboBox>("ComboBoxCountry").SetValueAndFireSelect("1");

and change



public DirectResult set()
{
X.GetCmp<ComboBox>("ComboBoxCountry").SetValueAndFireSelect("1");
GetCities("1");
X.GetCmp<ComboBox>("ComboBoxCity").SetValue("2");
return this.Direct();
}

and called GetCities("1"); which load ComboBoxCity city again,are you talking about this preload?but ComboBoxCity not set with value=2.

I think this is very common situation,which I have to handle.
Suppose I have 3 comboboxes,C1,C2 and C3.Initially C1 is contain values,on basis of C1 selection C2 populate, and then C3 populate on C2 selection.
all value save in database.when when I again come to this page I need to populate combos with database value.

Daniil
Aug 13, 2014, 1:44 PM
By "preload" I meant

comboBox.getStore().load();
and setting a value after a load request.

matrixwebtech
Aug 13, 2014, 3:30 PM
Hi Daniil I try do as per your suggestion but fail,I try set "preload"


comboBox.getStore().load();

Using button click Listeners and DirectEvents,


.Listeners(l => { l.Click.Handler = "App.ComboBoxCity.getStore().load()"; })

and


de.Click.Before = "App.ComboBoxCity.getStore().load()";

I post sample code after changing as per your suggestion,please check.I comment Button de.Click.Before
event,if you required this please uncomment.

View


@model System.Collections.IEnumerable


@Html.X().ResourceManager()
@(Html.X().FormPanel().ID("f").Items

(
Html.X().ComboBox()
.ID("ComboBoxCountry")
.Editable(false)
.QueryMode(DataLoadMode.Local)
.TriggerAction(TriggerAction.All)
.EmptyText("Select a country")
.DisplayField("Name")
.ValueField("Id")
.FieldLabel("Country")

.ForceSelection(true)
.Listeners(ls =>
{
ls.Select.Handler = "App.ComboBoxCity.clearValue(); App.ComboBoxCity.getStore().load()";
})
.Store(Html.X().Store()


.Model(Html.X().Model()
.IDProperty("Id")
.Fields(

Html.X().ModelField().Name("Id").Type(ModelFieldType.String),
Html.X().ModelField().Name("Name").Type(ModelFieldType.String)
)

)
.DataSource(ViewBag.country)

)



,
Html.X().ComboBox()
.ID("ComboBoxCity")
.TypeAhead(true)
.QueryMode(DataLoadMode.Local)
.ForceSelection(true)
.FieldLabel("City")
.TriggerAction(TriggerAction.All)
.DisplayField("name")
.ValueField("id")
.EmptyText("Loading...")
.ValueNotFoundText("Loading...")
.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.Action("GetCities"))
.Reader(Html.X().JsonReader().Root("data"))
)
.Parameters(ps =>
ps.Add(new StoreParameter("country", "App.ComboBoxCountry.getValue()", ParameterMode.Raw))
)
.Listeners(ls =>
ls.Load.Handler = @"var combo = App.ComboBoxCity;
combo.setValue(records[0].get(combo.valueField));"
)
)
)
.Buttons
(
Html.X().Button().Text("set")
.Listeners(l => { l.Click.Handler = "App.ComboBoxCity.getStore().load()"; })
.DirectEvents(de =>
{
// de.Click.Before = "App.ComboBoxCity.getStore().load()";
de.Click.FormID = "f";
de.Click.Action = "set";

})
)
)

Controller


public ActionResult Index()
{
loadcountry();
return View();
}

public ActionResult GetCities(string country)
{
return this.Store(Cities(country));
}

public void loadcountry()
{
List<object> country = new List<object>(10);

country.Add(new { Id = 1, Name = "Country 1" });
country.Add(new { Id = 2, Name = "Country 2" });

ViewBag.country = country;
}

public object Cities(string country)
{

List<object> cities = new List<object>(10);
for (int i = 1; i <= 10; i++)
{
cities.Add(new { Id = i.ToString() + i, Name = i.ToString() + " City of " + country });
}

return cities;


}

public DirectResult set()
{
X.GetCmp<ComboBox>("ComboBoxCountry").SetValueAndFireSelect("1");
X.GetCmp<ComboBox>("ComboBoxCity").SetValue("2");
return this.Direct();
}

Daniil
Aug 14, 2014, 5:02 AM
There are two issues in your code, at least.

1. I don't think you should use .SetValueAndFireSelect() if you need .SetValue() for the second ComboBox. The Select event of the first ComboBox causes loading of the Store of the second ComboBox. And you load it manually to preload the data before .SetValue(). Too many load requests. It might break the things.

2. So, you call .load() in a Click listener of a DirectEvent's Before. It doesn't guarantee that it loads the data before a .SetValue() call, because both the operations (a load request and a set DirectEvent) are asynchronous. You should use a .load()'s callback.

matrixwebtech
Aug 14, 2014, 7:20 AM
thanks for reply ,I understand the issues which you explain,but not able to do

.load()'s callback.can you please provide some sample ,so that I can solve my problem.because 90% page in my application has that kind of functionality.

I found a post http://forums.ext.net/showthread.php?16523-CLOSED-Is-Store-Loading-Problem,but I dont understand in store where and how I mention the callback function.
I try some thing like bellow.
Add in ComboBoxCity store Listeners


ls.Load.Fn = "callback";


<script>
var callback = function (records, operation, success) {

App.ComboBoxCity.setValue(records);

}

</script>
and change


public DirectResult set()
{
X.GetCmp<ComboBox>("ComboBoxCountry").SetValue("1");
X.GetCmp<ComboBox>("ComboBoxCity").SetValue("2");

return this.Direct();
}

but not working

Daniil
Aug 14, 2014, 3:05 PM
I would try this:

public DirectResult Set()
{
X.GetCmp<ComboBox>("ComboBoxCountry").SetValue("1");

var store = X.GetCmp<Store>("StoreCity"); // Set .ID("StoreCity") for the Store

store.LoadProxy(new
{
callback = new JRawValue("function() { App.ComboBoxCity.setValue('2'); }")
});

return this.Direct();
}

matrixwebtech
Aug 14, 2014, 3:31 PM
Thanks for your reply Daniil,but may be I am doing some mistake so that I cant make this this working.I change function as per your sample,but unfortunately this is not working...I am sure that I do something wrong ,but I can't find this out.


VIEW



<script>
var callback = function (records, operation, success) {

App.ComboBoxCity.setValue(records);

}

</script>
@model System.Collections.IEnumerable


@Html.X().ResourceManager()
@(Html.X().FormPanel().ID("f").Items

(
Html.X().ComboBox()
.ID("ComboBoxCountry")
.Editable(false)
.QueryMode(DataLoadMode.Local)
.TriggerAction(TriggerAction.All)
.EmptyText("Select a country")
.DisplayField("Name")
.ValueField("Id")
.FieldLabel("Country")

.ForceSelection(true)
.Listeners(ls =>
{
ls.Select.Handler = "App.ComboBoxCity.clearValue(); App.ComboBoxCity.getStore().load()";
})
.Store(Html.X().Store()


.Model(Html.X().Model()
.IDProperty("Id")
.Fields(

Html.X().ModelField().Name("Id").Type(ModelFieldType.String),
Html.X().ModelField().Name("Name").Type(ModelFieldType.String)
)

)
.DataSource(ViewBag.country)

)



,
Html.X().ComboBox()
.ID("ComboBoxCity")
.TypeAhead(true)
.QueryMode(DataLoadMode.Local)
.ForceSelection(true)
.FieldLabel("City")
.TriggerAction(TriggerAction.All)
.DisplayField("name")
.ValueField("id")
.EmptyText("Loading...")
.ValueNotFoundText("Loading...")
.Store(Html.X().Store()
.ID("StoreCity")
.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.Action("GetCities"))
.Reader(Html.X().JsonReader().Root("data"))
)
.Parameters(ps =>
ps.Add(new StoreParameter("country", "App.ComboBoxCountry.getValue()", ParameterMode.Raw))
)
.Listeners(ls =>
{
ls.Load.Handler = @"var combo = App.ComboBoxCity;
combo.setValue(records[0].get(combo.valueField));";
ls.Load.Fn = "callback";
}
)
)
)
.Buttons
(
Html.X().Button().Text("set")

.DirectEvents(de =>
{

de.Click.FormID = "f";
de.Click.Action = "set";


})
)
)



CONTROLLER


public ActionResult Index()
{
loadcountry();
return View();
}

public ActionResult GetCities(string country)
{
return this.Store(Cities(country));
}

public void loadcountry()
{
List<object> country = new List<object>(10);

country.Add(new { Id = 1, Name = "Country 1" });
country.Add(new { Id = 2, Name = "Country 2" });

ViewBag.country = country;
}

public object Cities(string country)
{

List<object> cities = new List<object>(10);
for (int i = 1; i <= 10; i++)
{
cities.Add(new { Id = i.ToString() + i, Name = i.ToString() + " City of " + country });
}

return cities;


}

public DirectResult Set()
{
X.GetCmp<ComboBox>("ComboBoxCountry").SetValue("1");

var store = X.GetCmp<Store>("StoreCity"); // Set .ID("StoreCity") for the Store

store.LoadProxy(new
{
callback = new JRawValue("function() { App.ComboBoxCity.setValue('2'); }")
});

return this.Direct();
}

Daniil
Aug 15, 2014, 9:46 AM
You call .SetValue("1") for the Country ComboBox, so, the City Store is being loaded with a "country: '1'" parameter.

ps.Add(new StoreParameter("country", "App.ComboBoxCountry.getValue()", ParameterMode.Raw))

For the City Store you create such the data:

cities.Add(new { Id = i.ToString() + i, Name = i.ToString() + " City of " + country });

So, Ids are "11", "22", "33", etc.

You call .setValue('2'):

callback = new JRawValue("function() { App.ComboBoxCity.setValue('2'); }")


But there is no such the value.

matrixwebtech
Aug 15, 2014, 10:33 AM
Thanks dannil,Its working fine,I rectify my code.Here in this post I will post a working sample ,may it will help others


Scenario

There 2 combobox C1 and C2.C2 populate after C1 selection change, http://mvc.ext.net/#/Form_ComboBox/Ajax_Linked_Combos.

In this case if any body want to set value to dynamically in C1 and C2 combo.

Solution

View



@model System.Collections.IEnumerable


@Html.X().ResourceManager()
@(Html.X().FormPanel().ID("f").Items

(
Html.X().ComboBox()
.ID("ComboBoxCountry")
.Editable(false)
.QueryMode(DataLoadMode.Local)
.TriggerAction(TriggerAction.All)
.EmptyText("Select a country")
.DisplayField("Name")
.ValueField("Id")
.FieldLabel("Country")

.ForceSelection(true)
.Listeners(ls =>
{
ls.Select.Handler = "App.ComboBoxCity.clearValue(); App.ComboBoxCity.getStore().load()";
})
.Store(Html.X().Store()


.Model(Html.X().Model()
.IDProperty("Id")
.Fields(

Html.X().ModelField().Name("Id").Type(ModelFieldType.String),
Html.X().ModelField().Name("Name").Type(ModelFieldType.String)
)

)
.DataSource(ViewBag.country)

)



,
Html.X().ComboBox()
.ID("ComboBoxCity")
.TypeAhead(true)
.QueryMode(DataLoadMode.Local)
.ForceSelection(true)
.FieldLabel("City")
.TriggerAction(TriggerAction.All)
.DisplayField("name")
.ValueField("id")
.EmptyText("Loading...")
.ValueNotFoundText("Loading...")
.Store(Html.X().Store()
.ID("StoreCity")
.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.Action("GetCities"))
.Reader(Html.X().JsonReader().Root("data"))
)
.Parameters(ps =>
ps.Add(new StoreParameter("country", "App.ComboBoxCountry.getValue()", ParameterMode.Raw))
)
)
)
.Buttons
(
Html.X().Button().Text("set")

.DirectEvents(de =>
{

de.Click.FormID = "f";
de.Click.Action = "set";


})
)
)


Controller



public ActionResult Index()
{
loadcountry();
return View();
}

public ActionResult GetCities(string country)
{
return this.Store(Cities(country));
}

public void loadcountry()
{
List<object> country = new List<object>(10);

country.Add(new { Id = 1, Name = "Country 1" });
country.Add(new { Id = 2, Name = "Country 2" });

ViewBag.country = country;
}

public object Cities(string country)
{

List<object> cities = new List<object>(10);
for (int i = 1; i <= 10; i++)
{
cities.Add(new { Id = i.ToString() , Name = i.ToString() + " City of " + country });
}

return cities;


}

public DirectResult Set()
{
X.GetCmp<ComboBox>("ComboBoxCountry").SetValue("1");

var store = X.GetCmp<Store>("StoreCity");

store.LoadProxy(new
{
callback = new JRawValue("function() { App.ComboBoxCity.setValue('5'); }")
});

return this.Direct();
}

Daniil
Aug 15, 2014, 2:18 PM
Thank you for sharing the final solution. It really might help someone.

matrixwebtech
Sep 10, 2014, 7:19 PM
Hi,
Again I have a situation with "Ajax Linked Combobox",
previously I set value to ComboBoxCountry


X.GetCmp<ComboBox>("ComboBoxCountry").SetValue("1");
and
set value to ComboBoxCity

var store = X.GetCmp<Store>("StoreCity");

store.LoadProxy(new
{
callback = new JRawValue("function() { App.ComboBoxCity.setValue('5'); }")
});

but now In a page of my application I have this same 2 comboboxes
1. ComboBoxCountry
2. ComboBoxCity

and in Index() action,I pass model to view


return View("Sample_View", Sample_Model);

ComboBoxCountry will fill after page load but ComboBoxCity not set.

how to set this?

matrixwebtech
Sep 11, 2014, 9:15 AM
I am try with bellow code
Example View :

@model e.Controllers.onload
@{
Layout = null;
var X = Html.X();
}

@X.ResourceManager()
@(X.ComboBoxFor(obj=>obj.ProjectID)
.ID("ProjectID")
.Editable(false)
.SelectOnFocus(true)
.FieldLabel("Project")
.AnchorHorizontal("100%")
.EmptyText("Select Project")
.DisplayField("ProjectName")
.ValueField("ProjectID")
.Width(270)
.LabelAlign(LabelAlign.Right)
.ForceSelection(true)
.Listeners(l=>{
l.Select.Handler = "App.SiteID.clearValue(); App.SiteID.getStore().load();this.getTrigger(0).sh ow();";
})
.Store(
Html.X().Store()
.Data(ViewBag.ProjectID)
.ID("storeProjectID")
.Model(
Html.X().Model()
.IDProperty("ProjectID")
.Fields(
Html.X().ModelField().Name("ProjectID").Type(ModelFieldType.Int),
Html.X().ModelField().Name("ProjectName").Type(ModelFieldType.String)

)
)
)
)

@(X.ComboBoxFor(obj=>obj.SiteID)
.ID("SiteID")
.TypeAhead(true)
.QueryMode(DataLoadMode.Local)
.ForceSelection(true)
.FieldLabel("SiteID")
.TriggerAction(TriggerAction.All)
.DisplayField("SiteName")
.ValueField("SiteID")
.Listeners(l=>{
l.Select.Handler = "this.getTrigger(0).show();";
})
.Store(
Html.X().Store()
.AutoLoad(false)
.ID("storeSiteID")
.Model(
Html.X().Model()
.IDProperty("SiteID")
.Fields(
new ModelField("SiteID", ModelFieldType.Int) { Mapping = "SiteID" },
new ModelField("SiteName", ModelFieldType.String) { Mapping = "SiteName" }

)
)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("getsite"))
.Reader(Html.X().JsonReader().Root("data"))
)
.Parameters(ps =>
ps.Add(new StoreParameter("ProjectID", "App.ProjectID.getValue()", ParameterMode.Raw))
)
.Listeners(ls =>{
ls.Load.Handler = @"var combo = App.SiteID;
App.SiteID.getTrigger(0).show()";
})

)
)

Example: Controller And Sample Data


public class Ajax_linked_comboController : Controller
{
//
// GET: /Ajax_linked_combo/

public ActionResult Index()
{
ViewBag.ProjectID = getproject();

onload _onload = new onload();
_onload.ProjectID = 1;
_onload.SiteID = 1;
return View(_onload);
}

public List<Project> getproject()
{
var l = new List<Project>();
for (int i = 0; i <= 3; i++)
{
var v = new Project()
{
ProjectID = i,
ProjectName= "Project-" + i.ToString(),

};

l.Add(v);
}

return l;


}

public ActionResult getsite(string ProjectID)
{
var l = new List<Site>();
for (int i = 0; i <= 3; i++)
{
var v = new Site()
{
SiteID = i,
SiteName = "Site-" + i.ToString() + "-of Project-" + ProjectID,

};

l.Add(v);
}

return this.Store(l.Cast<object>().ToArray());
}

}

public class Project
{
public int ProjectID { get; set; }
public string ProjectName { get; set; }
}

public class Site
{
public int SiteID { get; set; }
public string SiteName { get; set; }
}

public class onload
{
public int ProjectID { get; set; }
public int SiteID { get; set; }

}

Please suggest me how do i do this?

Daniil
Sep 11, 2014, 4:58 PM
You can set this Listener for the SiteID ComboBox:

l.AfterRender.Handler = @"if (Ext.isDefined(App.ProjectID.getValue())) {
this.clearValue();
this.getStore().load();
}";

matrixwebtech
Nov 01, 2014, 10:08 AM
Hi ,
once again I facing some problem,I try http://forums.ext.net/showthread.php?41421-CLOSED-Ajax-Linked-Combobox-SetValue%28%29&p=195931&viewfull=1#post195931.but I load ProjectID Combobox with proxy instead of
.Data(ViewBag.ProjectID)


.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("../../.."))
.Reader(Html.X().JsonReader().Root("data"))

)
and load this after render


l.AfterRender.Handler = "this.getStore().reload()";

I set bellow code to SiteID combo


l.AfterRender.Handler = @"if (Ext.isDefined(App.ProjectID.getValue())) {
this.clearValue();
this.getStore().load();
}";
this code not set value to siteid combo,please help.

Daniil
Nov 02, 2014, 7:06 AM
It would be nice to reproduce that with a full test case.

matrixwebtech
Nov 02, 2014, 2:49 PM
Example View


@model ERP_test.Controllers.onload
@{
Layout = null;
var X = Html.X();
}

@X.ResourceManager()
@( X.ComboBoxFor(obj => obj.ProjectID)

.Editable(false)
.SelectOnFocus(true)
.FieldLabel("Project")
.AnchorHorizontal("100%")
.EmptyText("Select Project")
.DisplayField("ProjectName")
.ValueField("ProjectID")
.Width(270)
// .QueryMode(DataLoadMode.Local)
//.TriggerAction(TriggerAction.All)
.ForceSelection(true)
.FireChangeOnLoad(true)
.LabelAlign(LabelAlign.Right)

.EmptyValue(0)
.AllowBlank(true)
.Triggers(
Html.X().FieldTrigger().Icon(TriggerIcon.Clear).Qt ip("Remove selected").HideTrigger(true)
)
.Listeners(l=>{
l.TriggerClick.Handler = "this.clearValue();App.SiteID.getStore().removeAll( );App.SiteID.clearValue(); this.getTrigger(0).hide();App.SiteID.getTrigger(0) .hide();";
l.Select.Handler = " App.SiteID.clearValue(); App.SiteID.getStore().load();this.getTrigger(0).sh ow();";

l.AfterRender.Handler = @"this.getTrigger(0).show();";
})
.Store(
Html.X().Store()

.ID("storeProjectID")
.Model(
Html.X().Model()
.IDProperty("ProjectID")
.Fields(
Html.X().ModelField().Name("ProjectID").Type(ModelFieldType.Int),
Html.X().ModelField().Name("ProjectName").Type(ModelFieldType.String)

)
)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("getproject"))
.Reader(Html.X().JsonReader().Root("data"))

)
)
)

@(X.ComboBoxFor(obj => obj.SiteID)
.Editable(false)
//.SelectOnFocus(true)
.FieldLabel("Site")
.AnchorHorizontal("100%")
.EmptyText("Select Site")
.EmptyValue(0)
.DisplayField("SiteName")
.ValueField("SiteID")
.Width(270)
.QueryMode(DataLoadMode.Local)
.TriggerAction(TriggerAction.All)
.LabelAlign(LabelAlign.Right)
.ForceSelection(true)

.AllowBlank(true)
.Triggers(
Html.X().FieldTrigger().Icon(TriggerIcon.Clear).Qt ip("Remove selected").HideTrigger(true)
)
.Listeners(l=>{
l.TriggerClick.Handler = "this.clearValue();";
l.Select.Handler = "this.getTrigger(0).show();";
l.TriggerClick.Handler = "this.clearValue();App.SiteID.getStore().removeAll( ); this.getTrigger(0).hide();";
l.AfterRender.Handler = @"if (App.ProjectID.getValue()>0) {
this.clearValue();
this.getStore().load();
}";
})
.Store(
Html.X().Store()
.AutoLoad(false)
.ID("storeSiteID")
.Model(
Html.X().Model()
.IDProperty("SiteID")
.Fields(
new ModelField("SiteID", ModelFieldType.Int) { Mapping = "SiteID" },
new ModelField("SiteName", ModelFieldType.String) { Mapping = "SiteName" }

)
)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("getsite"))
.Reader(Html.X().JsonReader().Root("data"))

)
.Parameters(ps =>
ps.Add(new StoreParameter("ProjectID", "App.ProjectID.getValue()", ParameterMode.Raw))
)
.Listeners(ls =>{
ls.Load.Handler = @"var combo = App.SiteID;
App.SiteID.getTrigger(0).show()";//combo.setValue(records[0].get(combo.valueField));

})

)
)


Example Controller and sample data


public class Ajax_linked_comboController : Controller
{
//
// GET: /Ajax_linked_combo/

public ActionResult Index()
{
//ViewBag.ProjectID = getproject();

onload _onload = new onload();
_onload.ProjectID = 2;
_onload.SiteID = 3;
return View(_onload);
}

public ActionResult getproject()
{
var l = new List<Project>();
for (int i = 0; i <= 3; i++)
{
var v = new Project()
{
ProjectID = i,
ProjectName = "Project-" + i.ToString(),

};

l.Add(v);
}

return this.Store(l);


}

public ActionResult getsite(string ProjectID)
{
var l = new List<Site>();
for (int i = 0; i <= 3; i++)
{
var v = new Site()
{
SiteID = i,
SiteName = "Site-" + i.ToString() + "-of Project-" + ProjectID,

};

l.Add(v);
}

return this.Store(l.Cast<object>().ToArray());
}

}

public class Project
{
public int ProjectID { get; set; }
public string ProjectName { get; set; }
}

public class Site
{
public int SiteID { get; set; }
public string SiteName { get; set; }
}

public class onload
{
public int ProjectID { get; set; }
public int SiteID { get; set; }

}

please review this code ,after load page in getsite function ProjectID is blank.

Daniil
Nov 03, 2014, 5:35 AM
after load page in getsite function ProjectID is blank.

The getsite controller action is NOT triggered for me at page load.

matrixwebtech
Nov 03, 2014, 5:38 AM
Hi,daniil I set
.FireSelectOnLoad(true) to ProjectID combobox and I see its working.am I doing the right approach?

Daniil
Nov 03, 2014, 5:49 AM
I did and the getsite action triggers now.

The ProjectID is "2" for me.

matrixwebtech
Nov 03, 2014, 6:30 AM
Ok,
so is it right way which I did here http://forums.ext.net/showthread.php?41421-CLOSED-Ajax-Linked-Combobox-SetValue%28%29&p=208411&viewfull=1#post208411 ? and I think you also add
.FireSelectOnLoad(true) to ProjectID combobox.

Daniil
Nov 03, 2014, 6:33 AM
Yes, I think the .FireSelectOnLoad(true) is OK to use if you need it.