Kendo UI懒加载

Question

我正在使用下面的代码。任何人都可以告诉我如何使用页码而不是滚动条？

我Index.cshtml页面会像

<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> 

我的控制器就会像下面

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); 
    } 

请让我知道如果我需要别的东西来获取数据作为延迟加载。

Answer 1

你在正确的轨道上，但它实际上比你想象的要容易得多。您尝试使用`ToDataSourceResult（）扩展方法处理Kendo处理的功能。

DataSourceRequest包含数据库操作所需的所有信息，如排序，聚合和分页。所以，你可以到simplfy你的代码非常以下（未测试）

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); 
} 

进一步的阅读来看看这个链接：

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

从剑道网站：

如何实现分页，排序，过滤和分组？

如果您的模型支持IQueryable接口或者是DataTable，网格会自动进行分页，排序，过滤，分组和聚合。对于服务器绑定场景，不需要额外的步骤 - 只需将IQueryable传递给网格构造函数即可。检查服务器绑定帮助主题以获取更多信息。

对于ajax绑定场景，必须使用ToDataSourceResult扩展方法来执行数据处理。检查ajax绑定帮助主题以获取更多信息。如果你的模型没有实现IQueryable，则应该实现自定义绑定。这意味着开发人员负责分页，排序，过滤和分组数据。更多信息可以在自定义绑定帮助主题中找到。

重要：

将在数据库服务器级别，如果底层的IQueryable提供商支持表达式树到SQL的翻译来进行所有的数据操作。剑道格为ASP.NET MVC已经测试了以下框架：

实体框架

的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")) 
    ) 
)