Hi guys,
My company has asked me to evaluate your IgniteUI product, and so far, I've had nothing but problems.
For example, I want to use the IgniteUI ig-grid control with Angular. Pure Angular... no messing around with jQuery calls, etc.
Your scarce examples seem to all use hardcoded Northwind JSON data, and I can't find a simple ig-grid / Angular example to learn from.
For example, in this thread, a user asked how to call a function if a user clicks on a row.
http://ko.infragistics.com/community/forums/t/101555.aspx
The answer was to use "event-active-row-changed", but their follow-up question, "Where is this actually documented ?" was ignored.
I have the same kind of issue.
I want to kick off a function in my Angular controller when the user has edited something (in-line) in their ig-grid (so I can kick off a WCF web service to save the changes back to SQL Server), but I can't find any example code anywhere.
I'm sure there's a simple answer to this, but your documentation and examples are hopeless, or resort to using jQuery.
Can someone help, please ?
Mike
Hello Michael,
Looking at your code I see that there is an issue with the following code:
$("#grid1").igGrid("cellById", 1, "ShipCity");
It doesn't return any cell and the reason is that the second argument should be a valid primary key value and your data doesn't have row with id = 1. To resolve this you can get the first row pk value like this:
parseInt($($("#grid1").igGrid("rows")[0]).attr("data-id"))
The resulting code will be:
$combo = $("#grid1").igGridUpdating("editorForCell", $("#grid1").igGrid("cellById", parseInt($($("#grid1").igGrid("rows")[0]).attr("data-id")), "ShipCity"), true);
Best regards,Martin PavlovInfragistics, Inc.
Michael Gledhill said:But if I set up a web service to return that same data, store it in the same $scope variable, I still can't get the simple array of values into the drop down list.
The reason for this approach not working is because the evaluation that we're doing with scope.$eval probably copies the data and loses the reference to the original data source.
Michael Gledhill said:Uncaught Error: cannot call methods on igCombo prior to initialization; attempted to call method 'option'b.extend.error @ jquery-1.9.1.min.js:3(anonymous function)
This error is expected and the reason is that the editors are not created at igGrid initialization time, but the first time the user enters edit mode. To resolve it you need to force editor creation when you want to set its data source. This is done with the igGridUpdating.editoForCell API which second param should be set to true. I'm attaching a modified sample demonstrating this approach.
Hope this helps,Martin PavlovInfragistics, Inc.
Hi Martin,
Many thanks for the reply.
Your sample code answered a lot of questions for me, except for one.
I still find that, with hardcoded data (like you used), there's no problem.
But if I set up a web service to return that same data, store it in the same $scope variable, I still can't get the simple array of values into the drop down list.
And if I try your suggestion to bind this data:
$("#MikesGrid").igCombo("option", "dataSource", $scope.ListOfCities);
...then I get this JavaScript error...
Uncaught Error: cannot call methods on igCombo prior to initialization; attempted to call method 'option'b.extend.error @ jquery-1.9.1.min.js:3(anonymous function)
What would be useful is if you could change your sample so rather than hardcoding the values...
$scope.ListOfPrograms = [ { "ProgramID": 1, "ProgramName": "First Program" }, { "ProgramID": 0, "ProgramName": "Second Program" }];
...you simulated loaded this data from a web service...
$scope.ListOfPrograms = null;
setTimeout(function () {
$scope.ListOfPrograms = [{ "ProgramID": 1, "ProgramName": "First Program" }, { "ProgramID": 0, "ProgramName": "Second Program" }];
// Need to use $apply, as we're setting an Angular value in a timer thread
$scope.$apply();
// Attempt to tell our ig-grid that the data has changed
$("#grid1").igCombo("option", "dataSource", $scope.ListOfPrograms);
}, 1000);
According to your email, this should work.
In reality, your sample also throws this "cannot call methods on igCombo prior to initialization" error.
Best regards,
Hello Michael, Alex,
To start with binding the igCombo data source you need to evaluate the data source value (Note: This is not done automatically for the childs of the ig-grid tag). This is done with the following syntax:
<editor-options data-source="{{ListOfPrograms}}" text-key="ProgramName" value-key="ProgramID"></editor-options>
This code will bind the editor-options data source to the local $scope.ListOfPrograms variable.
Now that you bound the combo editor to some data you'll notice that after the edit finishes the value displayed in the grid is from the igCombo's valueKey setting. This is because the igGrid doesn't do the lookup automatically and you should do it yourself using a igGrid.columns.formatter function callback. I'm attaching a working sample to demonstrate combo editor scenario with different valueKey/textKey pair.
Alex Grape said:Actually, this "ListOfPrograms" array will be a JSON array populated by a web service (so its data won't be available when the page first loads).
Populating igCombo editor provider from a web service will not work as expected for architectural reasons. You should bind the igCombo to a local $scope data.
Alex Grape said:How do I tell the ig-grid that this drop down list's "data-source" has changed.... or does this data-source only "kick in" when the user edits a row, and the ig-grid evaluates what this ListOfPrograms contains at that point ?
The data source is only evaluated once when the combo editor provider is created. Although it's possible with the following API call $(".selector").igCombo("option", "dataSource", newDataSource);, changing it dynamically will lead to errors like lookup data in the combo cannot be found.
Hope this helps, Martin Pavlov Infragistics, Inc.