Hi. I am trying to use the "column template" feature out of the box (http://www.igniteui.com/grid/column-template) where I can add a column of buttons.
However, I am having issues with binding an event to a button, exact same issue as described in the previous thread below:
http://es.infragistics.com/community/forums/t/107978.aspx
Is this issue going to be fixed in upcoming releases? Could you please provide sample code for a workaround?
Thanks.
-Jessica
Hey Jessica,
Thank you for posting into our community.
I cannot give a promise on having that working in the upcoming release, because of compatibility issues regarding those bindings.
I'm going to work on a sample code for you.
Hey Deyan,
This issue is a big pain point for us. It feels like we are losing the power of these components when we use angular 2 instead of angular 1.X. Sample code would be a big help. Anything you can do to expedite this is appreciated.
Hello guys,
I managed to prepare a solution with Angular2 templating. It required a lot of modifications. And the reason for this is the huge conceptual difference between both IgniteUI templating and Angular2 templating.
It would of been easier if everything in IgGrid was a component. If every row and cell was a separate component, but that would of had massive performance impact.
But, let's get to the point:
Here's what I've done to achieve usage of a component inside of a cell in the IgGrid:
1. I extended the directive Column. It's MyColumn in the sample and it is used to override the IgniteUI template and use the ComponentFactoryResolver to create the Component we want.
2. Once we got the templating overridden we are able to build dynamically a component per record and store all those components. I'm also using the primaryKey to be sure which component for which row is.
3. Once the data is rendered, we want to go through the each templated cell and fill it with the desired Angular Component.
I tried explaining this as brief as possible, so if you have questions on that or need additional assistance, please let me know.
Hi,
In my case columns are binded through "options" as below.
<ig-grid [widgetId]="dataGridID" [(options)]="gridOptions"></ig-grid>
Can you please give me an idea how to bind tempalte column event in this scenario.
Thanks,
Hello Abishek,
This sample demonstrates the usage of template defined in gridOptions.
This is due to the rename of the repository. Here's the updated link -
http://igniteui.github.io/igniteui-angular-wrappers/samples/igGrid/igGrid.html
Hi Deyon,
1. The above link for the sample is broken!
2. I downloaded your last igniteui-angular2-template.zip and tried to start without success. I use npm 5.7.1 .
'npm install' show warnings and 'npm start' throws an error:
npm install npm WARN angular-in-memory-web-api@0.1.17 requires a peer of rxjs@5.0.0-rc.4 but none is installed. You must install peer dependencies yourself. npm WARN angular-in-memory-web-api@0.1.17 requires a peer of zone.js@^0.7.2 but none is installed. You must install peer dependencies yourself. npm WARN igniteui-angular2@1.1.3 requires a peer of @angular/common@2.0.0 but none is installed. You must install peer dependencies yourself. npm WARN igniteui-angular2@1.1.3 requires a peer of @angular/core@2.0.0 but none is installed. You must install peer dependencies yourself. npm WARN angular-quickstart@1.0.0 No license field. npm start > angular-quickstart@1.0.0 start /Users/xxxxx/igniteui-angular2-template1 > tsc && concurrently "tsc -w" "lite-server" e2e/app.e2e-spec.ts(14,29): error TS2345: Argument of type 'string' is not assignable to parameter of type 'Expected<Promise<any>>'. node_modules/@angular/core/src/facade/lang.d.ts(12,17): error TS2693: 'Map' only refers to a type, but is being used as a value here. node_modules/@angular/core/src/facade/lang.d.ts(13,17): error TS2693: 'Set' only refers to a type, but is being used as a value here. node_modules/@types/core-js/index.d.ts(47,36): error TS2304: Cannot find name 'Iterable'. node_modules/@types/core-js/index.d.ts(355,48): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(356,52): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(357,34): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(358,34): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(359,34): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(360,61): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(361,60): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(362,65): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(362,97): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(363,60): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(364,58): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(365,59): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(366,58): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(367,61): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(367,117): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(368,42): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(370,81): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(371,78): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(372,76): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(373,73): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(436,6): error TS2304: Cannot find name 'Symbol'. node_modules/@types/core-js/index.d.ts(469,59): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(470,59): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(472,48): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(473,69): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(477,40): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(479,48): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(695,55): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(696,45): error TS2304: Cannot find name 'PropertyKey'. node_modules/@types/core-js/index.d.ts(712,46): error TS2304: Cannot find name 'Iterable'. node_modules/@types/core-js/index.d.ts(713,43): error TS2304: Cannot find name 'Iterable'. node_modules/@types/core-js/index.d.ts(829,20): error TS2304: Cannot find name 'PromiseConstructor'. node_modules/@types/core-js/index.d.ts(844,32): error TS2304: Cannot find name 'Iterable'. node_modules/@types/core-js/index.d.ts(848,39): error TS2304: Cannot find name 'Iterable'. node_modules/@types/core-js/index.d.ts(848,53): error TS2304: Cannot find name 'Iterator'. node_modules/@types/core-js/index.d.ts(1486,36): error TS2339: Property 'for' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(1490,43): error TS2339: Property 'hasInstance' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(1494,50): error TS2339: Property 'isConcatSpreadable' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(1498,40): error TS2339: Property 'iterator' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(1502,38): error TS2339: Property 'keyFor' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(1506,37): error TS2339: Property 'match' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(1510,39): error TS2339: Property 'replace' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(1514,38): error TS2339: Property 'search' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(1518,39): error TS2339: Property 'species' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(1522,37): error TS2339: Property 'split' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(1526,43): error TS2339: Property 'toPrimitive' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(1530,43): error TS2339: Property 'toStringTag' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(1534,43): error TS2339: Property 'unscopables' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(2305,36): error TS2339: Property 'for' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(2309,43): error TS2339: Property 'hasInstance' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(2313,50): error TS2339: Property 'isConcatSpreadable' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(2317,40): error TS2339: Property 'iterator' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(2321,38): error TS2339: Property 'keyFor' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(2325,37): error TS2339: Property 'match' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(2329,39): error TS2339: Property 'replace' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(2333,38): error TS2339: Property 'search' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(2337,39): error TS2339: Property 'species' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(2341,37): error TS2339: Property 'split' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(2345,43): error TS2339: Property 'toPrimitive' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(2349,43): error TS2339: Property 'toStringTag' does not exist on type 'SymbolConstructor'. node_modules/@types/core-js/index.d.ts(2353,43): error TS2339: Property 'unscopables' does not exist on type 'SymbolConstructor'. node_modules/igniteui-angular2/igniteui.angular2.ts(265,22): error TS2693: 'Map' only refers to a type, but is being used as a value here. node_modules/igniteui-angular2/igniteui.angular2.ts(974,22): error TS2693: 'Map' only refers to a type, but is being used as a value here. node_modules/igniteui-angular2/igniteui.angular2.ts(1042,23): error TS2693: 'Map' only refers to a type, but is being used as a value here. node_modules/igniteui-angular2/igniteui.angular2.ts(1073,23): error TS2693: 'Map' only refers to a type, but is being used as a value here. node_modules/protractor/built/browser.d.ts(258,37): error TS2503: Cannot find namespace 'webdriver'. node_modules/protractor/built/browser.d.ts(265,55): error TS2503: Cannot find namespace 'webdriver'. node_modules/protractor/built/browser.d.ts(265,78): error TS2503: Cannot find namespace 'webdriver'. node_modules/protractor/built/browser.d.ts(357,31): error TS2503: Cannot find namespace 'webdriver'. node_modules/protractor/built/browser.d.ts(368,26): error TS2503: Cannot find namespace 'webdriver'. node_modules/protractor/built/browser.d.ts(452,36): error TS2503: Cannot find namespace 'webdriver'. node_modules/protractor/built/ptor.d.ts(13,29): error TS2503: Cannot find namespace 'webdriver'. node_modules/rxjs/Observable.d.ts(66,60): error TS2693: 'Promise' only refers to a type, but is being used as a value here. node_modules/rxjs/Subject.d.ts(24,5): error TS2416: Property 'lift' in type 'Subject<T>' is not assignable to the same property in base type 'Observable<T>'. Type '<T, R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'. Type 'Observable<T>' is not assignable to type 'Observable<R>'. Type 'T' is not assignable to type 'R'. npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! angular-quickstart@1.0.0 start: `tsc && concurrently "tsc -w" "lite-server" ` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the angular-quickstart@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I changed rxjs- and zone- versions in dependencies but this not solved the problem.
What can I do?