根據第二個數據源更改劍道網格的值

Question

我對kendo和javascript都很陌生，因此請原諒知識的任何失誤。 我有一個Kendo網格，其中的字段名為TicketStatusID。 我還有另一個具有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

從本示例中進行操作。

將此字段添加到要更改劍道網格的位置。

$.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 ）。