使用基于AJAX的选项卡条中的模板列的Kendo UI可排序网格

时间:2013-07-30 16:32:29

标签: kendo-ui kendo-grid kendo-asp.net-mvc

我一直试图在各个地方寻找一些帮助,解决我在使用Kendo UI网格时出现的问题。

我正在尝试做什么

我正在尝试做的是使用一个服务器绑定网格,该网格在一个标签条中使用模板,我希望使用“LoadContentFrom”加载它以利用按需加载。除此之外,我还需要在网格上实现排序。

我已经尝试了什么

我尝试了很多方法来实现这一目标,但没有取得任何成功。要暂时解决此问题,我使用“内容”功能加载我的标签条中的数据。不利的一面是,我的所有标签条中的所有数据都会在页面加载时加载。这会导致页面加载速度变慢,每次单击列标题进行排序时,页面都会刷新。

摘要问题

所以我的问题是,是否可以使用一个使用“LoadContentFrom”方法的标签条,并在一个可以排序的标签条中有一个服务器绑定网格?

如果有可能,有人可以给我一个例子吗?

我的开发环境

我正在研究基于MVC 4的项目。我使用VB.NET作为我的编程语言。对于使用C#提供答案的人我很好。

我的代码现在是什么样的

下面是我现在的代码示例。

标签条代码

`@Imports CommericalPortal.BusinessData.Entities
@Imports CommericalPortal.Web.Models.Entities
@imports CommericalPortal.Web.My.Resources
@ModelType Customer

@Code
    ViewBag.Settings.PageTitle = Model.OperatingName

    Dim lastSavedTabIndex As Integer
    If Request.Cookies("TabCustomersPolicySavedIndex") IsNot Nothing AndAlso IsNumeric(Request.Cookies("TabCustomersPolicySavedIndex").Value) Then
        lastSavedTabIndex = CInt(Request.Cookies("TabCustomersPolicySavedIndex").Value)
    Else
        lastSavedTabIndex = 1
    End If
End Code

@(Html.Kendo().TabStrip().Name("TabCustomers").SelectedIndex(lastSavedTabIndex) _
    .Items(Sub(actions)
                   actions.Add().Text(TabText.ContactInfoTab).Content(Html.Action("ByLocation", "Contacts", New With {.asPartial = True}).ToHtmlString)
                   actions.Add().Text(TabText.PoliciesTab).Content(Html.Action("ByLocation", "Policies", New With {.asPartial = True}).ToHtmlString)
                   actions.Add().Text(TabText.InvoicesTab).Content(Html.Action("ByLocation", "Invoices", New With {.asPartial = True}).ToHtmlString)
                   actions.Add().Text(TabText.ClaimsTab).Content(Html.Action("ByLocation", "Claims", New With {.asPartial = True}).ToHtmlString)
                   actions.Add().Text(TabText.BillingTab).Content(Html.Action("ForCustomer", "Billing", New With {.asPartial = True}).ToHtmlString)
           End Sub) _
    .Events(Sub(x)
                   x.Select("onSelect")
            End Sub)
    )

<script>
    function onSelect(e) {
        SetupTabStripToRememberActiveTabBetweenPageCalls 
("TabCustomers", "TabCustomersPolicySavedIndex");
    }
</script>`

标签条内容代码(网格)

`@ModelType ilist(of CommericalPortal.BusinessData.Entities.PACInformation)'
@imports CommericalPortal.Web

@(Html.Kendo.Grid(Model).Name("DisplayPAC") _
    .Columns(Sub(columns)
                 columns.Bound(Function(model) model.AccountNumber).Title(CommericalPortal.BusinessData.Resources.BillingAndInvoices.PacAccountNumberLabel_ShortForm).Sortable(False)
                 columns.Bound(Function(model) model.BankNumber).Title(CommericalPortal.BusinessData.Resources.BillingAndInvoices.PacBankNumberLabel_ShortForm)
                 columns.Bound(Function(model) model.TransitNumber).Title(CommericalPortal.BusinessData.Resources.BillingAndInvoices.PacTransitNumberLabel_ShortForm)
                 columns.Bound(Function(model) model).Template(Function(obj) String.Format("<a href='{0}/{1}'>{2}</a>", Url.Content("~/PAC/Edit"), obj.ID, CommericalPortal.Web.My.Resources.GridText.EditLinkText)).Title("")
                 columns.Bound(Function(model) model).Template(Function(obj) String.Format("<a  href='{0}/{1}'>{2}</a>", Url.Content("~/PAC/ViewCheques"), obj.ID, CommericalPortal.Web.My.Resources.GridText.ViewChequesLinkText)).Title("")
         End Sub) _
    .Sortable(Function(sorting) sorting.SortMode(GridSortMode.SingleColumn).Enabled(True))
)`

1 个答案:

答案 0 :(得分:0)

结构良好的问题,但是我很遗憾地说,在使用Ajax加载其内容的TabStrip中使用服务器绑定网格是不可能的。网格应配置为Ajax binding