Hi,
As per the requirement of my project, I am in need of developing Ignite UI grid with Angular 2 and Web API. I have worked on Ignite UI Jquery grid. But Angular 2 is entirely new to me. I do know that the support for Angular 2 is on the way. I was following the sample sol. from Github('https://github.com/IgniteUI/igniteui-angular2') to create Angular 2 Grid. I was successfully able to do it. But I want the data to be dynamically loaded from Web API. I tried creating some HTTP service class from angular to achieve the dynamic loading of data, but was not successful in doing it. I went through the forum for any relevant solution, but didn't find any. It will be really helpful if you could provide a working example of Ignite UI grid with Angular 2 & Web API ASAP.
Awaiting for your response.
Regards,
Rahul S
Hi Rahul,
In my opinion this is the reason.
The values of the primary keys are going into data-id attribute, which is an html attribute and probably those special characters and white spaces are messing it up.
Hi Deyan,
I had already defined primaryKey. On debugging I came to know that it the special characters & white space present in Key attribute of columns which creates the problem. I removed all the white spaces & special characters and now everything works as excepted. Is this a known behavior of the grid?
Regards
Hello Rahul,
Make sure you have primaryKey defined - it is required from the Updating. Also its value should be unique for the record.
As communicated before, I am now creating the grid configuration when I receive the data from API. What I do is, I will have two objects in JSON string from API. One will have the Column configuration (headerText, Key. Width) & the other will have column data. I am successful in binding the data and everthing works fine. I have enabled updating and paging as features. But when I try to edit the columns I am getting an error in console saying as follows:-
ERROR TypeError: Cannot read property 'key' of null at t.(anonymous function).(anonymous function).getColumnByTD (http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js:148:3530) at t.(anonymous function).(anonymous function).getColumnByTD (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028) at t.(anonymous function).(anonymous function)._getColumnKeyForCell (http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js:503:31547) at t.(anonymous function).(anonymous function)._getColumnKeyForCell (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028) at t.(anonymous function).(anonymous function).editorForCell (http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js:502:7827) at t.(anonymous function).(anonymous function).editorForCell (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028) at t.(anonymous function).(anonymous function)._startEditForCell (http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js:502:30310) at t.(anonymous function).(anonymous function)._startEditForCell (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028) at t.(anonymous function).(anonymous function)._startEditForRow (http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js:502:29215) at t.(anonymous function).(anonymous function)._startEditForRow (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
I am able to bind the column with key element, autoGenerateColumn flag is false. Can you tell me what am I doing wrong.
i just figured out way to do it. As I said in last query, I am using promise to wait for data and reapply all grid config including data. is there a way to make use of subscribe & Observable in Angular 2 to achieve the same.
Can you give me any clarity regarding when the official support for Angular 2 will be announced.
Thank you once again.