Pada ComboBox Cascading, ada 2 combobox: parent dan child. Isi combobox child ditentukan oleh pilihan user pada combobox parent.
[code language=”html”]
<div class="form-group">
@Html.LabelFor(model => model.GroupId, new { @class = "col-xs-2 control-label" })
<div class="col-xs-4">
@Html.TextBoxFor(model => model.GroupId, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.FullName)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.DepartmentId, new { @class = "col-xs-2 control-label" })
<div class="col-xs-4">
@Html.TextBoxFor(model => model.DepartmentId, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.DepartmentId)
</div>
</div>
[/code]
[code language=”javascript”]
$(‘#GroupId’).kendoDropDownList({
optionLabel: "Select Group",
dataTextField: "Name",
dataValueField: "GroupId",
dataSource: {
data: @Html.Raw(groups)
}
});
$(‘#DepartmentId’).kendoDropDownList({
autoBind: false,
cascadeFrom: "GroupId",
optionLabel: "Select Department",
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
data: @Html.Raw(departments)
}
})
[/code]
[code language=”csharp”]
public class GroupPresentationStub
{
public int GroupId { get; set; }
public string Name { get; set; }
//…
}
public class DepartmentPresentationStub
{
public int Id { get; set; }
public string Name { get; set; }
public string Code { get; set; }
public int GroupId { get; set; }
//…
}
[/code]
