I'm trying to do something relatively simple, but having an issue that is driving me mad, I'm sure I am missing something simple.

I have an AngularJS site that's for the most part working fine, and in that I have a Kendo Grid. All I am trying to do is have the first column of the grid have a link to another page, using an ID that is in the grid data.

The code I am using is below, and this works in that it creates a link mostly based on what I am asking but for some weird reason the ID it uses as part of the URL is being rounded up. To give you an example the actual ID I need to use is 37509488620601829, this is what is returned by my API and what is shown if I make the ID field a column in my table, but in the link this gets rounded up to 37509488620601830 (note the last 2 digits).

Any insight on this is appreciated.

   <div kendo-grid k-data-source="SearchResultsGrid" k-columns="[{'field': 'Name' , 'title':'Name', 'template': '<a ui-sref=&quot;Id({ Id: #: Id # }) &quot;>#: Name #</a>'  },{'field': 'Alias' , 'title':'Alias' },{'field': 'Server' , 'title':'Server' },{'field': 'Faction' , 'title':'Faction' }]"></div>

I'm trying to do something relatively simple, but having an issue that is driving me mad, I'm sure I am missing something simple.

I have an AngularJS site that's for the most part working fine, and in that I have a Kendo Grid. All I am trying to do is have the first column of the grid have a link to another page, using an ID that is in the grid data.

The code I am using is below, and this works in that it creates a link mostly based on what I am asking but for some weird reason the ID it uses as part of the URL is being rounded up. To give you an example the actual ID I need to use is 37509488620601829, this is what is returned by my API and what is shown if I make the ID field a column in my table, but in the link this gets rounded up to 37509488620601830 (note the last 2 digits).

Any insight on this is appreciated.

   <div kendo-grid k-data-source="SearchResultsGrid" k-columns="[{'field': 'Name' , 'title':'Name', 'template': '<a ui-sref=&quot;Id({ Id: #: Id # }) &quot;>#: Name #</a>'  },{'field': 'Alias' , 'title':'Alias' },{'field': 'Server' , 'title':'Server' },{'field': 'Faction' , 'title':'Faction' }]"></div>

• javascript
• angularjs
• asp-web-api
• kendo-grid
• angular-ui-router

3 Answers 3

First, keep configuration like this out of the HTML. This makes things much easier to read and manage. Second, the remended way for binding is to use angular's ng-bind or interpolation ({{}}) methods rather than Kendo's default template binding. Within the template that you supply to the grid, you have access to a dataItem variable. This is a reference to the row item.

HTML:

<div kendo-grid k-options="gridOptions"></div>

Controller:

scope.gridOptions = {
    dataSource: SearchResultsGrid,
    columns: [{
        'field': 'Name',
        'title': 'Name',
        // 'template': '<a ui-sref=&quot;Id({ Id: #: Id # }) &quot;>#: Name #</a>'
        'template': '<a ui-sref="{{dataItem.Id}}">{{dataItem.Name}}</a>'
    }, {
        'field': 'Alias',
        'title': 'Alias'
    }, {
        'field': 'Server',
        'title': 'Server'
    }, {
        'field': 'Faction',
        'title': 'Faction'
    }]
};

Try changing this part of your code

'<a ui-sref=&quot;Id({ Id: #: Id # }) &quot;>'

To

'<a ui-sref="Id({ #: Id # })">'

You shouldn't have mention that column def from html it self do store it in some scope variable and then assign that scope variable reference to it

Kendo variable is accessible in template using #= variableName # you were doing #: variableName # which is taking you into a problem

Markup

<div kendo-grid k-data-source="SearchResultsGrid" k-columns="columnDef"></div>

Code

$scope.columnDef =[{
    'field': 'Name',
    'title': 'Name',
    'template': '<a ui-sref="Id({ \'Id\': #= Id # })">#= Name #</a>'
}, {
    'field': 'Alias',
    'title': 'Alias'
}, {
    'field': 'Server',
    'title': 'Server'
}, {
    'field': 'Faction',
    'title': 'Faction'
}];