Hey there guys and girls, i am try to implement a cascading dropdown list in a grid. I want values in the second list to be dictated by the users choice from the first list and the third list should be dictated by the users choice from the second list. The examples i have seen online are not clear on how the filter fuctions are called, so i am quite confused and i don't know how to proceed. Here is my code.
Here are the objects
PlanScriptVM.cs
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
namespace
P2I_UI.Models.ViewM
{
public
class
PlanScriptureVM
{
public
int
PlanScriptureID {
get
;
set
; }
public
int
MaterialCategoryID {
get
;
set
; }
// public virtual List<MaterialCategoryVM> Materials { get; set; }
public
int
ProductID {
get
;
set
; }
// public virtual List<ProductVM> Products { get; set; }
public
int
ProductTypeID {
get
;
set
; }
// public virtual List<ProductTypeVM> ProductTypes { get; set; }
public
int
TotalCalculation {
get
;
set
; }
public
int
AdultEOY {
get
;
set
; }
public
int
YouthEOY {
get
;
set
; }
public
int
ChildrenEOY {
get
;
set
; }
public
int
TotalProjection {
get
;
set
; }
public
int
AdultQ1 {
get
;
set
; }
public
int
YouthQ1 {
get
;
set
; }
public
int
ChildrenQ1 {
get
;
set
; }
public
int
AdultQ2 {
get
;
set
; }
public
int
YouthQ2 {
get
;
set
; }
public
int
ChildrenQ2 {
get
;
set
; }
public
int
AdultQ3 {
get
;
set
; }
public
int
YouthQ3 {
get
;
set
; }
public
int
ChildrenQ3 {
get
;
set
; }
public
int
AdultQ4 {
get
;
set
; }
public
int
YouthQ4 {
get
;
set
; }
public
int
ChildrenQ4 {
get
;
set
; }
}
}
MaterialCategory.cs
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
namespace
P2I_UI.Models
{
public
class
MaterialCategory
{
public
int
MaterialCategoryID {
get
;
set
; }
public
string
MaterialCategoryName {
get
;
set
; }
public
bool
Active {
get
;
set
; }
}
}
Products.cs
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
namespace
P2I_UI.Models
{
public
class
Product
{
public
int
ProductID {
get
;
set
; }
public
string
ItemNumber {
get
;
set
; }
public
int
ProductTypeID {
get
;
set
; }
public
int
MaterialCategoryID {
get
;
set
; }
public
bool
Active {
get
;
set
; }
}
}
ProductType.cs
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
namespace
P2I_UI.Models
{
public
class
ProductType
{
public
int
ProductTypeID {
get
;
set
; }
public
string
ProductTypeName {
get
;
set
; }
public
bool
Active {
get
;
set
; }
}
}
Controller
using
Kendo.Mvc.Extensions;
using
Kendo.Mvc.UI;
using
System.Collections.Generic;
using
System.Data;
using
System.Linq;
using
System.Web.Mvc;
namespace
P2I_UI.Controllers
{
public
class
ScriptureController : Controller
{
readonly
string
defaultController =
"PlanBudget"
;
P2IApiActions actions =
new
P2IApiActions();
public
List<MaterialCategory> GetMaterial()
{
var materialCategories =
new
List<MaterialCategory>();
materialCategories.Add(
new
MaterialCategory { MaterialCategoryID = 1, MaterialCategoryName=
"Bible"
, Active =
true
});
materialCategories.Add(
new
MaterialCategory { MaterialCategoryID = 2, MaterialCategoryName =
"E&D"
, Active =
true
});
materialCategories.Add(
new
MaterialCategory { MaterialCategoryID = 3, MaterialCategoryName =
"P&A"
, Active =
true
});
return
materialCategories;
}
public
List<Product> GetProducts()
{
var products =
new
List<Product>();
products.Add(
new
Product { ProductID = 1, ItemNumber =
"B-ENG-6377"
, ProductTypeID = 1, MaterialCategoryID = 1, Active =
true
});
products.Add(
new
Product { ProductID = 2, ItemNumber =
"B-GER-6378"
, ProductTypeID = 1, MaterialCategoryID = 1, Active =
true
});
products.Add(
new
Product { ProductID = 3, ItemNumber =
"B-JAP-6379"
, ProductTypeID = 1, MaterialCategoryID = 1, Active =
true
});
products.Add(
new
Product { ProductID = 4, ItemNumber =
"ED-ENG-637"
, ProductTypeID = 2, MaterialCategoryID = 2, Active =
true
});
products.Add(
new
Product { ProductID = 5, ItemNumber =
"ED-GER-637"
, ProductTypeID = 2, MaterialCategoryID = 2, Active =
true
});
products.Add(
new
Product { ProductID = 6, ItemNumber =
"ED-JAP-637"
, ProductTypeID = 2, MaterialCategoryID = 2, Active =
true
});
products.Add(
new
Product { ProductID = 7, ItemNumber =
"PA-ENG-6377"
, ProductTypeID = 3, MaterialCategoryID = 3, Active =
true
});
products.Add(
new
Product { ProductID = 8, ItemNumber =
"PA-GER-6378"
, ProductTypeID = 3, MaterialCategoryID = 3, Active =
true
});
products.Add(
new
Product { ProductID = 9, ItemNumber =
"PA-JAP-6379"
, ProductTypeID = 3, MaterialCategoryID = 3, Active =
true
});
return
products;
}
public
List<ProductType> GetProductTypes()
{
var productTypes =
new
List<ProductType>();
productTypes.Add(
new
ProductType { ProductTypeID = 1, ProductTypeName =
"Bible ER"
, Active =
true
});
productTypes.Add(
new
ProductType { ProductTypeID = 2, ProductTypeName =
"EngDan Bible ED"
, Active =
true
});
productTypes.Add(
new
ProductType { ProductTypeID = 3, ProductTypeName =
"PriAud Bible PA"
, Active =
true
});
return
productTypes;
}
// GET: Scripture
public
PartialViewResult Index()
{
return
PartialView();
}
public
ActionResult Scripture_Read([DataSourceRequest]DataSourceRequest request)
{
TempData[
"MaterialList"
] = GetMaterial();
TempData[
"ProductList"
] = GetProducts();
TempData[
"PrductTypeList"
] = GetProductTypes();
ViewBag.MaterialsList =
new
SelectList(GetMaterial().OrderBy(m => m.MaterialCategoryID),
"MaterialCategoryID"
,
"MaterialCategoryName"
);
ViewData[
"MaterialsList"
] =
new
SelectList(GetMaterial().OrderBy(m => m.MaterialCategoryID),
"MaterialCategoryID"
,
"MaterialCategoryName"
);
ViewBag.ProductsList =
new
SelectList(GetProducts().OrderBy(p => p.ProductID),
"ProductID"
,
"ItemNumber"
);
ViewBag.PrductTypesList =
new
SelectList(GetProductTypes().OrderBy(pt => pt.ProductTypeID),
"ProductTypeID"
,
"ProductTypeName"
);
var result1 =
new
List<PlanScriptureVM>();
return
Json(result1.ToDataSourceResult(request));
}
public
JsonResult GetProducts(
int
materialCategoryId)
{
var products = GetProducts();
var filteredProduct = products.Where(mcid => mcid.MaterialCategoryID == materialCategoryId);
return
Json(filteredProduct, JsonRequestBehavior.AllowGet);
}
public
JsonResult GetProductTypes(
int
productTypeId)
{
var productTypes = GetProductTypes();
var filteredProductTypes = productTypes.Where(ptid => ptid.ProductTypeID == productTypeId);
return
Json(filteredProductTypes, JsonRequestBehavior.AllowGet);
}
}
}
And finally the Index.cshtml
@(Html.Kendo().Grid<P2I_UI.Models.ViewM.PlanScriptureVM>()
.Name(
"grid"
)
.Columns(columns =>
{
columns.Group(ScriptureGroup => ScriptureGroup
.Title(
"Scriture"
)
.Columns(dd => {
dd.ForeignKey(e => e.MaterialCategoryID, (SelectList)ViewBag.MaterialsList).Title(
"Type"
).Width(40).HeaderHtmlAttributes(
new
{ style =
"font-weight: normal; font-size:75%"
}).HtmlAttributes(
new
{ @style =
"text-align:center; font-weight: normal; font-size:75%"
});
//.EditorTemplateName("MaterialCategoryID");
dd.ForeignKey(e => e.ProductID, (SelectList)ViewBag.ProductsList).Title(
"Item No"
).Width(40).HeaderHtmlAttributes(
new
{ style =
"font-weight: normal; font-size:75%"
}).HtmlAttributes(
new
{ @style =
"text-align:center; font-weight: normal; font-size:75%"
});
//;.EditorTemplateName("ProductID");
dd.ForeignKey(e => e.ProductTypeID, (SelectList)ViewBag.PrductTypesList).Title(
"Descript"
).Width(40).HeaderHtmlAttributes(
new
{ style =
"font-weight: normal; font-size:75%"
}).HtmlAttributes(
new
{ @style =
"text-align:center; font-weight: normal; font-size:75%"
});
//.EditorTemplateName("ProductTypeID");
})
);
columns.Group(OuterProjGroup => OuterProjGroup
.Title(
"Proj."
)
.Title(
"EOY Inv"
)
.Columns(opg => {
opg.Bound(e => e.TotalCalculation).Title(
"Total Calc"
).Width(40).HeaderHtmlAttributes(
new
{ style =
"font-weight: normal; font-size:75%"
}).HtmlAttributes(
new
{ @style =
"text-align:center; font-weight: normal; font-size:75%"
});
})
);
columns.Group(OuterProjectedGroup => OuterProjectedGroup
.Title(
"Projected EOY."
)
.Columns(optg => {
optg.Group(InnerProjectedGroup => InnerProjectedGroup
.Title(
"Inventory Assigned."
)
.Columns(iptg =>
{
iptg.Bound(e => e.AdultEOY).Title(
"Adult"
).Width(40).HeaderHtmlAttributes(
new
{ style =
"font-weight: normal; font-size:75%"
}).HtmlAttributes(
new
{ @style =
"text-align:center; font-weight: normal; font-size:75%"
});
iptg.Bound(e => e.YouthEOY).Title(
"Youth"
).Width(40).HeaderHtmlAttributes(
new
{ style =
"font-weight: normal; font-size:75%"
}).HtmlAttributes(
new
{ @style =
"text-align:center; font-weight: normal; font-size:75%"
});
iptg.Bound(e => e.ChildrenEOY).Title(
"Children"
).Width(40).HeaderHtmlAttributes(
new
{ style =
"font-weight: normal; font-size:75%"
}).HtmlAttributes(
new
{ @style =
"text-align:center; font-weight: normal; font-size:75%"
});
})
);
})
);
columns.Group(OuterProjGroup => OuterProjGroup
.Title(
"Proj."
)
.Title(
"EOY Inv."
)
.Columns(opg =>
{
opg.Bound(e => e.TotalProjection).Title(
"Total Proj"
).Width(40).HeaderHtmlAttributes(
new
{ style =
"font-weight: normal; font-size:75%"
}).HtmlAttributes(
new
{ @style =
"text-align:center; font-weight: normal; font-size:75%"
});
})
);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(
true
)
.ServerOperation(
false
)
.Events(events => {
events.Error(
"error_handler"
);
})
.Model(model =>
{
model.Id(e => e.PlanScriptureID);
model.Field(e => e.ProductTypeID).Editable(
false
);
})
.PageSize(5)
.Create(read => read.Action(
"Scripture_Create"
,
"Scripture"
))
.Read(read => read.Action(
"Scripture_Read"
,
"Scripture"
))
.Update(read => read.Action(
"Scripture_Update"
,
"Scripture"
))
)
)
<script type=
"text/javascript"
>
function
error_handler(e) {
if
(e.errors) {
var
message =
"Errors:\n"
;
$.each(e.errors,
function
(key, value) {
if
(
'errors'
in
value) {
$.each(value.errors,
function
() {
message +=
this
+
"\n"
;
});
}
});
alert(message);
}
}
function
getCurrentEditedModel() {
var
grid = $(
"#grid"
).data(
"kendoGrid"
);
var
editRow = grid.tbody.find(
"tr:has(.k-edit-cell)"
);
return
grid.dataItem(editRow);
}
function
filterProducts() {
var
model = getCurrentEditedModel();
return
{
materialCategoryId: model.MaterialCategoryID
};
}
function
filterProductTypes() {
var
model = getCurrentEditedModel();
return
{
productTypeID: model.ProductTypeID
};
}
</script>
Thanks for the help