Kendo UI延迟加载

Question

I am using the following code. Can anybody tell me how will I use the page number instead of scroll bar?

My Index.cshtml page will be like

<div id="CustomerProfile">
<div id="GridCusotmerProfile">
    @(Html.Kendo().Grid(Model)
                .Name("grdCustomerProfile")

                .Columns(coloumns =>
                    {
                        coloumns.Bound(p => p.CustomerID).Title("Customer ID");
                        coloumns.Bound(p => p.UserId).Title("User Id");
                        coloumns.Bound(p => p.ComapnyName).Title("Company Name");
                        coloumns.Bound(p => p.ContactPerson).Title("Contact Person");
                        coloumns.Bound(p => p.AccountNumber).Title("Account Number");
                    }
                )
                .Sortable()                    
                .Scrollable(scrollable => scrollable.Virtual(true))
                .HtmlAttributes(new { style = "height:430px;" })
                .DataSource(dataSource => dataSource
                                              .Ajax()
                                              .PageSize(10)
                                              .Read(read => read.Action("Virtualization_Read", "CustomerProfile"))

                                            )


                )
</div>

My Controller will be like the following

public List<CustomerProfileModel> CustomerDataSource(int page, int pagesize, int skip, int take)
    {
        List<CustomerProfileModel> ModelData = new List<CustomerProfileModel>();

        take = skip + take + (page * 10);
        var CustomerData = (from cp in context.CustomerProfile select cp).OrderBy(x => x.ComapnyName).Take(take).Skip(skip).ToList();

        foreach (var items in CustomerData)
        {
            CustomerProfileModel Model = new CustomerProfileModel();
            Model.CustomerID = items.CustomerID;
            Model.AccountNumber = items.AccountNumber;
            Model.ComapnyName = items.ComapnyName;
            Model.ContactPerson = items.ContactPerson;
            Model.UserId = items.UserId;
            ModelData.Add(Model);
        }

        return ModelData;
    }
public ActionResult Virtualization_Read([DataSourceRequest] DataSourceRequest request, string page,string pagesize,string skip,string take)
    {
        return Json(CustomerDataSource(Convert.ToInt32(page),Convert.ToInt32(pagesize),Convert.ToInt32(skip),Convert.ToInt32(take)).ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
    }

public List<CustomerProfileModel> CustomerDataSource(int page, int pagesize, int skip, int take)
    {
        List<CustomerProfileModel> ModelData = new List<CustomerProfileModel>();

        take = skip + take + (page * 10);
        var CustomerData = (from cp in context.CustomerProfile select cp).OrderBy(x => x.ComapnyName).Take(take).Skip(skip).ToList();

        foreach (var items in CustomerData)
        {
            CustomerProfileModel Model = new CustomerProfileModel();
            Model.CustomerID = items.CustomerID;
            Model.AccountNumber = items.AccountNumber;
            Model.ComapnyName = items.ComapnyName;
            Model.ContactPerson = items.ContactPerson;
            Model.UserId = items.UserId;
            ModelData.Add(Model);
        }

        return ModelData;
    }

public ActionResult Virtualization_Read([DataSourceRequest] DataSourceRequest request, string page,string pagesize,string skip,string take)
    {
        return Json(CustomerDataSource(Convert.ToInt32(page),Convert.ToInt32(pagesize),Convert.ToInt32(skip),Convert.ToInt32(take)).ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
    }

Please let me know if I need something else to get data as lazy loading.

Answer 1

Your on the right tracks, but it is actually a lot easier than you think. Your trying to hand roll functionality that Kendo handles with the `ToDataSourceResult() extension method.

The DataSourceRequest contains all the information needed for database operations, such as ordering, aggregates and paging. So you can simplfy your code down to pretty much the following (NOT TESTED)

public ActionResult Virtualization_Read([DataSourceRequest] DataSourceRequest request)
{
            var CustomerData = (from cp in context.CustomerProfile select cp); // don't call toList() this exectues the SQL and pulls data into memory, leave it as a Queryable object so we can pass it to kendo to add its expressions this will the be a Database operation

            DataSourceResult result = CustomerData.ToDataSourceResult(request, x => new CustomerProfileModel(){
                        CustomerID = x.CustomerID;
                        AccountNumber = x.AccountNumber;
                        ComapnyName = x.ComapnyName;
                        ContactPerson = x.ContactPerson;
                        UserId = x.UserId;
                });



            return Json(result);
}

For further reading take a look at this link:

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding

From the Kendo Site:

How do I implement paging, sorting, filtering and grouping?

If your model supports the IQueryable interface or is DataTable the grid will do paging, sorting, filtering, grouping and aggregates automatically. For server binding scenarios no additional steps are required - just pass the IQueryable to the Grid constructor. Check the server binding help topic for additional info.

For ajax binding scenarios the ToDataSourceResult extension method must be used to perform the data processing. Check the ajax binding help topic for additional information. If your model does not implement IQueryable custom binding should be implemented. This means that the developer is responsible for paging, sorting, filtering and grouping the data. More info can be found in the custom binding help topic.

Important:

All data operations will be performed at database server level if the underlying IQueryable provider supports translation of expression trees to SQL. Kendo Grid for ASP.NET MVC has been tested with the following frameworks:

Entity Framework

Linq to SQL

Telerik OpenAccess

NHibernate

Answer 2

    .Columns(columns =>
    {
        columns.Bound(p => p.ID).Title("ID").Width(100).Visible(false);
        columns.Bound(p => p.Apply).Title("Apply").Width(100);
        columns.Bound(p => p.TaxName).Title("Tax Name").Width(100);
        columns.Bound(p => p.TaxPercent).Title("Percent").Width(130);
        columns.Bound(p => p.OrderApplied).Title("Oreder Applied").Width(130);
        columns.Bound(p => p.Compund).Title("Compund").Width(130);


        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
     .Pageable()
    .Sortable()
     .Scrollable(scr=>scr.Height(430)) 
    //.Scrollable(scrollable => scrollable.Virtual(true))
    .HtmlAttributes(new { style = "height:430px;" })
    .Filterable()
    .DataSource(dataSource => dataSource
    .Ajax()
     .PageSize(10)
    .Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.ID))
    .ServerOperation(false)
    .Create(update => update.Action("EditingInline_Create", "Taxes"))
    .Read(read => read.Action("EditingInline_Read", "Taxes"))
    .Update(update => update.Action("EditingInline_Update", "Taxes"))
    .Destroy(update => update.Action("EditingInline_Destroy", "Taxes"))
    )
 )