10

I have a column in a Kendo grid that I want to perform some specific logic for when rendering, and am using Angular. I have the grid columns set up using the k-columns directive.

After looking at the documentation, it seemed simple: I could add the template option to my column, define the function to perform my logic, and pass the dataItem value in. What I have looks something like this:

k-columns='[{ field: "Name", title: "Name", 
    template: function (dataItem){
        // Perform logic on value with dataItem.Name
        // Return a string
    }
}]'

However, running this causes a syntax error complaining about the character '{' that forms the opening of the block in my function.

I have seen several examples of defining a template function in this format. Is there something else that needs to be done for this to work? Am I doing something incorrectly? Is there another way of defining the template as a function and passing the column data to it? (I tried making a function on my $scope, which worked, except I couldn't figure out how to get data passed into the function.)

Thank you for your help.

Improve this question

6 Answers 6

Reset to default
14

It appears that defining a column template in this fashion isn't supported when using AngularJS and Kendo. This approach works for projects that do not use Angular (standard MVVM), but fails with its inclusion.

The workaround that a colleague of mine discovered is to build the template using ng-bind to specify a templating function on the $scope, all inside of a span:

template: "<span ng-bind=templateFunction(dataItem.Name)>#: data.Name# </span>"

This is the default column templating approach that is implemented by Telerik in their Kendo-Angular source code. I don't know yet if the data.Name value is required or not, but this works for us.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

a simpler workaround is available - just access the scope and use dataItem like template: "<span> {{dataItem.Name}} </span>",
@jajdoo - where does the custom function run in your example?
5

Warning: Don't have access to Kendo to test the code at the moment, but this should be very close

In your case, you are assigning a a string to the value of k-columns and that string contains the the word function and your curly brace {

You need to make sure the function gets executed ... something like this:

k-columns=[
    {
       field: "Name",
       title: "Name", 
       template: (function (dataItem){
        // Perform logic on value with dataItem.Name
        // Return a string
       }())
    }
];

Note the difference:

We create an object -- a real honest-to-goodness object, and we use an IIFE to populate the template property.

Improve this answer

5 Comments

Thanks for your input. That's a pretty good idea, but it doesn't seem to be working: I get the same error as before. A couple of things I notice: A) The function call parenthesis should be after the closing function definition parenthesis, and B) I'm not sure why this format would be necessary, since Telerik's documentation doesn't utilize it. They simply define the template itself as a function.
While it has gotten a little better, I've found Telerik's documentation to often be ... lacking. (and the location of the invoking parens doesn't matter, its just a preference thing. (function() {}()) is exactly the same as (function() {})().
You're calling a function expecting an argument (dataItem) without providing it. If you specify the template as a function (without the () after the function definition), kendo will call this function for each item in the data source, providing the current item as the argument.
you can't use your function, when you need to use for multiple columns with same function. Problem is which column is calling this function
The template function callback doesn't need to invoke itself. template: function(dataItem) { /* do something with dataItem.Name */ } is sufficient.
3

Maybe, it will be useful for someone - this code works for me too:

columns: [
  {
    field: "processed",
    title:"Processed",
    width: "100px",
    template: '<input type="checkbox" ng-model="dataItem.processed" />'
  },

and you get the two-way binding with something like this:

<div class="col-md-2">
  <label class="checkbox-inline">
    <input type="checkbox" ng-model="vm.selectedInvoice.processed">
    processed
  </label>
</div>
Improve this answer

Comments

2

This can be done via the columns.template parameter by supplying a callback function whose parameter is an object representing the row. If you give the row a field named name, this will be the property of the object you reference:

$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    title: "Name",
    template: function(data) {
        return data.name + "has my respect."
    }
  }],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});

More information is available on Kendo's columns.template reference page.

Improve this answer

Comments

0

After hours of searching. Here is the conclusion that worked: access your grid data as {{dataItem.masterNoteId}} and your $scope data as simply the property name or function.

Example

template: '<a href="\\#/ops/order/{{orderId}}/note/{{dataItem.masterNoteId}}"><i class="fa fa-edit"></i></a>',

I really hope this safes somebody life :)

Improve this answer

Comments

0

just use like my example:

}, {
                field: "TrackingNumber",
                title: "@T("Admin.Orders.Shipments.TrackingNumber")",
                //template: '<a class="k-link" href="@Url.Content("~/Admin/Shipment/ShipmentDetails/")#=Id#">#=kendo.htmlEncode(TrackingNumber)#</a>'
            }, {
                field: "ShippingMethodName",
                title: "@T("Admin.Orders.Shipments.ShippingMethodName")",
                    template:function(dataItem) {
                        var template;
                        var ShippingMethodPluginName = dataItem.ShippingMethodPluginName;
                        var IsReferanceActive = dataItem.IsReferanceActive;
                        var ShippingMethodName = dataItem.ShippingMethodName;
                        var CargoReferanceNo = dataItem.CargoReferanceNo;
                        var ShipmentStatusId = dataItem.ShipmentStatusId;
                        if (ShipmentStatusId == 7) {
                            return "<div align='center'><label class='label-control'><b style='color:red'>Sipariş İptal Edildi<b></label></div>";
                        } else {
                            if (ShippingMethodPluginName == "Shipping.ArasCargo" || ShippingMethodPluginName == "Shipping.ArasCargoMP") {
                                template =
                                    "<div align='center'><img src = '/content/images/aras-kargo-logo.png' width = '80' height = '40'/> <label class='label-control'><b>Delopi Aras Kargo Kodu<b></label>";
                                if (IsReferanceActive) {
                                    template =
                                        template +
                                        "<label class='label-control'><b style='color:red; font-size:20px'>"+CargoReferanceNo+"<b></label></div>"; 
                                }
                                return template;
                            }
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.