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

Template Columns not displaying data

5 Answers 1288 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Uday
Top achievements
Rank 1
Uday asked on 08 Jul 2014, 12:35 AM
Hi, 

I am trying to display the a hyperlink for one of the columns in my Grid. I added a template column as per the documentation and it is not displaying any content.

I check the server response. It does return the data. The column is disappearing on the client side once tied to the Grid.

Below is the snippet from MVC Grid examples (local-data-binding). I modified a bit to add a template column. You can easily reproduce this by adding the first column to the example at Grid at local-data-binding example.

@model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>
 
@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Template(@<text>
            @Html.ActionLink(item.ProductName, "Local_Data_Binding", "Grid", new { id = item.ProductName }, null)
        </text>).Title("Company Name");
        columns.Bound(p => p.ProductName).Title("Product Name");
        columns.Bound(p => p.UnitPrice).Title("Unit Price").Width(130);
        columns.Bound(p => p.UnitsInStock).Title("Units In Stock").Width(130);
        columns.Bound(p => p.Discontinued).Width(130);
    })
    .Pageable()
    .Sortable()
    .Scrollable(scr=>scr.Height(430))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
     )
)

Any suggestions. Looks like this is working for some people.

Thank You,

5 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 08 Jul 2014, 07:53 AM
Hello Uday,


The reason for the issue is that the current Grid is using an Ajax Bound dataSource, which requires client templates, instead of server ones.
E.g.
columns.Template(@<text></text>).ClientTemplate("my template");

You could take a look at the following page for additional information about displaying an action link in a client template.

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Uday
Top achievements
Rank 1
answered on 08 Jul 2014, 04:30 PM
Thank You. It worked.
0
Pawel Ch
Top achievements
Rank 1
answered on 23 Jan 2016, 12:37 AM

Hi Dimiter

Answer you provided is proper and it works in this case (Ajax binding). It helped me to solve small problem with client side binding. But example of Ajax binding on the page you refer to is misleading.

On the page there is a fragment relaed to AJAX as follows:

For ajax bound grids the ClientTemplate method should be used.
 
Example - action link in Ajax bound Grid column
 
columns.Bound(p => p.ProductID).ClientTemplate("<a href='" +Url.Action("ProductDetails", "Product") +"/#= ProductID #'" +">Show Product Details</a>"); 

but this code doesnt work.

For Ajax bound datagrid client template column code should be like below (I checked both ) :

columns.Template(@<text></text>).ClientTemplate(
"<a href='" +
    Url.Action("ProductDetails", "Product") +
    "/#= ProductID #'" +
">Show Product #= ProductID #</a>"
    ).Title("Action");

 

0
Dimiter Madjarov
Telerik team
answered on 27 Jan 2016, 07:59 AM

Hello Pawel,

Both of the provided sample templates will work in an Ajax bound Grid. The first one is for a column bound to a model property. The second one is a pure template column, which is not bound to a property i.e. it cannot be filtered, sorted etc.

Regards,
Dimiter Madjarov
Telerik
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 Feedback Portal and vote to affect the priority of the items
0
Franklin
Top achievements
Rank 1
answered on 11 Jan 2018, 01:02 PM

This one worked perfectly for me.

 columns.Bound(client => client.CompanyRow_Id).Title("View Contacts")
                            .ClientTemplate(Ajax.ActionLink("Industry", "Index", "Industry", new { myParam = "#=CompanyRow_Id#" }, new AjaxOptions() { OnSuccess = "myJSFunction" }).ToHtmlString());

 

function myJSFunction(response) {
        debugger;
        $("#updateTargetElement").html(response);
    }

 

 

 

 

Tags
Grid
Asked by
Uday
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Uday
Top achievements
Rank 1
Pawel Ch
Top achievements
Rank 1
Franklin
Top achievements
Rank 1
Share this question
or