1 Attachment(s)
[CLOSED] Linked various fields In Grid example in MVC and other functionality
As per
http://forums.ext.net/showthread.php...example-in-MVC post I take update from svn and try to add not only combos but other fields like textfield. with help of this I tried but not success to do.I attach a Image and code here and describe what i want to do,plese help me to do this.
CONTROLLER CODE
Code:
public ActionResult Index()
{
List<object> countries = new List<object>(10);
for (int i = 1; i <= 10; i++)
{
countries.Add(new { Text = "C" + i });
}
return View(new IEnumerable<object>[]
{
new List<object>
{
new {Country = "C1", State = "C1_S1", City = "C1_S1_C1", Region = "C1_S1_C1_R1",Population="1002564",Men="565442",Women="524169"},
new {Country = "C2", State = "C2_S1", City = "C2_S1_C1", Region = "C2_S1_C1_R1",Population="1002564",Men="565442",Women="524169"},
new {Country = "C3", State = "C3_S1", City = "C3_S1_C1", Region = "C3_S1_C1_R1",Population="1002564",Men="565442",Women="524169"},
},
countries
});
}
public ActionResult GetStates(string query)
{
List<object> states = new List<object>(10);
for (int i = 1; i <= 10; i++)
{
states.Add(new { Text = query + "_S" + i });
}
return this.Store(states);
}
public ActionResult GetCities(string query)
{
List<object> cities = new List<object>(10);
for (int i = 1; i <= 10; i++)
{
cities.Add(new { Text = query + "_C" + i });
}
return this.Store(cities);
}
public ActionResult GetRegions(string query)
{
List<object> regions = new List<object>(10);
for (int i = 1; i <= 10; i++)
{
regions.Add(new { Text = query + "_R" + i });
}
return this.Store(regions);
}
public ActionResult Edit(string field, string recordData, int index)
{
List<string> fields = new List<string> { "country", "state", "city", "Population","Men","Women" };
int startIndex = fields.IndexOf(field);
JsonObject data = JSON.Deserialize<JsonObject>(recordData);
ModelProxy record = X.GetCmp<Store>("Store1").GetAt(index);
//switch (field)
//{
// case "country":
// record.Set(fields[i], data["country"] + "_S1");
//// data["state"] = data["country"] + "_S1";
// break;
//}
for (int i = startIndex + 1; i < 6; i++)
{
switch (fields[i])
{
case "state":
record.Set(fields[i], data["country"] + "_S1");
data["state"] = data["country"] + "_S1";
break;
case "city":
record.Set(fields[i], data["state"] + "_C1");
data["city"] = data["state"] + "_C1";
break;
case "region":
record.Set(fields[i], data["city"] + "_R1");
break;
case "Population":
// record.Set(fields[i], data["city"] + "_R1");
record.Set(fields[i], "5456");
break;
case "Men":
//record.Set(fields[i], data["city"] + "_R1");
record.Set(fields[i], "2566");
break;
case "Women":
//record.Set(fields[i], data["city"] + "_R1");
record.Set(fields[i], "2569");
break;
}
}
return this.Direct();
}
VIEW CODE
Code:
@model System.Collections.IEnumerable[]
@using Ext.Net
@using Ext.Net.MVC
@{
ViewBag.Title = "ComboBox with Template - Ext.NET MVC Examples";
var X = Html.X();
}
<script>
var addPlant = function () {
var r = Ext.create('pr', {
//common: 'New Plant 1',
//light: 'Mostly Shady',
//price: 0,
//availability: Ext.Date.clearTime(new Date()),
//indoor: false
}),
grid = App.GridPanel1;
grid.store.insert(0, r);
grid.editingPlugin.startEditByPosition({ row: 0, column: 0 });
};
var beforeEdit = function (ed, e) {
var field = this.getEditor(e.record, e.column).field;
switch (e.field) {
case "state":
field.allQuery = e.record.get('country');
break;
case "city":
field.allQuery = e.record.get('state');
break;
case "Population":
field.allQuery = e.record.get('city');
break;
case "Men":
field.allQuery = e.record.get('city');
break;
case "Women":
field.allQuery = e.record.get('city');
break;
}
};
</script>
@X.ResourceManager()
@(X.Store()
.ID("CountryStore")
.Model(X.Model()
.Fields(X.ModelField()
.Name("text")
.ServerMapping("Text")
.Type(ModelFieldType.String)
)
)
.DataSource(Model[1])
)
@(X.Store()
.ID("StateStore")
.Model(X.Model()
.Fields(X.ModelField()
.Name("text")
.Mapping("Text")
.Type(ModelFieldType.String)
)
)
.Proxy(X.AjaxProxy()
.Url(Url.Action("GetStates"))
.Reader(X.JsonReader().Root("data"))
)
)
@(X.Store()
.ID("CityStore")
.Model(X.Model()
.Fields(X.ModelField()
.Name("text")
.Mapping("Text")
.Type(ModelFieldType.String)
)
)
.Proxy(X.AjaxProxy()
.Url(Url.Action("GetCities"))
.Reader(X.JsonReader().Root("data"))
)
)
@* @(X.Store()
.ID("RegionStore")
.Model(X.Model()
.Fields(X.ModelField()
.Name("text")
.Mapping("Text")
.Type(ModelFieldType.String)
)
)
.Proxy(X.AjaxProxy()
.Url(Url.Action("GetRegions"))
.Reader(X.JsonReader().Root("data"))
)
)*@
@(X.GridPanel()
.ID("GridPanel1")
.Listeners(l =>
{
l.ViewReady.Fn = "addPlant";
l.ViewReady.Delay = 1;
})
.Height(300)
.Width(600)
.Title("Grid")
.ForceFit(true)
.Store(X.Store()
.ID("Store1")
.Model(X.Model()
.Name("pr")
.Fields(
X.ModelField()
.Name("country")
.ServerMapping("Country")
.Type(ModelFieldType.String),
X.ModelField()
.Name("state")
.ServerMapping("State")
.Type(ModelFieldType.String),
X.ModelField()
.Name("city")
.ServerMapping("City")
.Type(ModelFieldType.String),
X.ModelField()
.Name("population")
.ServerMapping("Population")
.Type(ModelFieldType.String),
X.ModelField()
.Name("men")
.ServerMapping("Men")
.Type(ModelFieldType.String),
X.ModelField()
.Name("women")
.ServerMapping("Women")
.Type(ModelFieldType.String)
//X.ModelField()
// .Name("region")
// .ServerMapping("Region")
// .Type(ModelFieldType.String)
)
)
//.DataSource(Model[0])
)
.ColumnModel(
X.Column()
.DataIndex("country")
.Text("Country")
.Editor(X.ComboBox()
.QueryMode(DataLoadMode.Local)
.TriggerAction(TriggerAction.All)
.StoreID("CountryStore")
.ValueField("text")
.DisplayField("text")
),
X.Column()
.DataIndex("state")
.Text("State")
.Editor(X.ComboBox()
.ID("ddlstate")
.QueryMode(DataLoadMode.Remote)
.TriggerAction(TriggerAction.All)
.StoreID("StateStore")
.ValueField("text")
.DisplayField("text")
.CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
),
X.Column()
.DataIndex("city")
.Text("City")
.Editor(X.ComboBox()
.ID("ddlcity")
.QueryMode(DataLoadMode.Remote)
.TriggerAction(TriggerAction.All)
.StoreID("CityStore")
.ValueField("text")
.DisplayField("text")
.CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
),
X.Column()
.DataIndex("Population")
.Text("Population")
.Editor(X.TextField()
.ID("txtpopulation")
.CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
)
,
X.Column()
.DataIndex("Men")
.Text("Men")
.Editor(X.TextField()
.ID("txtMen")
.CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
)
,
X.Column()
.DataIndex("Women")
.Text("Wo-Men")
.Editor(X.TextField()
.ID("txtwomen")
.CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
)
//X.Column()
// .DataIndex("region")
// .Text("Region")
// .Editor(X.ComboBox()
// .QueryMode(DataLoadMode.Remote)
// .TriggerAction(TriggerAction.All)
// .StoreID("RegionStore")
// .ValueField("text")
// .DisplayField("text")
// .CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
// )
)
.Plugins(X.CellEditing()
.Listeners(events => {
events.BeforeEdit.Fn = "beforeEdit";
// events.Edit.Handler = @"if (e.field === 'country') {
// // e.record.set('test2', e.value);
// App.ddlstate.getStore().reload();
// }
// else if(e.field === 'state')
// {
// App.ddlcity.getStore().reload();
// }
// else if(e.field === 'city')
// {
// App.GridPanel1.getStore().reload();
// }
// ";
})
.DirectEvents(events =>
{
events.Edit.Action = "Edit";
events.Edit.EventMask.ShowMask = true;
events.Edit.EventMask.CustomTarget = "App.GridPanel1";
events.Edit.ExtraParams.Add(new Parameter { Name = "field", Value = "e.field", Mode = ParameterMode.Raw });
events.Edit.ExtraParams.Add(new Parameter { Name = "index", Value = "e.rowIdx", Mode = ParameterMode.Raw });
events.Edit.ExtraParams.Add(new Parameter { Name = "recordData", Value = "e.record.data", Mode = ParameterMode.Raw });
})
)
)
If you run this code you can see the design like attached image.but i need control one after another.means.
By default first row is there and only country combo is fill.If i select a country then the sate combo is fill.
After selecting state related cities are load in citycombo and after select a city Population,men and wo-men is populate
the same process is for every row inside this grid.
I cant figure out how to do this one after another field populate.in my case all fields populate from firs time. and all fields populate on click any fields inside the grid.