Unable to access data array in Kendo grid datasource

Question

The Backstory:

I'm tring to do some custom validation for a kendo grid I'm making using their Mvc wrapper. I want to check the user's input against the current data to make sure the user isn't duplicating an entry. To do this, I'll need to access the Grid's data array.

My Code:

@using Kendo.Mvc.UI
@model ViewModel.SecurityManagementViewModel


<div class="container containerOuterBorder">
    <div class="containerBorder">
        <div class="pageTitle">Users</div>
    </div>

    @(Html.Kendo().Grid<User>()
        .Name("Users")
        .Columns(columns =>
        {
            columns.Bound(c => c.LastName).Title("Last Name");
            columns.Bound(c => c.FirstName).Title("First Name");
            columns.Bound(c => c.WindowsId).Title("Windows Id");
            columns.Bound(c => c.Email).Title("Email");
            columns.Bound(c => c.RoleId).Title("Access Role")
                .EditorTemplateName("SecurityManagementEditor").ClientTemplate("#:RoleName#");
            columns.Command(command =>
            {
                command.Edit();
                command.Destroy();
            });
        })
        .ToolBar(toolbar =>
        {
            toolbar.Create().Text("Add New User");
            toolbar.Custom().Text("Manage Roles").Url("/Admin/SecurityRoles");
        })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .Model(model => model.Id(u => u.UserId))
            .Create(update => update.Action("SecurityManagement_Create", "Admin"))
            .Read(read => read.Action("SecurityManagement_Read", "Admin"))
            .Update(update => update.Action("SecurityManagement_Update", "Admin"))
            .Destroy(update => update.Action("SecurityManagement_Destroy", "Admin"))
        )
    )

</div>

<script>
    $(document).ready(function () {
        //logging the grid
        console.log($("#Users").data().kendoGrid);

        //logging the data, by various means
        console.log($("#Users").data().kendoGrid.dataSource.view());
        console.log($("#Users").data().kendoGrid.dataSource._data);
        console.log($("#Users").data("kendoGrid")._data);

        //logging the columns (successful)
        console.log($("#WFMUsers").data("kendoGrid").columns);
    });
</script>

The Problem:

When I try to access the data array from the grid's dataSource, the response is always null in some way. This is made more frustrating by the fact that, logging the grid itself, I can see the data that has already loaded. I can also access, with little effort, other properties, such as columns.

Logs:

The Grid Object. Clearly, the _data array is populated

The Objects Contained in the grid. I Can See Them!

The result of the last 4 lines. The first 3, trying to access _data, all come up empty. The last, accessing columns, is returned without issue.

I have tried:

Multiple ways of phrasing the code.
Restarting Visual Studio
Running on FireFox, Chrome, and IE
Rebooting my computer

I can't understand your problem? When can you access the dataSource and when can't you? — chiapa

Daniel Pflüger Daniel Pflüger · Accepted Answer · 2015-09-25T10:35:13

The script to log the entries is executed in the $(document).ready() function. This means, at this point the DOM is ready but the grid data is loaded via Ajax so the grid is not populated yet at this point of time. The columns however are available as they are part of the grid configuration.

If you type console.log($("#Users").data().kendoGrid.dataSource.view()); into the browser console after the grid was filled, you should see the according entries.

To ensure the data is loaded, you can use the dataBound event of the grid. This is fired when the data is loaded. (See Kendo Documentation)

Unable to access data array in Kendo grid datasource

1 Answers