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://www.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
I should add, I'm happy for the "on save" event to trigger a REST web service, but, again, I would like an example showing how this can be achieved using the ig-grid Angular control.
http://www.igniteui.com/help/iggrid-rest-updating
Here's how far I've got, without an examples to help me:
<ig-grid id="iggrid1" data-source="ListOfRecords" width="100%" height="240px" primary-key="UserID" auto-commit="true" auto-generate-columns="false"> <columns> . . . </columns> <features> <feature name="Updating" enable-add-row="true"> <column-settings> <column-setting column-key="UserID" read-only="true"> </column-setting> </column-settings> </feature> <rest-settings> <create url="/api/users/"> </create> </rest-settings> <feature name="Selection" > </feature> <feature name="Updating"> </feature> </features></ig-grid>
The grid displays some data, I can edit it and add rows, and when I click on Done, the Angular variable does get updated, but the REST URL doesn't get called, and I can't find any sample code to get this working.
Hello Michael,
Ignite UI is a product built on top of jQuery and jQuery UI frameworks. Its support for Angular is in the form of custom Angular directives which initialize controls declaratively as well as support for two-way data binding for igGrid, igComb, igEditors and igTree. In that sense we don't provide a complete Angular experience, because that would require a completely new product specifically built on top of the Angular framework. This means that you cannot run away from using the jQuery calls at runtime.
The project is developed publicly on GitHub: https://github.com/IgniteUI/igniteui-angular and all the concepts used for the directives are explained there. One should still use the Ignite UI API docs for development purposes, because we don't provide an API docs for the directives.
The answer of the question: "Where is this actually documented ?" is "In the section "Handling Events" on GitHub with the events listed in the Selection feature API docs".
Returning back to your main question. There is an API igGrid.saveChanges which will send all the pending transactions to the remote URL configured in the grid. You can call this API on the igGridUpdating.editRowEnded event. I'm attaching a sample for your reference.
Best regards,Martin PavlovInfragistics, Inc.
Hi Martin,
Thank you for your reply, it was really useful in nudging me forward in this process.
I'm now stuck at one further issue, which I need to get around to complete my evaluation of populaiting a ig-grid, and sending edits back to a web service.
When editing a row, I would like some of the cells to have drop down lists of possible values. And I can't do it.
I have tried having both a JavaScript variable containing hard-coded data, I have tried with an Angular variable (I was being optimistic) but neither seem to populate the drop down lists.
Actually, I want to do exactly the same as this example:http://www.infragistics.com/samples/aspnet/data-grid/dropdown-editors
I'm not using MVC, I'm trying my best to make this Angular-friendly... but just can't get it to work.
So, stripping it down to basics, here's my JavaScript hardcoded variable:
var ListOfPrograms = [ { "ProgramID": 1, "ProgramName": "First Program" }, { "ProgramID": 0, "ProgramName": "Second Program" }];
... and here's the <features> part of my ig-grid. Note that a drop down list DOES appear for my ProgramName column when I edit a row... but it's populated with "No results", so I must have the column-setting stuff badly setup (but, once again, working examples are scarce..)
<features> <feature name="Updating" enable-add-row="true" event-edit-row-ended="OnEditRowEnded"> <column-settings> <column-setting column-key="GuideID" read-only="true"> </column-setting><column-setting column-key="ProgramName" editor-type="combo" mode="dropdown" data-source="ListOfPrograms" text-key="ProgramName" value-key="ProgramID"> <editor-options> <editor-option data-source="ListOfPrograms" text-key="ProgramName" value-key="ProgramID"></editor-option> </editor-options> </column-setting> </column-settings> </feature> <feature name="Selection" mode="row" event-active-row-changed="OnIggridRowChanged"> </feature> </features>
(As you can see, I've tried sticking the "data-source" stuff into both the column-setting and editor-options tags, but neither works. I've left them in this sample to show what hopesless attempts I've tried.)
I just can't work out how to convert this example:
name: 'Updating', columnSettings: [{ //The combo is defined as an editor provider. Combo options are defined under 'editorOptions'. columnKey: "CategoryID", editorType: 'combo', required: true, editorOptions: { mode: "dropdown", dataSource: northWindCategoriesJSON, textKey: "Name", valueKey: "ID" } }],
..taken from this page...
http://www.igniteui.com/combo/grid-with-combo-editor
... into a <column-settings> attribute, as I'm trying to use.
What have I missed...?
... oh, and part 2 of my question...
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).
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 ?
I assume this is going to take more than a
$("#iggrid1").igGrid('dataBind');
...?
Any word here from Infragistics? Looking for your response to the recent posts.
Thanks!