Question

在使用以下任何属性时，不会呈现模板列。

.Pageable()
    .Filterable()
    .Sortable()
    .Scrollable()

Telerik控件的版本为： 2011.2.712.340

如果我删除这些属性，但标题不适用于模板列并将其余列推到右侧（关闭）网格）。为了使用具有上述属性的模板列，我需要做什么。

如何使用具有上述属性的模板列，我需要做什么？

以下是我的观点：

@model Telerik.Web.Mvc.GridModel<YeagerTech.YeagerTechWcfService.Customer>
@{
    ViewBag.Title = "Customer Index";
}
<h2>
    Customer Index</h2>
<p>
    @Ajax.ActionLink("Create New", "Create", "Customer",
                    new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "createCustomer" })
</p>
@(Html.Telerik().Grid<YeagerTech.YeagerTechWcfService.Customer>(Model.Data)
  .Name("Customers")
          .DataKeys(dataKeys => dataKeys.Add(o => o.CustomerID))
  .Columns(columns =>
    {
        columns.Template(
            @<text>
                @Ajax.ActionLink("[ Edit ]", "Edit", "Customer", new { id = item.CustomerID },
                                        new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "editCustomer" })
            </text>
        );
        columns.Template(
            @<text>
                @Ajax.ActionLink("[ Detail ]", "Details", "Customer", new { id = item.CustomerID },
                                      new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "detailCustomer" })
            </text>
        );
        columns.Bound(o => o.CustomerID).Hidden(true);
        columns.Bound(o => o.Email).Width(200);
        columns.Bound(o => o.Company).Width(200);
        columns.Bound(o => o.FirstName).Width(200);
        columns.Bound(o => o.LastName).Width(200);
        columns.Bound(o => o.Address1).Width(200);
        columns.Bound(o => o.Address2).Width(100);
        columns.Bound(o => o.City).Width(200);
        columns.Bound(o => o.State).Width(40);
        columns.Bound(o => o.Zip).Width(60);
        columns.Bound(o => o.HomePhone).Width(120);
        columns.Bound(o => o.CellPhone).Width(120);
        columns.Bound(o => o.Website).Width(200);
        columns.Bound(o => o.IMAddress).Width(200);
        columns.Bound(o => o.CreatedDate).Format("{0:MM/dd/yyyy}").ReadOnly(true).Width(120);
        columns.Bound(o => o.UpdatedDate).Format("{0:MM/dd/yyyy}").ReadOnly(true).Width(120);
    }).DataBinding(dataBinding => dataBinding.Ajax()
        .Select("Index", "Customer"))
    .Pageable()
    .Filterable()
    .Sortable()
    .Scrollable()
 )

以下是我的视图控制器：

IEnumerable<YeagerTechWcfService.Customer> customerList = db.GetCustomers();  return View(new GridModel<YeagerTechWcfService.Customer>                     {                         Data = customerList                     });

以下是使用上述属性为视图呈现的网格的HTML

<div class="t-widget t-grid" id="Customers"><div class="t-grid-header"><div class="t-grid-header-wrap"><table cellspacing="0"><colgroup><col /><col /><col style="display:none;width:0" /><col style="width:200px" /><col style="width:200px" /><col style="width:200px" /><col style="width:200px" /><col style="width:200px" /><col style="width:100px" /><col style="width:200px" /><col style="width:40px" /><col style="width:60px" /><col style="width:120px" /><col style="width:120px" /><col style="width:200px" /><col style="width:200px" /><col style="width:120px" /><col style="width:120px" /></colgroup><tr><th class="t-header" scope="col"><span class="t-link">&nbsp;</span></th><th class="t-header" scope="col"><span class="t-link">&nbsp;</span></th><th class="t-header" scope="col" style="display:none;width:0"><a class="t-link" href="/Customer?Customers-orderBy=CustomerID-asc">Customer ID</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/Customer?Customers-orderBy=Email-asc">Email</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/Customer?Customers-orderBy=Company-asc">Company</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/Customer?Customers-orderBy=FirstName-asc">First Name</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/Customer?Customers-orderBy=LastName-asc">Last Name</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/Customer?Customers-orderBy=Address1-asc">Address1</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/Customer?Customers-orderBy=Address2-asc">Address2</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/Customer?Customers-orderBy=City-asc">City</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/Customer?Customers-orderBy=State-asc">State</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/Customer?Customers-orderBy=Zip-asc">Zip</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/Customer?Customers-orderBy=HomePhone-asc">Home Phone</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/Customer?Customers-orderBy=CellPhone-asc">Cell Phone</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/Customer?Customers-orderBy=Website-asc">Website</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/Customer?Customers-orderBy=IMAddress-asc">IM Address</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header" scope="col"><a class="t-link" href="/Customer?Customers-orderBy=CreatedDate-asc">Created Date</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th class="t-header t-last-header" scope="col"><a class="t-link" href="/Customer?Customers-orderBy=UpdatedDate-asc">Updated Date</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th></tr></table></div></div><div class="t-grid-content" style="height:200px"><table cellspacing="0"><colgroup><col /><col /><col style="display:none;width:0" /><col style="width:200px" /><col style="width:200px" /><col style="width:200px" /><col style="width:200px" /><col style="width:200px" /><col style="width:100px" /><col style="width:200px" /><col style="width:40px" /><col style="width:60px" /><col style="width:120px" /><col style="width:120px" /><col style="width:200px" /><col style="width:200px" /><col style="width:120px" /><col style="width:120px" /></colgroup><tbody><tr><td>            

                <a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#editCustomer" href="/Customer/Edit/2">[ Edit ]</a>



</td><td>            

                <a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#detailCustomer" href="/Customer/Details/2">[ Detail ]</a>



</td><td style="display:none;width:0;display:none;width:0;;display:none;width:0">2</td><td>wsyeager36@msn.com</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>08/13/2011</td><td class="t-last">&nbsp;</td></tr></tbody></table></div><div class="t-grid-pager t-grid-bottom"><div class="t-status"><a class="t-icon t-refresh" href="/Customer">Refresh</a></div><div class="t-pager t-reset"><a class="t-link t-state-disabled" href="#"><span class="t-icon t-arrow-first">first</span></a><a class="t-link t-state-disabled" href="#"><span class="t-icon t-arrow-prev">prev</span></a><div class="t-numeric"><span class="t-state-active">1</span></div><a class="t-link t-state-disabled" href="#"><span class="t-icon t-arrow-next">next</span></a><a class="t-link t-state-disabled" href="#"><span class="t-icon t-arrow-last">last</span></a></div><div class="t-status-text">Displaying items 1 - 1 of 1</div></div></div>

通过更多研究，我发现我需要使用 ClientTemplate 属性进行Ajax绑定。

如果您使用 Ajax ，为什么 columns.Template 中的 ActionLink 属性开头？这引发了许多开发者的注意。

我修改了下面的新视图代码，但编辑链接在我的网格上呈现不。

我做错了什么？

查看

@model Telerik.Web.Mvc.GridModel<YeagerTech.YeagerTechWcfService.Customer>
@{
    ViewBag.Title = "Customer Index";
}
<h2>
    Customer Index</h2>
<p>
    @Ajax.ActionLink("Create New", "Create", "Customer",
                    new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "createCustomer" })
</p>
@(Html.Telerik().Grid<YeagerTech.YeagerTechWcfService.Customer>()
  .Name("Customers")
          .DataKeys(dataKeys => dataKeys.Add(o => o.CustomerID))
  .Columns(columns =>
    {
        @*columns.Template(
            @<text>
                @Ajax.ActionLink("[ Edit ]", "Edit", "Customer", new { id = item.CustomerID },
                                        new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "editCustomer" })
            </text>
        ).ClientTemplate(@"<a href=""/Items/Edit?id=<#= ItemId #>"">Open</a>");
        columns.Template(
            @<text>
                @Ajax.ActionLink("[ Detail ]", "Details", "Customer", new { id = item.CustomerID },
                                      new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "detailCustomer" })
            </text>
        );*@
        columns.Bound(o => o.CustomerID)
            .ClientTemplate("<a href='" + Url.Content("~/Customer/Edit/") + "<#= CustomerID #>'>Edit</a>").Title("Edit");  
        columns.Bound(o => o.Email).Width(200);
        columns.Bound(o => o.Company).Width(200);
        columns.Bound(o => o.FirstName).Width(200);
        columns.Bound(o => o.LastName).Width(200);
        columns.Bound(o => o.Address1).Width(200);
        columns.Bound(o => o.Address2).Width(100);
        columns.Bound(o => o.City).Width(200);
        columns.Bound(o => o.State).Width(40);
        columns.Bound(o => o.Zip).Width(60);
        columns.Bound(o => o.HomePhone).Width(120);
        columns.Bound(o => o.CellPhone).Width(120);
        columns.Bound(o => o.Website).Width(200);
        columns.Bound(o => o.IMAddress).Width(200);
        columns.Bound(o => o.CreatedDate).Format("{0:MM/dd/yyyy}").ReadOnly(true).Width(120);
        columns.Bound(o => o.UpdatedDate).Format("{0:MM/dd/yyyy}").ReadOnly(true).Width(120);
    }).DataBinding(dataBinding => dataBinding.Ajax()
        .Select("Index", "Customer"))
    .Pageable()
    //.Filterable()
    //.Sortable()
    .Scrollable()
 )

_Layout.cshtml

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="../../Content/2011.2.712/telerik.common.min.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/2011.2.712/telerik.windows7.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>

@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.windows7.css").Combined(true).Compress(true)))@Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(group => group.Combined(true).Compress(true))

相关的渲染输出

<th class="t-header" scope="col"><span class="t-link">Edit</span></th>

jQuery(document).ready(function(){ jQuery('#Customers').tGrid({columns:[{"title":"Edit","template":"\u003ca href=\u0027/Customer/Edit/\u003c#= CustomerID #\u003e\u0027\u003eEdit\u003c/a\u003e","member":"CustomerID","type":"Number"},

Answer 1

根据我自己的研究，我发现我可以使用ServerSide模板绑定。按列分离我的网格列时，模板列正在呈现，只是没有显示...

如果我放，让我们说我的网格中有10列（即使启用了滚动），模板列也不会显示。如果我将列列表缩短为5，那么模板列就有足够的空间显示。网格需要设置滚动时（当屏幕上显示的列太多时）的实例是模板列不显示时。

这听起来像是Telerik需要纠正的错误。

下面是View的代码：

@model Telerik.Web.Mvc.GridModel<YeagerTech.YeagerTechWcfService.Customer>

@{
    ViewBag.Title = "Customer Index";
}
<h2>
    Customer Index</h2>
<p>
    @Ajax.ActionLink("Create New", "Create", "Customer",
                    new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "createCustomer" })
</p>
@(  Html.Telerik().Grid<YeagerTech.YeagerTechWcfService.Customer>(Model.Data)
      .Name("Customers")
            .DataKeys(dataKeys => dataKeys.Add(o => o.CustomerID))
      .Columns(columns =>
            {
                columns.Bound(o => o.CustomerID).Hidden(true);
                columns.Template(
                        @<text>
                            @Ajax.ActionLink("[Edit]", "Edit", "Customer", new { id = item.CustomerID },
                                                    new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "editCustomer" })
                        </text>
                ).Width(50);
                columns.Template(
                        @<text>
                            @Ajax.ActionLink("[Detail]", "Details", "Customer", new { id = item.CustomerID },
                                      new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "detailCustomer" })
                        </text>
                ).Width(70);
                columns.Bound(o => o.Email).Width(200);
                columns.Bound(o => o.Company).Width(200);
                columns.Bound(o => o.FirstName).Width(100).Title("FName");
                columns.Bound(o => o.LastName).Width(100).Title("LName");
                columns.Bound(o => o.Address1).Width(200).Title("Addr1");
                columns.Bound(o => o.Address2).Width(100).Title("Addr2");
                columns.Bound(o => o.City).Width(100);
                columns.Bound(o => o.State).Width(40).Title("ST");
                columns.Bound(o => o.Zip).Width(60);
                columns.Bound(o => o.HomePhone).Width(120);
                columns.Bound(o => o.CellPhone).Width(120);
                //columns.Bound(o => o.Website).Width(100);
                //columns.Bound(o => o.IMAddress).Width(100);
                //columns.Bound(o => o.CreatedDate).Format("{0:MM/dd/yyyy}").ReadOnly(true).Width(120);
                //columns.Bound(o => o.UpdatedDate).Format("{0:MM/dd/yyyy}").ReadOnly(true).Width(120);
            }).DataBinding(dataBinding => dataBinding.Ajax()
        .Select("Index", "Customer"))
    .Pageable()
    .Sortable()
    .Scrollable()
 )

模板列无法使用Telerik Ajax ActionLink进行渲染

1 个答案: