Kendo UI Lazy Загрузка

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

Ваш правильный путь, но на самом деле это намного проще, чем вы думаете. Ваша попытка использовать рулонную функциональность, которую Kendo обрабатывает с помощью метода расширения ToDataSourceResult().

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 в конструктор Grid. Дополнительную информацию см. В разделе справки о привязке сервера.

Для сценариев привязки ajax для выполнения обработки данных должен использоваться метод расширения ToDataSourceResult. Дополнительные сведения см. В разделе справки по привязке ajax. Если ваша модель не реализует пользовательскую привязку IQueryable, она должна быть реализована. Это означает, что разработчик отвечает за пейджинг, сортировку, фильтрацию и группировку данных. Более подробную информацию можно найти в теме справки по привязке.

Важно:

Все операции с данными будут выполняться на уровне сервера базы данных, если базовый IQueryable провайдер поддерживает перевод деревьев выражений в SQL. Кендо Сетка для ASP.NET MVC был протестирован со следующими рамками:

Entity Framework

Linq к 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")) 
    ) 
)