perceived performance of the app.

[Trent Jones]

I'd like to load a page with a grid of paged data where in MVC with the model i can set the first page of data to the grid.  thereby preventing the grid from retrieving it after the page loads.

so when you first hit the page and it loads the first page of data is already ready!

any ideas on how to accomplish this.  i guess i could set the data in JS at the bottom of the page and then set the datasource url instead of configuring it via the MVC helper.  seems hokey.

[Daniel]

Hello Trent Jones,

This can be achieved by passing the data initially to the Grid e.g.

Html.Kendo().Grid(Data)

The Grid will automatically load only the data for the first page and will not make an additional request when loaded.  Regards,
Daniel
the Telerik team

[Trent Jones]

I guess this will still allow the page numbers and next buttons to continue to work.  And it prevents the Ajax from being called initially?

[Atanas Korchev]

Hello Trent,

 In order for this to happen you need to set the ServerOperation setting of your data source to false.

Kind regards,
Atanas Korchev
the Telerik team

[Trent Jones]

I need the ability to preload with the view the first 10 records (based on page size) and set the grid on page load.  Then when the next buttons are clicked in pager for the server operation to happen.

Basically like this:

@(Html.Kendo().Grid<ContactModel>(Model.Contacts)

            .Name("contact-list")

            .TableHtmlAttributes(new { @class = "grid" })

            .DataSource(d =>

            {

                var dsStep = d.Ajax();

                dsStep.Read(read => read.Action("_Grid", "Home"));

                dsStep.PageSize(5);

                dsStep.Total(Model.Total);

                dsStep.ServerOperation(true);

            })

            .Columns(columns =>

                {

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

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

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

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

 

                })

            .Resizable(r => r.Columns(true))

            .Pageable()

            .Events(events => events.DataBound("OnDataBound"))      

            .Sortable(sort => sort.SortMode(GridSortMode.SingleColumn))

            .Selectable(a => a.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))

      )

So from here you can see....  Model.Contacts contains the first 5 items... The Model.Total is the total count of the data source (in my case over 50).

If the above isn't possible, can i just set the source via javascript in a $(function(){});

[Daniel]

Hello Trent,

Sorry, I misunderstood your previous question. Yes, passing the model initially will prevent the Ajax request from being(if there is any data) and the Grid will query the data on the server only for the first page. If you wish to query the data with custom code then you should use custom binding like described in this topic.

Kind regards,
Daniel
the Telerik team

[Trent Jones]

Ya, that didn't work either.  That makes use of the BindTo which also blocks the pager from knowing more data exists.

I also saw mention of:

requestStart: function(e) {

                    e.preventDefault();

                    console.log("On datasource reqeust start");

                },

that the e.preventDefault would now block the request but in firefox it is still requesting....

Any more help you can give or example would be great.  I know there are others trying to do the same thing out there.

-Trent

[Daniel]

Hello Trent,

I attached a small sample project with two Grids - one that gets its data populated initially and one which request is being prevented. Please check it and let me know if they work as expected on your side.

Regards,
Daniel
the Telerik team

[Trent Jones]

Ok, so your solution seems to have the same issues I am facing.... In your HomeController you are returing repository.Products to the view which is the entire 77 products.  What if the collection had 7000 records in it.

In the first grid, you set the Grid initially to this collection and now the grid knows the total to display and for the pager.

I want to limit my request to the database (or custom source in my case) and would rather do this in the controller by default.

public ActionResult Index()

        {

            ViewBag.Message = "Welcome to ASP.NET MVC!";

            ViewBag.Total = repository.Products.Count();

            return View(repository.Products.Take(10));

        }

Then in the view do this:

@(Html.Kendo().Grid<GridInLineEditing.Models.ProductViewModel>(Model)

    .Name("grid")

    .Columns(columns =>

    {

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

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

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

    })

    .Pageable()

    .Sortable()

    .Filterable()   

    .DataSource(dataSource => dataSource

        .Ajax()

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

        .Total(ViewBag.Total)

        )

    )

Setting the total from the viewbag.... however, the grid doesn't like this and rather updates the total based on the model passed in....

For second grid (keeping the .Take(10) and ViewBag.Total in the controller) i have this:

@(Html.Kendo().Grid<GridInLineEditing.Models.ProductViewModel>()

    .Name("preventRequest")

    .Columns(columns =>

    {

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

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

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

    })

    .Pageable()

    .Sortable()

    .Filterable()   

    .DataSource(dataSource => dataSource

        .Ajax()

        .Events(e=> e.RequestStart("requestStart"))

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

        .Total(ViewBag.Total)

        )

         

    )

Which leaves the grid empty by default but the pager is correct and you can now click the pages and it works.  Click page 2, click page 1, etc.

So i then added this to the page:

var count = 0;

        var x = @Html.Raw(Json.Encode(@Model));

 

        function requestStart(e) {

            if (count === 0) {

                $("#preventRequest").data("kendoGrid").dataSource.data(x);

                //Doesn't work

                $("#preventRequest").data("kendoGrid").dataSource.total(@ViewBag.Total);

                e.preventDefault();

            }

            count++;

        }

Encode the @Model (10 records).  then if the count === 0 (first time page load) prevent the grid from calling ajax method...  then use the variable x to populate the grid.  

This in turn sets the pager back to only 1 page because x is of length 10.

So long story short, seems like i should be able to set the total after the fact somehow.  But neither from the MVC Helper or straight javascript can i tell the grid, 'Here are ten things to display but there are 77 in total' unless i allow the grid to make ajax call after page load.

Does this make sense what i want to do.  I just want the grid to be correct with 10 items on page load (no ajax call) and know there are 77 items without having to pass all 77 items into the grid. 

[Daniel]

Hello Trent,

As in one of my previous replies I can say that the Grid will automatically perform the query and will serialize only the needed records. Check this screen cast. If wish to execute the paging, sorting, etc. then you should enable custom binding with the EnableCustomBinding method.
Regarding the code in the requestStart event - the total method can be used only to get the total number of records. If neither of the aforementioned approaches works for you, then I can suggest to set the internal parameter(_total) and then refresh the pager:

if (count === 0) {
  var grid = $("#preventRequest").data("kendoGrid");

  grid.dataSource.data(x);
  grid.dataSource._total = @ViewBag.Total;
  grid.pager.refresh();
  e.preventDefault();
}

Regards,
Daniel
the Telerik team