Hi,
I'm starting to write a project using Angular and Ignite UI controls, especially the igGrid. So I got the angular directives and created a grid and set a data source which is working fine. Now I'm getting stuck on how I could trigger a function in my Angular controller from a template column. There is a sample on your page showing how to call a function by using the onclick event but this of course won't be executed within the controller so I would like to use something like the ng-click binding. As a sample what I already have here is the column definition:
<column key="Delete" header-text="Delete" data-type="string" unbound=true width="90px" template="{{getHtml('#deleteTemplate')}}"></column>
And this is the template I defined that is currently calling a javascript function getting passed the data
<script id="deleteTemplate" type="text/x-jquery-tmpl"><input type='button' onclick='alert("{{>#data}}")' value='Delete row' /></script>
As you can see I am using the jsrender engine for templates. Is there a way to use ng-click on this button and make it call a function on the angular controller of the context?
As a side question - I switched to jsrender because I could not find a solution to use an {{if}} within an {{each}} - is this possible with the Infragistics rendering engine?
The delete is just a sample – I know I could do this by using the Updating events but I have some other scenarios where I will need to call a function on the Controller and pass it the data of the row the button is shown in.
Any help would be appreciated.
Hello Michael,
I'm developing an angularJS app using Infragistics Ignite UI controls. I'm using the iggrid control to display a few information in a page.
I should be able to select a few records and then click on a 'Process' button which will call a method in the Angular controller. I would like to know in the controller that what records are selected in the iggrid.
I've pasted the code snippet below. Can you please suggest the best way to accomplish this ?
<
<ig-grid id="grid" height="850px"
data-source="c.reprocessingData">
<columns>
<column key="isSelected" header-text="Select" template="<input type='checkbox' ng-model='${isSelected}'>" data-type="bool"></column>
.
</columns>
<features>
<feature name="Paging" page-size="20">
</feature>
<feature name="Filtering">
<feature name="Sorting">
</features>
</ig-grid>
<div class="divMargin setItemToBottom" style="height:10%;">
<button type="button" ng-click="c.process()" class="btn btn-default">process</button>
</div>
isSelected is a valid property in the "reprocessingdata" collection. I'm expecting the template to set this property on the checkbox select, so that I can access the selected items in the controller on process button click.
Hello ruud7,
Please let me know if you need further assistance with this.
Hi ruud7,
In order to use any Angular directives in the template, you will need to use $compile rather than $interpolate. This also explains why ng-class doesn't work in my sample. $interpolate understands the "{{style}}" syntax and places the $scope.style value into it. (which is set when $scopeRef.calculateStyle(); is called)
The following StackOverflow questions provide some useful information on this:
http://stackoverflow.com/questions/20911214/geting-ng-repeat-to-work-inside-of-angularjss-interpolate-service
http://stackoverflow.com/questions/17900588/what-is-the-difference-between-the-parse-interpolate-and-compile-services
If you have any further questions or concerns with this, please let us know.
thanks for your replies. I tried out your sample and had some problems of it running very slow. The Northwind data seems to have been the reason, so I exchanged that. Afterwards it was running smooth but I had trouble getting an ng-click to work. I added an ng-click calling a message on the Controller scope but it does not get called. What would I need to do to get that working. Also it seems to me the ng-class in your sample doesn't work and it just takes the class={{style}}. Does the interpolate even handle the ng-... attributes?
Thanks for your support.
Please let me know if you need further assistance with this issue.