Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
115
IgniteUI Angular2 - template column event not binding
posted

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://ko.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

Parents
  • 3995
    Offline posted

    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.

  • 3995
    Offline posted in reply to Jeremy Pamplin

    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.

    igniteui-angular2-template.zip
  • 3995
    Offline posted in reply to Abhishek Sinhal

    Hello Abishek,

    This sample demonstrates the usage of template defined in gridOptions.

  • 45
    Offline posted in reply to Deyan Kamburov

    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:

    3286.error.txt
    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?

Reply Children
No Data