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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

131956 Aug 4,2017 06:45 PM Aug 7,2017 11:55 PM Angular 3
loading
Tags: ejGrid
Michael Pear
Asked On August 4, 2017 06:45 PM

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)

Venkatesh Ayothi Raman [Syncfusion]
Replied On August 7, 2017 03:11 AM

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. 


Michael Pear
Replied On August 7, 2017 02:12 PM

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"
      ],

Venkatesh Ayothi Raman [Syncfusion]
Replied On August 7, 2017 11:55 PM

Hi Michael, 

Thanks for the update. 

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

Regards, 
Venkatesh Ayothiraman. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;