Hi,
I'm trying to use the row-edit-dialog of the igGrid Updating to edit an item that has a list as a property. The list entries should be displayed with their own input fields and changes should be saved back to the object.
I was trying to solve this with templates but was not able to access the list in the template. It looks as if the data is added after the templating because inside I was only able to access the header text and the datakey not the data itself. Is it possible to still get this working or will I have to create my own dialog?
If I have to create my own dialog how would you recommend that I open it and get the changes back into the grid – if possible using the Updating events of the grid just with my own dialog.
I am using Ignite UI 2014.2 and Angular with the igniteui-angular.js directives.
Any help would be appreciated.
Hello Christian,
Since I don't know much about your igGrid configuration I cannot make any good advice at this moment. Can you share with me what's the type of your "list" column/property? In JavaScript there is not list type. Are you talking about a JavaScript array property or an object?
It would be great if you share some code sample so I can get an idea of the whole grid configuration.
Thanks in advance,Martin PavlovInfragistics, Inc.
Hello Pavlov,
thanks for looking into this. I attached a complete simplified sample. I meant an array - still thinking in the C# world ;-)
Could you please maybe look into both options:
1. How could I modify the standard editrowtemplate to work with an array type property
2. How could I integrate my own custom dialog into the standard updating of the igGrid - if possible also using features like commit and undo
I added a sample dialog that is currently opened when I select a row - instead I would like it to open if I click add new row or if I enter edit mode for a row.
Looking forward to your reply. Thanks,
Stefan
Hello Stefan,
On your first question. Currently there is no out of the box solution for row edit template to work with complex objects. The custom solution is to handle the rowEditDialogContentsRendered event and inject your custom input fields. Then you need to cancel the default behavior of the row edit template by canceling the rowEditDialogClosing event and manually update the grid by using the igGridUpdating.updateRow or igGridUpdating.addRow API. I didn't have time to try this approach myself. I'll work on that on Monday. However I modified your sample to make it work. You can find it attached to this forum post.First I handled the editRowStarting event in order to show the dialog. Inside the event I'm canceling the default behavior. Also there is a check whether the operation is adding a row or editing. I also changed the "designation" column data type to "object". This is needed in order to see the property value as an array and not string. Next I added two buttons - "Save" and "Cancel". The "Save" button calls igGridUpdating.addRow or igGridUpdating.updateRow API in order to update the data source. The "Cancel" button only closes the dialog. Last I removed the template of the designation column and replaced it with formatter function. This way I was able to call a scoped function and execute the logic you had in your template in JavaScript.
Hope this helps,Martin PavlovInfragistics, Inc.
Hello Martin,
your solution is working but it means a lot of access to UI elements from the Angular Controller. Do you see ways around this? Do you think ng-show makes sense for hiding/showing the dialog. Would changing the data in the scope work as well as calling the Updating functions on the grid? I tried it and it seemed to work but I'm not sure if it is stable - I think I had some strange side effects but it might just have been a programming error.
Did you have time to look into the approach with modifying the dialog?
Thanks for your help.
Hello ruud7,
ruud7 said:your solution is working but it means a lot of access to UI elements from the Angular Controller. Do you see ways around this?
As I already said your scenario includes complex object for which we don't have out of the box solution yet. For now this requires custom code.
ruud7 said:Do you think ng-show makes sense for hiding/showing the dialog.
You cannot depend on ng-show, because it will desynchronize the widget JavaScript state with its DOM representation.
ruud7 said:Would changing the data in the scope work as well as calling the Updating functions on the grid?
It should. If not, please attach your sample for me to investigate.
ruud7 said:Did you have time to look into the approach with modifying the dialog?
No. This approach will require an equivalent amount of custom code, which should be handled with DOM manipulation. For me it has no advantage from the already implemented solution.
Please let us know if you have any other questions or concerns about this issue and I'll be glad to help you.
Hello Michael,
thanks for your reply. Well I think there is no possibility to solve things better in the current version but it would be nice if showing/hiding an igDialog could be triggered by binding in the next version. The other thing that would be nice but probably more complicated is if it were possible to specify a custom add/edit dialog for the igGrid without having to cancel the standard dialog and then opening it myself.
Hi ruud7,
The igGrid has a dataBound event that fires when data is bound to the grid. You could use this event to show/hide an igDialog.
As for implementing a fully custom editing dialog, this has been determined to be a new product idea. You can suggest new product ideas for future versions (or vote for existing ones) at <http://ideas.infragistics.com>.
There are many benefits to submitting a product idea:
- Direct communication with our product management team regarding your product idea.
- Notifications whenever new information regarding your idea becomes available.
- Ability to vote on your favorite product ideas to let us know which ones are the most important to you. You will have ten votes for this and can change which ideas you are voting for at any time.
- Allow you to shape the future of our products by requesting new controls and products altogether.
- You and other developers can discuss existing product ideas with members of our Product Management team.
Steps to create your idea:
1. Log into the Infragistics Product Idea site at http://ideas.infragistics.com (creating a new login if needed).
2. Navigate to the product / platform channel of your choice (e.g. WPF, Windows Forms, ASP.NET, HTML5 / Ignite UI, iOS / NucliOS, etc.)
3. Add your product idea and be sure to be specific and provide as much detail as possible.
• Explain the context in which a feature would be used, why it is needed, why it can’t be accomplished today, and who would benefit from it. You can even add screenshots to build a stronger case. Remember that for your suggestion to be successful, you need other members of the community to vote for it. Be convincing!
• Include a link to this thread in your idea so product management will be able to look back at this case.
The Product Idea site puts you in the driver’s seat and allows you to track the progress of your ideas at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you.
If you need anything else, please let us know.
If you have any further questions with this, please let me know.