剑道UI延迟加载

本文关键字：延迟加载 UI 剑道 | 更新日期: 2023-09-27 18:34:40

我正在使用以下代码。谁能告诉我如何使用页码而不是滚动条？

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

如果我需要其他东西来获取延迟加载的数据，请告诉我。

剑道UI延迟加载

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

DataSourceRequest包含数据库操作所需的所有信息，例如排序、聚合和分页。因此，您可以将代码简化为以下内容(未测试(

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，则所有数据操作都将在数据库服务器级别执行。用于 MVC ASP.NET 的剑道网格已使用以下框架进行了测试：

实体框架

Linq to SQL

Telerik OpenAccess

冬眠

    .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"))
    )
 )
相关文章：