Change Value of kendo grid based on second datasource

Question

I am very new to both kendo and javascript so excuse any lapses in knowledge. I have a kendo grid with a field called TicketStatusID. I have another independent datasource with TicketStatusID and TicketStatusName. Is there a way to replace TicketStatusID in my grid with TicketStatusName from my other datasource?

here is my grid:

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}" }
        ]
    });

and here is my second datasource:

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--"
});

I think I may be onto something with this solution here - http://demos.telerik.com/kendo-ui/grid/editing-custom - but Telerik's documentation offers no explanation of how to implement. Thanks

Answer 1

Do it from this example.

Add this field where you want to change kendo grid.

$.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
        });

from below code your problem is solve..try it first.

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

Answer 2

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

Remember your StatusDatasource should be top level, I mean available as windows.StatusDatasource , and both initialized and read data before grid initialization (without first condition there will be an error, and without second you will see undefined inside a column).