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
Hi,
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?
Hello Abishek,
This sample demonstrates the usage of template defined in gridOptions.
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,
I am using infragistics trial version and trying angular grid samples, There is no proper documentation for iggrid for angular2/4. I am also facing the same issue while creating the column template. The click event is not hit for the buttons inside the template column controls
{ headerText: "Action", key: "Delete", dataType: "string", width: "20%", unbound: true, template: "<button type='button' (click)='myClick()'>Click Me</button> <span>{{clickedStatus}}</span> <span>ProductID</span>" }
Please can you provide me an example so that we can solve this easily.
Thanks in advance.