Question

我在Kendo网格上有一个kendo下拉列表（更具体地说，它使用的是Telerik MVC包装器）。在网格的行上单击“编辑”按钮时，下拉列表从我控制器中的ajax jsonresult数据源获取其数据。我想将一个ID传递给此数据源方法，以便我可以基于此ID过滤结果。但是，此ID针对包含嵌入式下拉列表编辑器的表中的行存在。

我正在寻找通过其transport.read.data（）函数获取包含下拉列表的行的dataItem。我将e作为参数传递给该函数，但它似乎未包含任何有用的东西，例如e.sender。这个对象没有引用元素，因此我似乎也无法将其用于任何有用的东西。到目前为止，我所做的最好的事情就是获得对网格的引用（因此我可以访问grid.dataItem函数，但是我无法将任何有意义的信息传递给它来获取当前活动行的dataItem。

这是网格的简化版本，不包括其他不必要的字段，等等。

    @(Html.Kendo().Grid<Grants.ViewModels.ScheduleOfWorkItemViewModel>()
        .Name("NewScheduleOfWorkItems")
        .Columns(columns =>
        {
            columns.Bound(col => col.ScheduleOfWorkItemID).Visible(false);                  
            columns.Bound(col => col.PercentageItemComplete).HtmlAttributes(new { @class = "cell-percentage-item-complete" }).Title("% Comp").Width(100).Format("{0:P2}").EditorTemplateName("SORREFPercentageItemComplete");             
            columns.Command(commandCol =>
            {
                commandCol.Edit();
                commandCol.Destroy();
            }).Width(100);                  
        })
        .Sortable()
        .Pageable(pageable => pageable.Refresh(true).PageSizes(new List<object> { 10, 20, "all" }).ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Create(create => create.Action("Add_ScheduleOfWorkItem", "ScheduleOfWork"))
            .Update(create => create.Action("Add_ScheduleOfWorkItem", "ScheduleOfWork"))
            .Read(read => read.Action("GetScheduleOfWorkItems", "ScheduleOfWork").Data("GetIDForGetScheduleWorkItems"))
            .Model(model =>
            {
                model.Id(c => c.ScheduleOfWorkItemID);
                model.Field(c => c.ConcatenatedRenderedDescription).Editable(false);
                model.Field(c => c.UnitTypeName).Editable(false);
                model.Field(c => c.Cost).Editable(false);
                model.Field(c => c.AdjustedTotal).Editable(false);
            })
            .Destroy(delete => delete.Action("RemoveScheduleItemFromScheduleOfWork", "ScheduleOfWork"))
            .Sort(sort => sort.Add("ScheduleItemOrderNo").Ascending()) // <-- initial sort expression
        )                
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Events(events =>
        {                    
            events.Edit("onSORREFEdit");
            events.Save("onSORREFSave");
            events.DataBound("onSORREFDataBound");
        })
    )

这是下拉列表编辑器模板

  @(Html.Kendo().DropDownList()
    .Name("SORREFPercentageItemCompleteId")
    .DataTextField("PercentageGrantItemCompleteText")
    .DataValueField("PercentageGrantItemCompleteId")
    .DataSource(source => {
        source.Read(read =>
        {
            read.Action("GetPercentageGrantItemCompleteLookups", "ScheduleOfWork").Data("SORREFPercentageItemCompleteData");
        });
    })
    .HtmlAttributes(new { style = "width: 100%" })
    .OptionLabel("Percentage complete...")
    .Events(events =>
    {
        events.Select("onSORREFPercentageItemCompleteSelect");
    })
    )

这是到目前为止，我的JS函数，用于返回数据，这是行不通的。

var SORREFPercentageItemCompleteData = function (e) {    
    var $tr = $($(this)[0].element).closest("tr"); // "this" is useless? - how can i get my tr?
    var grid = $("#NewScheduleOfWorkItems").data("kendoGrid"); // grid id ok
    var dataItem = grid.dataItem($tr);
    return { scheduleOfWorkItemId: dataItem.ScheduleOfWorkItemID };
}

Answer 1

将从URL字符串读取的dropDownList数据源传输更改为包含

的配置项

URL
引用编辑行容器的自定义container字段
将data项作为函数返回URL的其他参数
- 该函数将使用容器查找行以查找网格和行模型ID值

以下代码位于基于演示https://dojo.telerik.com/@RichardAD/uZIguWAn的dojo https://demos.telerik.com/kendo-ui/grid/editing-custom中。

最终的结果是，下拉ajax数据查询将包含额外的参数
productID = 所选行的productID

            function categoryDropDownEditor(container, options) {
                $('<input required name="' + options.field + '"/>')
                    .appendTo(container)
                    .kendoDropDownList({
                        autoBind: false,
                        dataTextField: "CategoryName",
                        dataValueField: "CategoryID",
                        dataSource: {
                            type: "odata",
                            transport: {

// originally
// read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"

// magical tweakage
read: 
{
  container: container, // make container available to data function
  url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
// see API documentation for transport.read.data
// https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.read#transport.read.data
, data: function (e) {

    grid = this.container.closest(".k-grid").data("kendoGrid");
    rowuid = this.container.closest("tr").data("uid");
    rowIdField = grid.dataSource.options.schema.model.id;

    result = {};
    result [rowIdField] = grid.dataSource.getByUid(rowuid)[rowIdField];

    return result;    
  }
}

Answer 2

在这种情况下，我要做的只是使用表格的Edit事件。当用户尝试编辑行时，事件将为您提供所需的ID。将其传递给js中的全局变量，例如

var selectedRowId = // the row id

并添加此参数以在读取的下拉列表中返回。

return { scheduleOfWorkItemId: selectedRowId };

我知道这不是最优雅的解决方案，但它对我有用，我相信这很容易。

从Kendo Dropdownlist网格上的内联编辑器中获取transport.read.data（）函数中的dataitem

2 个答案: