How to link kendo dropdownlist to model (strongly typed view)
I wanted to link two strongly typed view kendo dropdownlists (@model) in a cascading way. This model is a List <Enterprise>:
class Enterprise
{
string EnterpriseId {get; set;} //Bind this to first dropdown
List<FinYear> FinancialYears {get; set;}
}
class FinYear
{
string FinancialYear {get; set;} //Bind this to second dropdown
string EnterpriseId [get; set;}
}
How do I get the data from the <FinYear> list correctly in the dropdown menu?
+3
source to share
2 answers
Solution to make it work: I used a combination of javascript and html
Html
// first dropdown
@(Html.Kendo.DropDownList()
.Name("entDDL")
.DataTextField("EnterpriseId")
.DataValueField("EnterpriseId")
.BindTo(Model)
.Events(e => e.Select("on_select")))
<input id="fDDL"> // second dropdown
Javascript
<script>
//on document ready
$(document).ready(function (){
var finYearDDL = $("#fDDL").kendoDropDownList({}).data("kendoDropDownList");});
function on_select(e) {
var dataItem = this.dataItem(e.item.index());
dataItem = JSON.parse(JSON.stringify(dataItem.FinancialYears));
var source = new kendo.data.DataSource({data : dataItem});
// finyear dropdown
var bind = $("#fDDL").kendoDropDownList({
dataSource : source,
datatextField : "FinancialYear",
dataValueField : "FinancialYear",
optionLabel : "Select..."});
}
+4
source to share
When you pass a strongly typed model to the view, if you name the kendo control the same as the name of the property you want to bind to, it will automatically bind the stored value to the control when the view is loaded.
@model TestProject.Models.TestModel
@(Html.Kendo().ComboBox()
.Name("Model property you want to bind")
.Text(Model.TestPropertyText) //Display text of stored value in field
.Placeholder("Place holder text")
//The DataText and DataValue fields bind your listItem text and values
.DataTextField("TestPropertyText")
.DataValueField("TestPropertyId")
.AutoBind(false)
//Now I used a datasource from a server side controller action but
//you should be able to do this also by the .BindTo(Model) as well
.DataSource(d =>
{
d.Read(r => r.Action("GetTestModel_Read","TestController"));
}))
+1
source to share