Creating Kendo UI Hierarchy Grid with no Master/Detail

Question

I have an array of JSON objects being returned from a server that looks something like the following:

[{State: Finished, JobID: 1234, Owner: John}, {State: Finished, JobID: 5678, Owner: Joe}, {State: Active, JobID: 8765, Owner: Jane}, {State: Active, JobID: 4321, Owner: Jill}]

I would like to put this in a hierarchy Kendo UI grid (NOT groupable but rather as shown at http://demos.kendoui.com/web/grid/hierarchy.html) with the master record being State (Finished, Active) and the detail records being the rest of the JSON object each "State" is associated with. Since there are no master/detail relationships like the typical CustomerID/OrderID, etc., per se, I don't think the grid's detailInit function can work here (unless I create my own pseudo master/detail relationship for this purpose?), but please correct me if I'm wrong. In any event, let me know if what I'm is even possible without jumping through too many hoops to get to the end to get there. Having a small working example here or in JSFiddle would be phenomenal too. :) Thanks.

Answer 1

Do you know the list of existing State or you can get it in a request different than the one that you show? If so, you can do:

var data = [
    {State: "Finished", JobID: 1234, Owner: "John"},
    {State: "Finished", JobID: 5678, Owner: "Joe"},
    {State: "Active", JobID: 8765, Owner: "Jane"},
    {State: "Active", JobID: 4321, Owner: "Jill"}
];

var element = $("#grid").kendoGrid({
    dataSource: {
        data    : [
            {State: "Finished"},
            {State: "Active"}
        ],
        pageSize: 10
    },
    height    : 450,
    sortable  : true,
    pageable  : true,
    detailInit: detailInit,
    columns   : [
        {
            field: "State",
            title: "State"
        }
    ]
});

function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            transport: {
                read: function (operation) {
                    operation.success(data);
                }
            },
            pageSize : 6,
            filter   : { field: "State", operator: "eq", value: e.data.State }
        },
        scrollable: false,
        sortable  : true,
        pageable  : true,
        columns   : [
            { field: "State", width: 70 },
            { field: "JobID", title: "JobID", width: 100 },
            { field: "Owner", title: "Owner" }
        ]
    });
}

Here, I use data as the retrieved content but you can change in the DataSource that is in the function detailInit the read function for you the url.

If you don't know the list of existing states you can implement a JavaScript function given the result of the DataSource, return the list of different State. It can be something like:

var data = null;

// Create a DataSource for reading the data
var dataSource = new kendo.data.DataSource({
    transport: {
        read: function (op) {
            data = ([
                {State: "Finished", JobID: 1234, Owner: "John"},
                {State: "Finished", JobID: 5678, Owner: "Joe"},
                {State: "Active", JobID: 8765, Owner: "Jane"},
                {State: "Active", JobID: 4321, Owner: "Jill"}
            ]);
            initGrid(data);
        }
    }
});
dataSource.read();

// Function that receives all the data and Creates a Grid after eliminating 
// duplicates States
function initGrid(data) {
    var element = $("#grid").kendoGrid({
        dataSource: {
            transport: {
                read: function (operation) {
                    var states = [];
                    var result = [];
                    $.each(data, function (idx, elem) {
                        if (!states[elem.State]) {
                            states[elem.State] = true;
                            result.push({ State: elem.State });
                        }
                    });
                    operation.success(result);
                }
            },
            pageSize : 10
        },
        height    : 450,
        sortable  : true,
        pageable  : true,
        detailInit: detailInit,
        columns   : [
            {
                field: "State",
                title: "State"
            }
        ]
    });
}

// Function that creates the inner Grid and uses originally read 
// data for avoiding going to the server again. 
function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            transport: {
                read: function (operation) {
                    operation.success(data);
                }
            },
            pageSize : 6,
            filter   : { field: "State", operator: "eq", value: e.data.State }
        },
        scrollable: false,
        sortable  : true,
        pageable  : true,
        columns   : [
            { field: "State", width: 70 },
            { field: "JobID", title: "JobID", width: 100 },
            { field: "Owner", title: "Owner" }
        ]
    });
}