首页 文章

从网格上的kendo Dropdownlist内联编辑器获取transport.read.data()函数中的dataitem

提问于
浏览
0

我在Kendo网格上有一个kendo下拉列表(更具体地说,它使用的是Telerik MVC包装器) . 当在网格的行上单击“编辑”按钮时,下拉列表从我的控制器中的ajax jsonresult DataSource获取其数据 . 我想将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 };
}

2 回答

  • 0

    将dropDownList dataSource传输读取从URL字符串更改为包含的配置项

    • 网址

    • 引用编辑行容器的自定义 container 字段

    • data 项目作为返回URL的附加参数的函数

    • 该函数将使用容器查找行以查找网格和行模型ID值

    以下代码位于dojo https://dojo.telerik.com/@RichardAD/uZIguWAn中,该代码基于demo 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;    
      }
    }
    
  • 0

    我为这种情况做的只是使用网格的编辑事件 . 当用户去尝试编辑一行时,该事件将为您提供所需的ID . 将它传递给js中的全局变量

    var selectedRowId = // the row id
    

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

    return { scheduleOfWorkItemId: selectedRowId };
    

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

相关问题