我有一个带有Tool bar template的Kendo Grid和网格内的DropDown控件（ForeignKey列）。当用户从工具栏模板上的DropDownList中选择一个值时，我需要根据选择重新绑定网格内的Dropdown。
@(Html.Kendo().Grid((IEnumerable<Doc.Web.Models.Common.ABSModel>)Model.abs_lst)
.Name("grid")
.Columns(columns =>
{
columns.Bound(o => o.ABSID).Visible(false);
columns.Bound(o => o.ABS).Title("No");
columns.ForeignKey(p => p.AreaID, (System.Collections.IEnumerable)ViewData["Areas"], "area_id", "area_no")
.Title("Area No");
columns.ForeignKey(p => p.FacilityID, (System.Collections.IEnumerable)ViewData["Facilities"], "FacilityID", "Facility")
.Title("Facility ID");
columns.Bound(o => o.AreaFacility).Title("ABS");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(182);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Filterable()
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar">
<a href="/ABS/EditingInline_Read?grid-mode=insert" class="k-button k-button-icontext k-grid-add">
<span class="k-icon k-add"></span>Add New Record
</a>
<label class="category-label" for="category">Site:</label>
@(Html.Kendo().DropDownListFor(m => m.SiteID)
.Name("SiteID")
.DataTextField("Text")
.DataValueField("Value")
.Events(e => e.Change("categoriesChange"))
.Value(Model.SiteID.ToString())
.DataSource(ds =>
{
ds.Read("ToolbarTemplate_Categories", "ABS");
})
)
</div>
</text>);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.ABSID))
.Create(update => update.Action("EditingInline_Create", "ABS").Data("additionalInfo"))
.Read(read => read.Action("EditingInline_Read", "ABS").Data("additionalInfo"))
.Update(update => update.Action("EditingInline_Update", "ABS").Data("additionalInfo"))
.Destroy(update => update.Action("EditingInline_Destroy", "ABS").Data("additionalInfo"))
.Model(model =>
{
model.Field(p => p.ABS).Editable(false);
model.Field(p => p.AreaFacility).Editable(false);
})
)
)
<script type="text/javascript">
function error_handler(e) {
var message = "Operation Failure.";
if (e.errors) {
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
// message += this + "\n";
});
}
});
}
alert(message);
$("#grid").data("kendoGrid").dataSource.read();
}
</script>
<script>
function additionalInfo() {
//http://www.kendoui.com/forums/kendo-ui-web/grid/pass-additional-parameters-to-read-ajax-datasource-method---mvc.aspx
return {
site: $("#SiteID").val()
}
}
</script>
我已尝试按照Jquery Ajax调用重新绑定网格中的下拉列表，但是我收到以下错误。
未捕获的TypeError：无法读取未定义的属性“dataSource”
<script type="text/javascript">
function loadareaOnSite() {
var murl = "/ABS/GridDropDown_Area/";
$.ajax({
url: murl,
data: { SiteID: $("#SiteID").val() },
cache: false,
type: "POST",
success: function (data) {
var ddlworkItem = $('#AreaID').data('kendoDropDownList');
var main = [];
main.push({ "text": "Select Below...", "value": "0" });
for (var x = 0; x < data.length; x++) {
main.push({ "text": data[x].Text, "value": data[x].Value });
}
ddlworkItem.dataSource.data(main);
},
error: function (reponse) {
alert("error : " + reponse);
}
});
}
</script>