Question

我对kendo和javascript都很陌生，所以请原谅任何知识失误。我有一个名为TicketStatusID的字段的kendo网格。我有另一个独立的数据源，包括TicketStatusID和TicketStatusName。有没有办法用我的其他数据源中的TicketStatusName替换我的网格中的TicketStatusID？

这是我的网格：

var commentsDatasource = new kendo.data.DataSource({
        type: "odata",
        transport: {
            read: {
                //url: sBaseUrl,
                url: baseUrl + "TicketIssueComment",
                type: "get",
                dataType: "json",
                contentType: "application/json"
            },
            create: {
                url: baseUrl + "TicketIssueComment",
                type: "post",
                dataType: "json",
                ContentType: 'application/json',
                success: refresh
            },
        },

        schema: {
            data: "value",
            total: function (data) {
                return data['odata.count'];
            },
            model: {
                id: "TicketCommentID",
                fields: {
                    TicketCommentID: { type: "number" },
                    TicketID: { type: "number" },
                    TicketCommentValue: { type: "string" },
                    TicketCommentCreatedBy: { type: "string", defaultValue: "z13tas", editable: false },
                    TicketCommentCreatedTS: { type: "date", editable: false },
                    TicketStatusID: { type: "number", editable: false },
                    //TicketStatusName: { type: "string", editable: false }
                }
            }
        },
        filter: { field: "TicketID", operator: "eq", value: filterValue },

        pageSize: 50,
        serverPaging: true,
        serverFilering: true,
        serverSorting: true,
        sort: { field: "TicketID", dir: "asc" },
    });



    //-----------------KENDO GRID-----------------
    $("#gridComments").kendoGrid({
        dataSource: commentsDatasource,
        pageable:
            {
                refresh: true,
                pageSizes: [10, 25, 50, 100],
                buttonCount: 5
            },
        //height: 300,
        width: 300,
        //sortable: true,
        toolbar: ["create", "save", "cancel"],
        scrollable: true,
        reorderable: true,
        editable: true,
        selectable: "row",
        resizable: true,
        edit: function edit(e) {
            if (e.model.isNew() == false) {
                $('input[name=TicketCommentValue]').parent().html(e.model.TicketCommentValue);
            }
        },
        columns: [ 
            { field: "TicketCommentValue", title: "Comment", width: "500px" },
            { field: "TicketStatusID", title: "Status", width: "100px" }, 
            { field: "TicketCommentCreatedBy", title: "Created By", width: "100px" },
            { field: "TicketCommentCreatedTS", title: "Created Date", width: "150px", format: "{0:MM-dd-yyyy hh:mm tt}" }
        ]
    });

这是我的第二个数据源：

var StatusDatasource = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: {
            dataType: "json",
            url: baseUrl + "TicketIssueStatusView",
        }
    },
    schema: {
        data: "value",
        total: function (data) {
            return data['odata.count'];
        },
        model: {
            id: "TicketStatusID",
            fields: {
                TicketStatusID: { type: "number" },
                TicketStatusName: { type: "string" },
                TicketStatusDescription: { type: "string" },
                TicketStatusUpdatedTS: { type: "date" },
                TicketStatusUpdatedBy: { type: "string" },
            }
        }
    },
    serverFilering: true,
    optionLabel: "--Select Value--"
});

我想我可能会在这里解决这个问题 - http://demos.telerik.com/kendo-ui/grid/editing-custom - 但Telerik的文档没有提供如何实施的解释。感谢

Answer 1

从这个例子中做到这一点。

将此字段添加到要更改kendo网格的位置。

$.ajax({
            cache: false,
            type: "POST",
            url: "@Html.Raw(Url.Action("assing", "Customer"))",
            data: postData,
            complete: function (data) {
                //reload antoher grid
                var grid = $('#Customer-grid').data('kendoGrid');
                grid.dataSource.read();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError);
            },
            traditional: true
        });

从下面的代码中你的问题就解决了......首先。

 var grid = $('#Customer-grid').data('kendoGrid');
 grid.dataSource.read();

Answer 2

{ 
    field: "TicketStatusID",
    title: "Status", 
    width: "100px",
    template: #= StatusDatasource.get(data.TicketStatusID).TicketStatusName #
}

请记住，您的StatusDatasource应该是顶级，我的意思是windows.StatusDatasource，并且在网格初始化之前初始化和读取数据（没有第一个条件会出现错误，没有第二个你会看到列中的undefined）。

基于第二个数据源更改kendo网格的值

2 个答案: