Template column not rendering with Telerik Ajax ActionLink - telerik-mvc

Question

Template columns are not rendering when any of the below properties are being used.
.Pageable()
.Filterable()
.Sortable()
.Scrollable()
The version of the Telerik controls is: 2011.2.712.340
It is being rendered if I remove these properties, but the header does not accomodate for the template columns and pushes the rest of the columns over to the right (off the grid).What do I need to do in order to use the template columns with the above properties.
What do I need to do in order to use the template columns with the above properties?
Here is my 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.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()
)
Here is my controller for the View:
IEnumerable<YeagerTechWcfService.Customer> customerList = db.GetCustomers(); return View(new GridModel<YeagerTechWcfService.Customer> { Data = customerList });
Here is the HTML of the grid that is rendered for the view using the above properties
<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>
Through more research, I found out that I need to use the ClientTemplate property for Ajax binding.
If you're using Ajax, why is there an ActionLink property in the columns.Template to begin with? This throws off a lot of the developers.
I modified my new View code below, but the Edit link is not being rendered on my grid.
What am I doing incorrectly?
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>()
.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(#"Open");
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))
Pertinent Rendered output
<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

On my own research, I found out that I can use ServerSide template binding. When picking apart my grid column by column, the Template columns were being rendered, just not being displayed...
If I put, let's say 10 columns in my grid (even though scrolling is enabled), the template columns would not show up.
If I shortened my column list to let's say 5, then the template columns had enough room to show up.
The instance when the grid needs to set scrolling (when there are too many columns to display across the screen) is when the template columns are not displayed.
This defintly sounds like a bug Telerik needs to correct.
Below, is the code for the 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()
)