Question

I am using a Telerik MVC Batch editable grid with ASP.Net MVC3 Razor views. In addition to having the grid to be editable I am also trying to add a column with an Edit link (ideally a linkable image), clicking on which will lead me to an edit page for the individual record. Eg –

 @(Html.Telerik().Grid(Model)
                    .Name("BillersGrid")
                    .DataKeys(keys => keys.Add(o => o.id))
                    .ToolBar(commands =>
                    {
                        commands.Insert();
                        commands.SubmitChanges();
                    })
                    .DataBinding(databinding =>
                    {
                        databinding.Ajax()
                            .Select("SelectBatchEditing", "BillerAdmin")
                            .Update("SaveBatchEditing", "BillerAdmin", new { id =                (string)ViewData["BillerSearchString"] });
                    }
                    )
                    .Columns(columns =>
                    {
                        columns.Command(commands => commands.Delete().ButtonType(GridButtonType.BareImage)).Width(10).Title("");                        
                        columns.Bound(o => o.id).Title("Edit").ClientTemplate("<a href='/BillerAdmin/EditBiller?id=<#=id#>'>Edit</a>");
                        columns.Bound(o => o.id).Hidden(true);
                        columns.Bound(o => o.CouponBillerName).Title("Coupon Biller Name").HtmlAttributes(new { style = "white-space:nowrap;" });
                        columns.Bound(o => o.PayeeRecipient).Title("Recipient").HtmlAttributes(new { style = "white-space:nowrap;" });
                        columns.Bound(o => o.PayeeAddress1).Title("Address 1").HtmlAttributes(new { style = "white-space:nowrap;" });
                        columns.Bound(o => o.PayeeAddress2).Title("Address 2").Width(100);
                        columns.Bound(o => o.PayeeCity).Title("City").HtmlAttributes(new { style = "white-space:nowrap;" });
                        columns.Bound(o => o.State).ClientTemplate("<#= State #>");
                        columns.Bound(o => o.PayeeZip).Title("Zip").Width(50);
                        columns.Bound(o => o.PayeeZipPlusFour).Title("Zip+4").Width(50);
                        columns.Bound(o => o.Category).ClientTemplate("<#= Category #>").HtmlAttributes(new { style = "white-space:nowrap;" });
                        columns.Bound(o => o.AccountNumberFormat).Title("Account Number Format").Width(50);
                        columns.Bound(o => o.CodeLineNumberFormat).Title("CodeLine Number Format").Width(50);
                    })
                    .Pageable(paging => paging.Position(GridPagerPosition.Bottom).Style(GridPagerStyles.NextPreviousAndNumeric).Total((int)ViewData["BillersCount"]).PageSize(50))
                    .EnableCustomBinding(true)
                    .Editable(editing => editing.Mode(GridEditMode.InCell))
                    .Sortable()
                    .ClientEvents(evt => evt.OnDataBinding("BillersGrid_onDataBinding"))
                    .KeyboardNavigation(config => config.EditOnTab(true))
                    .HtmlAttributes(new { style = "font-size:.9x cem;" })
                    )

This works. But the issue is that the grid is displayed with the Id (which is a guid) the first time it is rendered. On paging the “Edit” hyperlink is correctly shown.

Can some one help me. I would like the grid to show the Edit link every time. This cell should be non editable and should be a hyperlink going to another view. The functionality works correctly. The issue is the ID gets displayed the first time it is rendered.
Please help.

Thanks,
SDD

Answer 1

Client templates are applied during ajax binding. Your grid is initially bound server-side:

Html.Telerik().Grid(Model)

Either set a server-side template as well:

columns.Bound(o => o.id).Title("Edit")
       .Template(@<text>
           <a href="/BillerAdmin/EditBiller?id=@item.id">Edit</a>
        </text>) 
       .ClientTemplate("<a href='/BillerAdmin/EditBiller?id=<#=id#>'>Edit</a>");

or make the grid initially bound using ajax:

Html.Telerik().Grid<YourModelType>()