CODEWITHSUNDEEP
model-view-controllerkendo-ui
John Lord
John Lord

Reputation: 2175

Kendo MVC call javascript from a template

I have a telerik mvc grid (NOT JAVASCRIPT) with groupable() turned on. The column i am grouping by has a link in it. No big deal since that's easy on a column template. However, header templates don't allow access to data from a column different that the one the grouping is set on, and our links are all based on the "ID" column (hidden) whereas the grouping is on the "Name" column.
Can I call javascript from the header template to get the data I need? here is an example of what has worked 

    .Groupable()
                .Selectable()
                .Columns(columns =>
                {
                columns.Template(@<text></text>).ClientTemplate("#= rowCommandsUndelete(data, false, true) #").Title("&nbsp;").Width(100);
                    columns.Bound(m => m.Active)
                        .Title("Active?")
                        .ClientTemplate("#= ActiveState(data.Active) #")
                        .Width(85);
                    columns.Bound(m => m.Origin.Name)
                        .ClientGroupHeaderTemplate("<a href='www.google.com'>link </a>")
                        .ClientTemplate("<div id='#=data.ID#'></div><a href='/Origins?id=#=data.Origin.ID#'>#=data.Origin.Name#</a>")  //Empty div with "data.ID" is required (see JavaScript section below)
                        .Width(300);

and this doesn't work and gives an error: Uncaught TypeError: Cannot read property 'ID' of undefined

     columns.Bound(m => m.Origin.Name)
                        .ClientGroupHeaderTemplate("<a href='www.google.com'> #=data.Origin.ID#</a>")

Upvotes: 1

Views: 1149

Answers (2)

John Lord
John Lord

Reputation: 2175

the final answer is thanks to sandro. On an ajax page, use clientgroupheadertemplate like this on a column:

     columns.Bound(m => m.Origin.Name)
                        .ClientGroupHeaderTemplate("#=buildHeader( value )#")

buildheader is a javascript function, and value is a built-in value in the header. Here's the javascript function: 

  function buildHeader(value) {
    return "<h4><u><a href='\origins?OriginName=" + encodeURIComponent(value) + "'>" + value + "</a></u></h4>";
}

value contained the string from the column and i was able to create a link this way and set it to the column header. I have also successfully called javascript now from a footer to trigger something after a calculation.

Upvotes: 1

sandro
sandro

Reputation: 218

It's groupHeaderTemplate configuration.

Example:

$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "link",
      groupHeaderTemplate: "<a href=#=value# target='_blank'>google.com</a>"
    }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", link: "https://google.com" },
      { name: "John Doe", link: "https://google.com" }
    ],
    group: { field: "link" }
  }
});

Upvotes: 0

Related Questions