This is a migrated thread and some comments may be shown as answers.

[Solved] Client Template Not Displayed With MVC Grid

15 Answers 1117 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Pradeep N asked on 26 Apr 2010, 03:36 PM

Hi,

I Just tried the Client template sample and bind the MVC grid as said in the sample. Here template is the edit hyper link for the row which will open other view(Not a partial view).

Here is my VIew coding,

                    <%= Html.Telerik().Grid(Model)         
                    .Name("BillingAddressList")         
                    .Columns(colums =>         
                    {         
                                 
                        //colums.Template(c => Html.ActionLink("Edit", "Edit", new         
                        //                                                         {         
                        //                                                             id = c.AccountId, name = c.BillingName         
                        //                                                         }));         
                        //colums.Template(c => Html.ActionLink("Details", "Details", new         
                        //                                                               {         
                        //                                                                   id = c.AccountId,         
                        //                                                                   name = c.BillingName         
                        //                                                               }));         
                        colums.Bound(o => o.BillingName);         
                        colums.Bound(o => o.Address1);         
                        colums.Bound(o => o.Address2);         
                        colums.Bound( o => o.City );         
                        colums.Bound( o => o.State );         
                        colums.Bound( o => o.Country );         
                        colums.Bound( o => o.Zip );         
                        colums.Bound( o => o.LastUpdate );         
                        colums.Bound( o => o.Phone );         
                        colums.Bound(o => o.AccountId)         
                            .ClientTemplate("<a href='"+ Url.Content("~/Members/Billing/Edit/") + "<#= AccountId #>/"+"<#= BillingName #>'>Edit</a>").Title("Edit");         
                                 
                    })         
                    .DataBinding( dataBinding => dataBinding.Ajax().Select("Ajax_Index","Billing",new{id = Model.ToList()[0].AccountId}))         
                    .Scrollable()         
                    .Sortable()         
                    .Pageable()         
                    .Filterable()         
                    .Groupable()         
                %>         

i want the ajax action which is not possible with server template so moved to client template.

Follwing is my Controller code:

                    public virtual ActionResult Index( string id )         
                    {         
                        var addressList = ServiceConsumer.Consume<BillingAddressList>( Utils.GetAdminResourceManager(), ServiceContractsName.MemberBillingAddressList,         
                                                HttpType.Get, ContractType.Xml, null, id );         
                        return View( addressList );         
                    }         
                    [GridAction]         
                    public virtual ActionResult Ajax_Index( string id )         
                    {         
                        var addressList = ServiceConsumer.Consume<BillingAddressList>( Utils.GetAdminResourceManager(), ServiceContractsName.MemberBillingAddressList,         
                                                HttpType.Get, ContractType.Xml, null, id );         
                        return View( new GridModel( addressList.ToList() ) );         
                    }         

Here addressList will return the ienumerable from my WCF Rest XML service.

Here is My Issue:

The client template is not displaying only the Account ID is displaying directly instead of client template(Edit Link).
If i do any ajax action(like clear filter, clicking refresh image in the left of the footer) the edit link is displaying and the link works fine and goes to edit view as expected.

Can you please tell me what i miss in this.....

Thanks,

Pradeep.

15 Answers, 1 is accepted

Accepted

answered on 26 Apr 2010, 03:55 PM

Hi Pradeep N,

What you are missing is that the grid is initially bound server side because you are passing the Model in the grid constructor:

<%= Html.Telerik().Grid(Model)

Client templates are applied only during client binding hence they are applied after paging/sorting etc. The simplest workaround is to use the overload which does not set the datasource:

<%= Html.Telerik().Grid<T>()

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 28 Apr 2010, 03:29 PM

This solution does not work for me.

Mine is similiar, except my grid is loaded from another ajax call (the grid is in a partial view -ie. a search result grid)

My templates do not show up at all:

    
            <% Html.Telerik().Grid<Order>(Model) 
        
                    .Name("OrderSearchResultsGrid")               
        
                    .DataBinding(dataBinding => dataBinding 
        
                        //Ajax binding 
        
                         .Ajax() 
        
                        //The action method which will return JSON and its arguments 
        
                               .Select("OrdersSearch_Ajax", "Orders") 
        
                    ) 
        
                        .Columns(col => 
        
                                     { 
        
                                        // col.Bound(e => e.Number). 
        
                                            // ClientTemplate(Html.ActionLink<OrdersController>(c => c.OrderDetails("<%#= Number #>"), "<%#= Number #>").ToHtmlString()).Title("Order"); 
        
                                         col.Bound(o => o.Number) 
        
                            .ClientTemplate("<a href='" + Url.Content("~/Orders/OrderDetails/") + "<#= Number #>/" + "<#= Number #>'>Edit</a>").Title("Edit"); 
        
                                         col.Bound(e => e.PO).Title("PO"); 
        
                                         col.Bound(e => e.ShipToName).Title("ShipToName");  
        
                                         col.Bound(e => e.Status).Title("Status"); 
        
                                         col.Bound(e => e.OrderDate).Title("OrderDate");                             
        
                                         col.Bound(e => e.OrderValue).Title("OrderAmount"); 
        
                                     }) 
        
                    .Sortable() 
        
                    .Pageable(pagerAction => pagerAction.Position(GridPagerPosition.Bottom)) 
        
                    .Pageable(pagerAction => pagerAction.PageSize(5)) 
        
                    .Filterable() 
        
                    .Render(); 
        
                    //.Ajax(ajax => ajax.Action("OrdersSearch", "Orders"))) 
        
                %>

The result is no href link - just the Number in the grid.

answered on 28 Apr 2010, 03:36 PM

You don't have to supply the model...

<% Html.Telerik().Grid<Order>(Model)

should be:

<% Html.Telerik().Grid<Order>()

The ajax grid itself will call the ajax method to get the data and so your client template will be used.

Cheeers

answered on 28 Apr 2010, 03:38 PM

Hello Steve,

You are still using server binding:

<% Html.Telerik().Grid<Order>(Model)

The solution requires to leave the grid empty:

<% Html.Telerik().Grid<Order>()

Specifying the datasource in the grid constructor is equivalent to binding it immediately. If you don't specify the datasource and configure the grid for ajax binding the grid will make an ajax request once loaded in the browser.

Regards,
Atanas Korchev
the Telerik team

answered on 20 Jul 2010, 08:53 AM

Hi,

My telerik grid is loading through partial postback. I want to show link in grid column so that i am using clienttemplate. It is not working. I had also tried all suggesions as you did to others. It is not showing me any record in grid. Please check my code

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<ADLWare.Model.Comapny.Clients.Client>>" %>

<% Html.Telerik().Grid<ADLWare.Model.Comapny.Clients.Client>()
        .Name("ClientDetail")
        .Columns(columns =>
        {
            columns.Bound(o => o.ClientName).ClientTemplate("<a onclick=OpenView('Client','GetData',undefined,'Client Detail'); >" + "<#=ClientName#>" + "</a>").Encoded(false).Title("Client Name").HtmlAttributes(new { @class = "ihover ReceivedMemos" });
           // columns.Bound(o => o.ClientName).ClientTemplate("<a href=\"/Client/Getdata/" + "<#=ClientID#>" + "\">" + "<#=ClientName#>" + "</a>").Encoded(false).Title("Client Name").HtmlAttributes(new { @class = "ihover ReceivedMemos" });
            //columns.Bound(o => o.ClientName).Format(Html.ActionLink("{0}", "GetData", "Client").ToString()).Encoded(false);
            columns.Bound(o => o.ClientAddress).Width(300);
            columns.Bound(o => o.ClientCity).Width(200);
            columns.Bound(o => o.ClientState).Width(100);
        })
        .DataBinding(dataBinding => dataBinding.Ajax().Select("GetClientVal", "Client"))
        .EnableCustomBinding(false)
        .Sortable(sorting => sorting.Enabled(true))
        .Pageable(paging => paging.Enabled(true).PageSize(10).Style(GridPagerStyles.Numeric))
        .Filterable(filter => filter.Enabled(true))
        .Render();

%>

answered on 28 Sep 2010, 06:27 PM

Oops..I managed to fix it..stupid question...

columns.Bound(o => o.BankUID).ClientTemplate("<a href=/ForecastDrillDown/Index/" +

"<#=BankUID#>?" +

"periodYear=<#=PeriodYear#>&" +

"periodMonth=<#=PeriodMonth#>&" +

"forecastDateFrom=" + ViewData["selectedForecastDateFrom"] + "&" + ViewData["forecastDateTo"] + "target=_blank>Drill Down</a>").Title(" ");

I am wondering, how about if I want to do this? How should I deal with ViewData["xxx"] if I want to include it as a part of hyperlink? I can't get it to work...

<%= Html.Telerik().Grid(Model)

.Name("Forecast")

.Columns(columns =>

{

columns.Bound(o => o.BankUID).ClientTemplate("<a href=/ForecastDrillDown/Index/" +

"<#=BankUID#>?" +

"periodYear=<#=PeriodYear#>&" +

"periodMonth=<#=PeriodMonth#>&" +

"forecastDateFrom=" + %><%=ViewData["selectedForecastDateFrom"]%><%"&forecastDateTo=12/31/2010 target=_blank>Drill Down</a>").Title(" ");

columns.Bound(o => o.ReadablePeriod);

columns.Bound(o => o.BankName);

columns.Bound(o => o.ExpectedInterest).Title("Expected Interest(RM)");

})

answered on 16 Aug 2011, 04:59 PM

Hi,

I'm using the operational mode as client and data is coming from the server one time, but telerik throws a exception on the javascript and doesn't show anything in the grid. Look at the code.

@(Html.Telerik().Grid<ComparisonRow>().Name("Grid").Columns(columns =>
    {
        columns.Bound(col => col.Status).Template(col => ReportController.ConvertStatusToText(col.Status)).Width(150);
        columns.Bound(col => col.F1).Width(80);
        columns.Bound(col => col.F2).Width(150);
        columns.Bound(col => col.Date).Template(col => col.Date.ToString("MM/dd/yyyy")).Width(90);
 
        for (int i = 0; i < 50; i++)
        {
            var posbounded = columns.Bound(col => col.Positions);
            posbounded.Title("P" + i).Width(50);
        }
    }).Filterable(f => f.Enabled(true)).Groupable(g => g.Enabled(false)).Pageable(p => p.Enabled(false)).Scrollable(s => s.Enabled(true)).RowAction(ra => ra.HtmlAttributes.Add(ReportController.ConvertStatusToColor(ra.DataItem.Status))).Resizable(re => re.Columns(true)).Sortable(s => s.Enabled(true))
                   .DataBinding(db => db.Ajax().Select("GetReport", "Report", new { Date = ViewBag.Date, snapshot=ViewBag.Snapshot }).OperationMode(GridOperationMode.Client))
                   )

        [GridAction]
        public ActionResult GetReport(DateTime? Date, string snapshot)
        {
            ...            return View(new GridModel<ComparisonRow>() { Data = gkresults });
        }











The return from the GetReport brings the following data:

a
HTTP/1.1 200 OK

Server: ASP.NET Development Server/10.0.0.0

Date: Tue, 16 Aug 2011 15:48:36 GMT

X-AspNet-Version: 4.0.30319

X-AspNetMvc-Version: 3.0

Cache-Control: private

Content-Type: application/json; charset=utf-8

Content-Length: 697709

Connection: Close
{"data":[{"Status":0,"F1":"ACC","F2":"31390","Date":"\/Date(1309557600000)\/","Positions":[...]....}






























Thank you

answered on 17 Aug 2011, 07:30 AM

Hello Xavier,

Server side templates are not supported in ajax binding scenarios. You need to use client templates.

In your case you can simply set the format of the date

columns.Bound(col => col.Date).Format("{0:MM/dd/yyyy}").Width(90);

For the other column you would need to use a client template.

Regards,
Atanas Korchev
the Telerik team