Столбцы шаблона не отображаются при использовании любого из следующих свойств.
.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"> </span></th><th class="t-header" scope="col"><span class="t-link"> </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> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td>08/13/2011</td><td class="t-last"> </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 ,почему в столбцах есть свойство ActionLink . Шаблон для начала?Это сбивает с толку многих разработчиков.
Я изменил свой новый код View ниже, но ссылка Edit на не отображается в моей сетке.
Что я делаю неправильно?
Просмотр
@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"},