CODEWITHSUNDEEP
c#linqkendo-uikendo-gridkendo-asp.net-mvc
tau
tau

Reputation: 288

server side operation only return data to grid for particular page

I'm using telrik mvc grid I can get pagination to work but want to know how I can only return the data the user can view.

For example, A user has a total of 50 records page size is set to 5 and the current page is 1. On initial load I only want to return the first 5 rows. Then if the user click on the 2nd page then the next 5 etc.

I can see that the DataSourceRequest request has properties such as page and page size.

Do I configure this client side or via the controller?

Do I get the values from the request page and page size and pass this through to my entity and then perform a linq query or is there a simpler solution?

Any ideas? Thanks

@model IEnumerable<TelerikChecklist.Models.ProductViewModel>

@(Html.Kendo().Grid(Model)
.Name("gridPaging")
.Columns(columns =>
{
    columns.Bound(p => p.ProductName);
    columns.Bound(p => p.UnitsInStock);
    columns.Bound(p => p.UnitPrice);

})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:250px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .PageSize(5)
    .ServerOperation(true)
    .Events(events => events.Error("errorHandler"))
    .Model(model =>
    {
        model.Id(p => p.ProductID);
        model.Field(p => p.ProductID).Editable(false);
        model.Field(p => p.CategoryID).DefaultValue(1);
    })

    .Read(read => read.Action("ServerPaging_Read", "Home"))
)
)

<script type="text/javascript">


    function errorHandler(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>

Upvotes: 0

Views: 1083

Answers (1)

tau
tau

Reputation: 288

The controller needed the controller code below:

 public ActionResult CustomAjaxBinding_Read([DataSourceRequest] DataSourceRequest request)
    {
        var dataContext = new SampleEntities();

        // Convert to view model to avoid JSON serialization problems due to circular references.
        IQueryable<OrderViewModel> orders = dataContext.Orders.Select(o => new OrderViewModel
        {
            OrderID = o.OrderID,
            ShipCity = o.ShipCity,
            ShipCountry = o.ShipCountry,
            ShipName = o.ShipName
        });

        orders = orders.ApplyOrdersFiltering(request.Filters);

        var total = orders.Count();

        orders = orders.ApplyOrdersSorting(request.Groups, request.Sorts);

        if (!request.Sorts.Any())
        {
            // Entity Framework doesn't support paging on unsorted data.
            orders = orders.OrderBy(o => o.OrderID);
        }

        orders = orders.ApplyOrdersPaging(request.Page, request.PageSize);

        IEnumerable data = orders.ApplyOrdersGrouping(request.Groups);

        var result = new DataSourceResult()
        {
            Data = data,
            Total = total
        };

        return Json(result);
    }

The view:

@(Html.Kendo().Grid<TelerikChecklist.Models.Order>()
.Name("Grid")
.Columns(columns =>
{
    columns.Bound(o => o.OrderID).Groupable(false);
    columns.Bound(o => o.ShipCity);
    columns.Bound(o => o.ShipCountry);
    columns.Bound(o => o.ShipName);
})
.Pageable()
.Sortable()
.Filterable()
.Scrollable()
.Groupable()
.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("CustomAjaxBinding_Read", "Home"))
)
)

Upvotes: 1

Related Questions