Grid not displaying data

[Veer]

Hello,

This is my first Kendo UI application. I am trying to create a simple project where it gets data from database and binds it to grid. There are about 350k records I am retrieving from the database. However, the data is not displayed/bind to the grid. I can see the data is being retrieved from database to the calling method but not sure why its unable to bind. I am not sure if its problem returning Json response or something else. Below is the code.

@{
    ViewBag.Title = "Home Page";
}

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-18 col-md-12">
            <div id="grid"></div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {

        $(".textButton").kendoButton();

        $("#grid").kendoGrid({
            dataSource: {
                type: "aspnetmvc-ajax",
                transport: {
                    read: {
                        url: "Read"
                    }
                },
                schema: {
                    data: "Data",
                    model: {
                        id: "Id",
                        fields: {
                            "UserName": { type: "string" },
                            "Application": { type: "string" },
                            "Environment": { type: "string" },
                            "LoginTime": { type: "date" },
                            "IsSuccess": { type: "boolean" },
                            "IP": { type: "string" },
                            "Source": { type: "string" }
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverSorting: true,
                serverSorting: true,
            },
            height: 550,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [{ field: "UserName",title: "User Name" },
                { field: "Application"},
                { field: "Environment"},
                { field: "LoginTime", title: "Login Time" },
                { field: "IsSuccess"},
                { field: "IP" },
                { field: "Source" }
            ]
        });
    });
</script>

public ActionResult Read([DataSourceRequest]DataSourceRequest request)
       {
           IQueryable<Login> logins = db.Logins;

           DataSourceResult result = logins.ToDataSourceResult(request, c => new Models.Logins
           {
               Id = c.Id,
               UserName = c.UserName,
               Application = c.Application,
               Environment = c.Environment,
               LoginTime = c.LoginTime,
               IsSuccess = c.IsSuccess,
               IP = c.IP,
               Source = c.Source
           });

           return Json(result);
       }

Thanks!

[Viktor Tachev]

Hi,

I am glad that the issue has been resolved.

With that said the server operations are enabled for the grid. With such setup you need to implement the paging and sorting operations manually on the server.

Check out the following resources that describe the functionality in more detail:

• http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverPaging
• http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverSorting

• http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total

Regards,
Viktor Tachev
Telerik

 

 

[Veer]

Thanks Viktor,

I was able to get it to work. 

Can you please guide me with filtering on server side now.

Thanks

[Viktor Tachev]

Hi,

Using server-side filtering would require implementing custom logic that will filter the data. Also you need to ensure that the serverFiltering property is set to true.

• http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverFiltering

Regards,
Viktor Tachev
Telerik

 

 

[Viktor Tachev]

Hi,

In order for the dataSource to retrieve the data it should call the corresponding ActionMethod. Try to modify the read like below and see how it works for you. The code will call the Read Action in the Home Controller.

transport: {
    read: {
        url: '@Url.Action("Read", "Home")'
    }
},

Regards,
Viktor Tachev
Telerik

 

 

[Veer]

I now see the method in controller is being called. However, that data is still not displayed. Please find the screenshot of Json response attached. I am not sure if this is how it supposed to be.

Thanks

[Viktor Tachev]

Hi,

I tested the behavior with dummy data and the items are shown as expected in the grid. This is the setup I was using.

<div id="grid2"></div>

<script>
$(document).ready(function () {

    $("#grid2").kendoGrid({
        dataSource: {
            type: "aspnetmvc-ajax",
            transport: {
                read: {
                    url: '@Url.Action("Read"  /*Action*/, "Home" /* Controller */)'
                }
            },
            schema: {
                data: "Data",
                model: {
                    id: "ProductID",
                    fields: {
                        "ProductID": { type: "string" },
                        "ProductName": { type: "string" }
                    }
                }
            },
            pageSize: 20,
            serverPaging: true,
            serverSorting: true,
            serverSorting: true,
        },
        height: 550,
        filterable: true,
        sortable: true,
        pageable: true,
        columns: [{ field: "ProductID", title: "User Name" },
            { field: "ProductName" }
        ]
    });
});
</script>

public ActionResult Read([DataSourceRequest]DataSourceRequest request)
{

    return Json(GetProducts().ToDataSourceResult(request));


}

private static IEnumerable<ProductViewModel> GetProducts()
{

    List<ProductViewModel> collection = new List<ProductViewModel>();

    for (int i = 0; i < 100; i++)
    {
        collection.Add(new ProductViewModel()
        {
            ProductID = i,
            Discontinued = true,
            ProductName = "ProductName" + i.ToString(),
            UnitsOnOrder = i,
            UnitPrice = 10.45M + i,
            UnitsInStock = i + 3,
            LastSupply = DateTime.Now.AddHours(i),
            CategoryID = i,
            Category = new CategoryViewModel() { CategoryID = i, CategoryName = "Name " + i.ToString() }
        });
    }

    return collection.AsEnumerable();
}

Let me know if I am missing something.

Also, would you elaborate on why are you not using the MVC Grid wrapper?


Regards,
Viktor Tachev
Telerik

 

 

[Veer]

I figured the issue.

I had to set the behavior for Json response and it worked. However, I am not getting all the records from the database. It only shows one page on grid.

Also what is the difference using grid via MVC wrapper or creating via Script?

return Json(result, JsonRequestBehavior.AllowGet);