kendo grid maximum call stack exceeded error

Question

Issue

---

I am trying to simply pass an array of objects into kendo.data.HierarchicalDataSource to which then I set that DataSource to the DataSource of my kendo grid.

I keep receiving Maximum Call Stack Exceeded error when i try and do this and was wondering how to debug the issue.

Code

---

So when the user clicks the Open button it will trigger an event that will populate create the DataSource and will populate it like below:

var pDataSource = new kendo.data.HierarchicalDataSource({
    page: 1,
    data: session.UserDetails.Routes,
    schema: {
        model: {
            hasChildren: "Routes",
            fields: {
                guid: { type: "string" },
                description: { type: "string" },
                created: { type: "string" }
            }
        }
    },
    pageSize: 50,
    serverPaging: false,
    serverFiltering: false,
    serverSorting: false,
    filter: { field: "id", operator: "neq", value: "0" }
});

session.UserDetails.Routes array looks something like:

Then I simply set the DataSource on my kendoGrid to the DataSource that I have just created above:

    $("#routeGrid").kendoGrid({
        dataSource: pDataSource,

        filterable: true,
        scrollable: true,
        sortable: true,
        resizable: true,
        pageable: {
            refresh: true,
            pageSizes: true
        },
        columns: [{
            field: "description",
            title: "Title"
        },
        {
            field: "activityTypeDesc",
            title: "Activity"
        },
        {
            field: "created",
            title: "Created",
            template: "#= kendo.toString(kendo.parseDate(created, 'yyyy-MM-dd'), 'dd/MM/yyyy' ) #"
        },
        {
            command: [
        {
            name: "Open",
            template: "<div class='k-button grid-button'><i id='img_Open' class='fa fa-folder-open' aria-hidden='true' onclick='getGridGuidOpen(this)'></i></div>",
            click: getGridGuidOpen
        },
        {
            name: "Sync",

            template: "<div class='k-button grid-button'><i id='img_Sync' class='fa fa-refresh' aria-hidden='true'></i></div>",

            click: getGridGuidSync
        },
        {
            name: "Delete",
            template: "<div class='k-button grid-button'><i id='img_Delete' class='fa fa-times' aria-hidden='true' onclick='getGridGuidDelete(this)'></i></div>",

            click: getGridGuidDelete
        }]
        }]
    });

So whenever the user clicks open again the same code will run. Can anyone see an issue with what I am doing?