Hi, I’m trying to display the row index inside a grid column, but I’m unable to execute a calculation based on the index like:
<td>${parseInt($i) + 1}</td>
The calculation is not executed and rendered as: ${parseInt(0) + 1}
Does the templating engine support inline calculations / functions?
If I only use the $i directive each row’s index comes out as 0, and is not incremented?
Thanks in advanced.
Christoff
Hi Christoff,
The templating engine does not do any javascript evaluation inside the template body. This was done for performance purposes and the only javascript evaluation is actually performed inside block directives for the templates.
In addition to that the $i would not work properly in the context of a grid, as the grid is a bit sophisticated in the utilization of the templates, so I would suggest against using it, as it would simply not evaluate correctly for you.
You can use the row selectors feature in order to get row numbering starting at 1 (this is part of the row selectors feature).
I hope this solution works for you!
Hi Konstantin
Thanks for the response. I did use the RowSelector feature as suggested and got the desired result. I’m am just wondering why the row number are starting from 2 when I set the rowNumberingSeed to 0. I can resolve this by setting the seed to -1.
{ name: 'RowSelectors', enableRowNumbering: true, rowNumberingSeed: 0, requireSelection: true },
When only one row is found it starts from 2 when setting the seed as 0.
Thanks in advace.
Yes, it wouldn't work if you already initialize on a table. The "xxx_table" element is not created at all in this case.
Could you please provide me with some more information about the grid? A list of features being used, the settings for the Selection feature and whether the grid uses templating should suffice. I am asking because I can't reproduce the issue with the few basic samples I tried on.
Thanks,
Stamen Stoychev
Hi as requested the grid script.
<table id="historyTable"></table> <div id="historyTaskContainer"></div> <script id="historyRowTemplate" type="text/x-jquery-tmpl"> <tr> <td>${Id}</td> <td>${DisplayName} (#<span>${Id}</span>)</td> <td>${Originator.DisplayName}</td> <td>${FinalParticipant.DisplayName}</td> <td>${DateOfCompletion}</td> </tr> </script> <script> $(function () { $("#historyTable").igGrid({ dataSource: new $.ig.JSONPDataSource({ dataSource: "@base.Url.Action("History", controller, new { Id = UrlParameter.Optional, ActivityId = base.Model.Id })", type: "remoteUrl", responseDataKey: "Results" }), autoGenerateColumns : false, alternateRowStyles : true, showHeader : true, showFooter : false, rowTemplate : $("#historyRowTemplate").html().replace(/(\r\n|\n|\r)/gm,""), columns: [ { headerText: "Id", key: "Id", dataType: "number", hidden:true }, { headerText: "Description", key: "DisplayName", dataType: "string" }, { headerText: "From", key: "Originator" }, { headerText: "Participant", key: "FinalParticipant" }, { headerText: "Completed", key: "DateOfCompletion", dataType: "date", format: "dateTime", formatter: function (date) { return Globalize.format( new Date(date.getTime() + (new Date().getTimezoneOffset() * -60000)), $.ig.regional.defaults.dateTimePattern); } } ], features: [ { name: 'Sorting', type: 'local' }, { name: 'RowSelectors', enableRowNumbering: true, // Setting the seed to 0 result in the index to start from 2!!!!! rowNumberingSeed: 0, requireSelection: true }, { name: 'Selection', mode: 'row', multipleSelection: false, rowSelectionChanging: function (e, args) { var dataView = $('#historyTable').data('igGrid').dataSource.dataView(); if(dataView.length > 0){ var id = dataView[args.row.index].Id; $("#historyTaskContainer") .load("@base.Url.Action("Task", controller, new {Id = UrlParameter.Optional, View = "_HistoryTask" })" + "&id=" + id); } } } ] }); $("#historyTable").live("iggriddatarendered", function (event, args) { var dataView = $('#historyTable').data('igGrid').dataSource.dataView(); if(dataView.length > 0){ // Setting the selected row on render has no affect. $('#historyTable').igGridSelection('selectRow', dataView.length -1); $("#historyTaskContainer").load("@base.Url.Action("Task", controller, new { Id = UrlParameter.Optional, View = "_HistoryTask" })" + "&id=" + dataView[dataView.length-1].Id); } }); }); </script>
Hello again,
After some investigation it turned out the culprit is a known bug that represents itself with the dataRendered event firing too early when there are hidden columns defined. A fix for this bug has already been implemented and will be released with the next service releases for both the 11.2 and 12.1 version.
To accomplish the task at hand I suggest you bind to the rendered event instead:
$("#historyTable").live("iggridrendered", function (event, args) {
Hope this helps!
Best regards,
Hi Stamen
Thanks allot you’re a life saver. Binding to the iggridrendered event did the trick for selecting the desired row. But is there still something up with the index’s numbering or is that by design?
Thanks Christoff
I am glad binding to iggridrendered helped. As for the indexing, it's not by design, which is why I opened that support case I mentioned in one of my earlier posts. An internal bug item will be created and linked to it so the issue can be investigated and fixed for the next service releases. I think you can workaround it by setting the rowNumberingSeed to -1 without causing any undesired behavior.
Thank you again for using Infragistics forums!