unable to bind grid properly

[Imteyaz]

Hello I have a grid in my razor view,
I have added these resources

<link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.common.min.css")">

    <link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.rtl.min.css")">

    <link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.default.min.css")">

 

<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>

    <script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>

    <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>

here is my grid

  

@(Html.Kendo().Grid<Nop.Web.Models.Customer.CustomerInfoModel>()

    .Name("Grid")   

    .Columns(columns => {       

        columns.Bound(p => p.Active);

       // columns.Bound(p => p.cbSubscriptions).ClientTemplate("#=Employee.EmployeeName#");

        columns.Bound(p => p.cbSubscriptions);

        columns.Bound(p => p.FirstName);

        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);   

    })   

    .ToolBar(toolBar => toolBar.Create())

    .Editable(editable => editable.Mode(GridEditMode.InLine))

    .Pageable()

    .Sortable()

    .Scrollable()

            .DataSource(dataSource => dataSource

                .Ajax()

                .Events(events => events.Error("error_handler"))

                .Model(model => model.Id(p => p.Id))

                        .Create(update => update.Action("EditingInline_Create", "Customer"))

                        .Read(read => read.Action("UsersList", "Customer"))

                .Update(update => update.Action("EditingInline_Update", "Grid"))

                .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))

            )

)

<script type="text/javascript">

    function error_handler(e) {

        if (e.errors) {

            var message = "Errors:\n";

            $.each(e.errors, function (key, value) {

                if ('errors' in value) {

                    $.each(value.errors, function () {

                        message += this + "\n";

                    });

                }

            });

            alert(message);

        }

    }

</script>

This works fine. it calls my action in controller to read the data, but the problem is that, it is displaying any rows in grid, even the controller returns the record. I have checked the console, there is no script error, and my network tab shows that these data has been transferred from the server. 

1. data: [{Email:[e-mail], AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…},…]
   1. 0: {Email:[e-mail], AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…}
   2. 1: {Email:[e-mail], AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…}
   3. 2: {Email:[e-mail], AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…}
   4. 3: {Email:[e-mail], AllowUsersToChangeUsernames:false, UsernamesEnabled:false, Username:aasasasasas687,…}
2. total: 4

Am I missing something to add. 

[Nikolay Rusev]

Hello Imteyaz,

data and total fields in the response must be with first capital letter, i.e Data/Total.

If you follow the instructions you should have everything working properly.

Regards,
Nikolay Rusev
the Telerik team