Hi
Below is a full example of what I am trying to do, I know it doesnt fully work but thats point.
Just to recap cap the point is that first combo box, could be any plant, this would set the Zone ultimatly ...
the second looks at the Zone value set by the first, which determines the options for the second combo list.
third combo looks at the result of the second and uses this value, to get the list of option for this combo.
Hope this all helps as I really need to get this sorted.
Model:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Collections;
using Ext.Net.MVC;
namespace Ext.Net.MVC.Examples.Areas.GridPanel_Paging_and_Sorting.Models
{
public class Soil
{
public int id { get; set; }
public int shadeId { get; set; }
public string value { get; set; }
}
public class Shade
{
public int id { get; set; }
public int zoneId { get; set; }
public string value { get; set; }
}
public class Plant
{
public int id
{
get;
set;
}
public string Common
{
get;
set;
}
public string Botanical
{
get;
set;
}
public int Zone
{
get;
set;
}
public string ColorCode
{
get;
set;
}
public string Light
{
get;
set;
}
public double Price
{
get;
set;
}
public DateTime Availability
{
get;
set;
}
public bool Indoor
{
get;
set;
}
public static Paging<Plant> PlantsPaging(StoreRequestParameters parameters)
{
return Plant.PlantsPaging(parameters.Start, parameters.Limit, parameters.SimpleSort, parameters.SimpleSortDirection, null);
}
public static Paging<Plant> PlantsPaging(int start, int limit, string sort, SortDirection dir, string filter)
{
List<Plant> plants = Plant.GetPlants();
if (!string.IsNullOrEmpty(filter) && filter != "*")
{
plants.RemoveAll(plant => !plant.Common.ToLower().StartsWith(filter.ToLower()));
}
if (!string.IsNullOrEmpty(sort))
{
plants.Sort(delegate(Plant x, Plant y)
{
object a;
object b;
int direction = dir == SortDirection.DESC ? -1 : 1;
a = x.GetType().GetProperty(sort).GetValue(x, null);
b = y.GetType().GetProperty(sort).GetValue(y, null);
return CaseInsensitiveComparer.Default.Compare(a, b) * direction;
});
}
if ((start + limit) > plants.Count)
{
limit = plants.Count - start;
}
List<Plant> rangePlants = (start < 0 || limit < 0) ? plants : plants.GetRange(start, limit);
return new Paging<Plant>(rangePlants, plants.Count);
}
public static List<Shade> GetShade()
{
return new List<Shade>{
new Shade
{
id = 1,
zoneId = 1,
value = "Darkness"
}
,
new Shade
{
id = 1,
zoneId = 1,
value = "Mostly Shady"
}
,
new Shade
{
id = 2,
zoneId = 2,
value = "Sun or Shade"
}
,
new Shade
{
id = 3,
zoneId = 2,
value = "Mostly Sunny"
}
,
new Shade
{
id = 4,
zoneId = 3,
value = "Shade"
}
,
new Shade
{
id = 5,
zoneId = 3,
value = "Bright Sunlight"
}
};
}
public static List<Soil> GetSoil()
{
return new List<Soil>{
new Soil
{
id = 1,
shadeId = 1,
value = "Light Acid"
}
,
new Soil
{
id = 2,
shadeId = 1,
value = "Very Acid"
}
,
new Soil
{
id = 3,
shadeId = 2,
value = "Neutral"
}
,
new Soil
{
id = 4,
shadeId = 3,
value = "Very Alkiline"
}
,
new Soil
{
id = 4,
shadeId = 3,
value = "Light Alkiline"
}
};
}
public static List<Plant> GetPlants()
{
return new List<Plant> {
new Plant
{ id = 1,
Common = "Bloodroot",
Botanical = "Sanguinaria canadensis",
Zone = 2,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 2.44,
Availability = new DateTime(2006, 03, 15),
Indoor = true
},
new Plant
{ id = 2,
Common = "Columbine",
Botanical = "Aquilegia canadensis",
Zone = 2,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 9.37,
Availability = new DateTime(2006, 03, 06),
Indoor = true
},
new Plant
{ id = 3,
Common = "Marsh Marigold",
Botanical = "Caltha palustris",
Zone = 1,
ColorCode = "F5F5F5",
Light = "Mostly Sunny",
Price = 6.81,
Availability = new DateTime(2006, 05, 17),
Indoor = false
},
new Plant
{ id = 4,
Common = "Cowslip",
Botanical = "Caltha palustris",
Zone = 1,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 9.90,
Availability = new DateTime(2006, 03, 06),
Indoor = true
},
new Plant
{ id = 5,
Common = "Dutchman's-Breeches",
Botanical = "Dicentra cucullaria",
Zone = 3,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 6.44,
Availability = new DateTime(2006, 01, 20),
Indoor = true
},
new Plant
{ id = 6,
Common = "Ginger, Wild",
Botanical = "Asarum canadense",
Zone = 3,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 9.03,
Availability = new DateTime(2006, 04, 18),
Indoor = true
},
new Plant
{ id = 7,
Common = "Hepatica",
Botanical = "Hepatica americana",
Zone = 4,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 4.45,
Availability = new DateTime(2006, 01, 26),
Indoor = true
},
new Plant
{ id = 8,
Common = "Liverleaf",
Botanical = "Hepatica americana",
Zone = 1,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 3.99,
Availability = new DateTime(2006, 01, 02),
Indoor = true
},
new Plant
{ id = 9,
Common = "Jack-In-The-Pulpit",
Botanical = "Arisaema triphyllum",
Zone = 1,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 3.23,
Availability = new DateTime(2006, 02, 01),
Indoor = true
},
new Plant
{ id = 10,
Common = "Mayapple",
Botanical = "Podophyllum peltatum",
Zone = 3,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 2.98,
Availability = new DateTime(2006, 06, 05),
Indoor = true
},
new Plant
{ id = 11,
Common = "Phlox, Woodland",
Botanical = "Phlox divaricata",
Zone = 3,
ColorCode = "EEEEEE",
Light = "Sun or Shade",
Price = 2.80,
Availability = new DateTime(2006, 01, 22),
Indoor = false
},
new Plant
{ id = 12,
Common = "Phlox, Blue",
Botanical = "Phlox divaricata",
Zone = 1,
ColorCode = "EEEEEE",
Light = "Sun or Shade",
Price = 5.59,
Availability = new DateTime(2006, 02, 16),
Indoor = false
},
new Plant
{ id = 13,
Common = "Spring-Beauty",
Botanical = "Claytonia Virginica",
Zone = 1,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 6.59,
Availability = new DateTime(2006, 02, 01),
Indoor = true
},
new Plant
{ id = 14,
Common = "Trillium",
Botanical = "Trillium grandiflorum",
Zone = 2,
ColorCode = "EEEEEE",
Light = "Sun or Shade",
Price = 3.90,
Availability = new DateTime(2006, 04, 29),
Indoor = false
},
new Plant
{ id = 15,
Common = "Wake Robin",
Botanical = "Trillium grandiflorum",
Zone = 2,
ColorCode = "EEEEEE",
Light = "Sun or Shade",
Price = 3.20,
Availability = new DateTime(2006, 02, 21),
Indoor = false
},
new Plant
{ id = 16,
Common = "Violet, Dog-Tooth",
Botanical = "Erythronium americanum",
Zone = 1,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 9.04,
Availability = new DateTime(2006, 02, 01),
Indoor = true
},
new Plant
{ id = 17,
Common = "Trout Lily",
Botanical = "Erythronium americanum",
Zone = 3,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 6.94,
Availability = new DateTime(2006, 03, 24),
Indoor = true
},
new Plant
{ id = 18,
Common = "Adder's-Tongue",
Botanical = "Erythronium americanum",
Zone = 3,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 9.58,
Availability = new DateTime(2006, 04, 13),
Indoor = true
},
new Plant
{ id = 19,
Common = "Anemone",
Botanical = "Anemone blanda",
Zone = 4,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 8.86,
Availability = new DateTime(2006, 12, 26),
Indoor = true
},
new Plant
{ id = 20,
Common = "Grecian Windflower",
Botanical = "Anemone blanda",
Zone = 4,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 9.16,
Availability = new DateTime(2006, 07, 10),
Indoor = true
},
new Plant
{ id = 21,
Common = "Bee Balm",
Botanical = "Monarda didyma",
Zone = 1,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 4.59,
Availability = new DateTime(2006, 05, 03),
Indoor = true
},
new Plant
{ id = 22,
Common = "Bergamot",
Botanical = "Monarda didyma",
Zone = 2,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 7.16,
Availability = new DateTime(2006, 04, 27),
Indoor = true
},
new Plant
{ id = 23,
Common = "Black-Eyed Susan",
Botanical = "Rudbeckia hirta",
Zone = 3,
ColorCode = "FFFFFF",
Light = "Sunny",
Price = 9.80,
Availability = new DateTime(2006, 06, 18),
Indoor = false
},
new Plant
{ id = 24,
Common = "Buttercup",
Botanical = "Ranunculus",
Zone = 4,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 2.57,
Availability = new DateTime(2006, 06, 10),
Indoor = true
},
new Plant
{ id = 25,
Common = "Crowfoot",
Botanical = "Ranunculus",
Zone = 4,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 9.34,
Availability = new DateTime(2006, 04, 03),
Indoor = true
},
new Plant
{ id = 26,
Common = "Butterfly Weed",
Botanical = "Asclepias tuberosa",
Zone = 2,
ColorCode = "FFFFFF",
Light = "Sunny",
Price = 2.78,
Availability = new DateTime(2006, 06, 30),
Indoor = false
},
new Plant
{ id = 27,
Common = "Cinquefoil",
Botanical = "Potentilla",
Zone = 1,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 7.06,
Availability = new DateTime(2006, 05, 25),
Indoor = true
},
new Plant
{ id = 28,
Common = "Primrose",
Botanical = "Oenothera",
Zone = 2,
ColorCode = "FFFFFF",
Light = "Sunny",
Price = 6.56,
Availability = new DateTime(2006, 01, 30),
Indoor = false
},
new Plant
{ id = 29,
Common = "Gentian",
Botanical = "Gentiana",
Zone = 4,
ColorCode = "EEEEEE",
Light = "Sun or Shade",
Price = 7.81,
Availability = new DateTime(2006, 05, 18),
Indoor = false
},
new Plant
{ id = 30,
Common = "Blue Gentian",
Botanical = "Gentiana",
Zone = 3,
ColorCode = "EEEEEE",
Light = "Sun or Shade",
Price = 8.56,
Availability = new DateTime(2006, 05, 02),
Indoor = false
},
new Plant
{ id = 31,
Common = "Jacob's Ladder",
Botanical = "Polemonium caeruleum",
Zone = 1,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 9.26,
Availability = new DateTime(2006, 02, 21),
Indoor = true
},
new Plant
{ id = 32,
Common = "Greek Valerian",
Botanical = "Polemonium caeruleum",
Zone = 1,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 4.36,
Availability = new DateTime(2006, 07, 14),
Indoor = true
},
new Plant
{ id = 33,
Common = "California Poppy",
Botanical = "Eschscholzia californica",
Zone = 2,
ColorCode = "FFFFFF",
Light = "Sunny",
Price = 7.89,
Availability = new DateTime(2006, 03, 27),
Indoor = false
},
new Plant
{ id = 34,
Common = "Shooting Star",
Botanical = "Dodecatheon",
Zone = 2,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 8.60,
Availability = new DateTime(2006, 05, 13),
Indoor = true
},
new Plant
{ id = 35,
Common = "Snakeroot",
Botanical = "Cimicifuga",
Zone = 3,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 5.63,
Availability = new DateTime(2006, 07, 11),
Indoor = true
},
new Plant
{ id = 36,
Common = "Cardinal Flower",
Botanical = "Lobelia cardinalis",
Zone = 3,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 3.02,
Availability = new DateTime(2006, 02, 22),
Indoor = true
}
};
}
}
}
Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net.MVC.Examples.Areas.GridPanel_Paging_and_Sorting.Models;
namespace Ext.Net.MVC.Examples.Areas.GridPanel_Paging_and_Sorting.Controllers
{
public class RemoteController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Read(StoreRequestParameters parameters)
{
return this.Store(Plant.PlantsPaging(parameters));
}
public ActionResult Plants()
{
IEnumerable<Plant> Plants;
Plants = (from ofg in Plant.GetPlants()
select ofg);
return this.Direct(Plants);
}
public ActionResult Shade(int id)
{
IEnumerable<Shade> Shade;
Shade = (from ofg in Plant.GetShade()
where ((ofg.zoneId == id))
select ofg);
return this.Direct(Shade);
}
public ActionResult Soil(int id)
{
IEnumerable<Soil> Soil;
Soil = (from ofg in Plant.GetSoil()
where ((ofg.shadeId == id))
select ofg);
return this.Direct(Soil);
}
public DirectResult Edit(int id, string field, string oldValue, string newValue, object customer)
{
string message = "<b>Property:</b> {0}<br /><b>Field:</b> {1}<br /><b>Old Value:</b> {2}<br /><b>New Value:</b> {3}";
// Send Message...
X.Msg.Notify("Edit Record #" + id.ToString(), string.Format(message, id, field, oldValue, newValue)).Show();
X.GetCmp<Store>("Store1").GetById(id).Commit();
return this.Direct();
}
}
}
View:
@model Ext.Net.MVC.Examples.Areas.GridPanel_Paging_and_Sorting.Models.Plant
<h1>Remote paging and sorting</h1>
<script>
var edit = function (editor, e) {
/*
"e" is an edit event with the following properties:
grid - The grid
record - The record that was edited
field - The field name that was edited
value - The value being set
originalValue - The original value for the field, before the edit.
row - The grid table row
column - The grid Column defining the column that was edited.
rowIdx - The row index that was edited
colIdx - The column index that was edited
*/
// Call DirectMethod
if (e.value !== e.originalValue) {
Ext.net.DirectMethod.request({
url: '@(Url.Action("Edit"))',
params: {
id: e.record.data.id,
field: e.field,
oldValue: e.originalValue,
newValue: e.value,
customer: e.record.data
}
});
}
};
</script>
@Html.X().ResourceManager()
@(
Html.X().GridPanel()
.ID("PlantGrid")
.Title("Plants")
.Frame(true)
.Height(300)
.Plugins(
Html.X().CellEditing().Listeners(ls =>
{
ls.Edit.Fn = "edit";
}
)
)
.Store(
Html.X().StoreForModel()
.ID("Store1")
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("Read"))
.Reader(Html.X().JsonReader().Root("data"))
)
.RemoteSort(true)
.PageSize(5)
.SorterFor(Model, m => m.Common, Ext.Net.SortDirection.ASC)
)
.ColumnModel(
Html.X().Column().DataIndex(Model, m => m.id).Text("id"),
Html.X().Column().DataIndex(Model, m => m.Common).Text("Common Name").Flex(1)
.Editor(
Html.X().ComboBox()
.ValueField("id")
.DisplayField("Common")
.Store(
Html.X().Store()
.ID("PlantsList")
.AutoLoad(false)
.Model(Html.X().Model()
.Fields(
new ModelField("id", ModelFieldType.Int),
new ModelField("Common", ModelFieldType.String)
)
)
.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("Plants"))
.ActionMethods(actions =>
{
actions.Read = HttpMethod.POST;
}
)
.Reader(
Html.X().JsonReader().Root("result")
)
)
)
)
,
Html.X().Column().DataIndex(Model, m => m.Botanical).Text("Botanical").Width(230),
Html.X().Column().DataIndex(Model, m => m.Zone).Text("Zone").Width(50),
Html.X().Column().DataIndex(Model, m => m.Light).Text("Shade").Width(130)
.Editor(
Html.X().ComboBox()
.ValueField("id")
.DisplayField("value")
.Store(
Html.X().Store()
.ID("ShadeList")
.AutoLoad(false)
.Model(Html.X().Model()
.Fields(
new ModelField("id", ModelFieldType.Int),
new ModelField("value", ModelFieldType.String)
)
)
.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("Shade"))
.ExtraParams(ep =>
{
ep.Add(new Parameter()
{
Name = "id",
Value = "3",
Mode = ParameterMode.Raw
}
);
}
)
.ActionMethods(actions =>
{
actions.Read = HttpMethod.POST;
}
)
.Reader(
Html.X().JsonReader().Root("result")
)
)
)
)
,
Html.X().Column().Text("Soil").Width(130)
.Editor(
Html.X().ComboBox()
.ValueField("id")
.DisplayField("value")
.Store(
Html.X().Store()
.ID("SoilList")
.AutoLoad(false)
.Model(Html.X().Model()
.Fields(
new ModelField("id", ModelFieldType.Int),
new ModelField("value", ModelFieldType.String)
)
)
.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("Soil"))
.ExtraParams(ep =>
{
ep.Add(new Parameter()
{
Name = "id",
Value = "3",
Mode = ParameterMode.Raw
}
);
}
)
.ActionMethods(actions =>
{
actions.Read = HttpMethod.POST;
}
)
.Reader(
Html.X().JsonReader().Root("result")
)
)
)
)
,
Html.X().Column().DataIndex(Model, m => m.Price).Text("Price").Width(70).Align(Alignment.Right),
Html.X().DateColumn().DataIndex(Model, m => m.Availability).Text("Available").Width(95).Format("yyyy-MM-dd"),
Html.X().Column().DataIndex(Model, m => m.Indoor).Text("Indoor?").Width(55)
)
.BottomBar(
Html.X().PagingToolbar()
.DisplayInfo(true)
.DisplayMsg("Displaying plants {0} - {1} of {2}")
.EmptyMsg("No plants to display")
)
)