重新绑定Kendo Grid中的DropDown值

Question

我有一个带有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>