We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Problem with "dataSource" binding on ejGrid when using Angular components and Angular cli

After successfully running the syncfusion/angular2-seeds project and displaying the grid, I experimented with a structure for an application I am working on transferring to Angular using the ejGrid as a component.

My goal was to do this using the Angular CLI (V1.2.7) to generate the project and components. I followed the advice at https://help.syncfusion.com/angular/gettingstarted/getting-started-angular-cli in setting up the project and making sure I had things structured to work with the CLI.

However, after working through other issues, I'm left with the persistent error below, and no data rows displayed in the grid. Column headings and the paging control footer displays, but no data.  My latest attempt, which was to move the working grid component with its embedded data into my project, and I still get the same error.  The error is related to the "dataSource" property on the grid as when I remove that from the html template, I get no error (but of course no data or grid structure).

I've put a repository with this project at https://github.com/michaelpear/angular-apps-test. Any advice on what is wrong would be appreciated.


GridComponent.html:2
ERROR TypeError: Cannot read property 'helpers' of undefined
    at Object.addInitTemplate (http://localhost:4200/vendor.bundle.js:38763:477330)
    at Object._initGridRender (http://localhost:4200/vendor.bundle.js:38763:471135)
    at Object._checkDataBinding (http://localhost:4200/vendor.bundle.js:38763:435084)
    at Object._init (http://localhost:4200/vendor.bundle.js:38763:430007)
    at Object.<anonymous> (http://localhost:4200/vendor.bundle.js:38083:21234)
    at jQuery.fn.init.n.fn.(anonymous function) [as ejGrid] (http://localhost:4200/vendor.bundle.js:38083:22491)
    at GridComponent.webpackJsonp.../../../../ej-angular2/src/ej/core.js.EJComponents.ngAfterViewInit (http://localhost:4200/vendor.bundle.js:3585:64)
    at callProviderLifecycles (http://localhost:4200/vendor.bundle.js:84791:18)
    at callElementProvidersLifecycles (http://localhost:4200/vendor.bundle.js:84766:13)
    at callLifecycleHooksChildrenFirst (http://localhost:4200/vendor.bundle.js:84750:17)

3 Replies

VA Venkatesh Ayothi Raman Syncfusion Team August 7, 2017 07:11 AM UTC

Hi Michael, 

Thanks for contacting Syncfusion support. 

This issue was reproduced when we missed to refer the jsrender script file in Angular app. This is cause of this issue. Please refer to the following Help Documents about Grid’s dependency scripts.

http://help.syncfusion.com/js/grid/getting-started
http://help.syncfusion.com/js/dependencies 

So, we suggest you to install and import the jsrender script file in your Angular app to resolve this issue. 

Regards, 
Venkatesh Ayothiraman. 



MP Michael Pear August 7, 2017 06:12 PM UTC

That worked. In keeping with the Angular CLI approach, I added the following to the scripts section in .angular-cli.json:

      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/jsrender/jsrender.min.js"
      ],


VA Venkatesh Ayothi Raman Syncfusion Team August 8, 2017 03:55 AM UTC

Hi Michael, 

Thanks for the update. 

We are very happy to hear that your requirement is achieved. 

Regards, 
Venkatesh Ayothiraman. 


Loader.
Live Chat Icon For mobile
Up arrow icon