DataManager - executeLocal() : Json data is required to execute error even with basic example

[Martin Strojek]

Hi,

i try to build a paged grid but cannot get a basic example to work.

Upon rendering the SPA at some point (seems after data has been fetched) the datamanager throws an error:

ManageMandatorComponent.html:8 ERROR Error: DataManager - executeLocal() : Json data is required to execute
Error: DataManager - executeLocal() : Json data is required to execute
    at f (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:1139:64978)
    at t.DataManager.executeLocal (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:1139:3131)
    at Object._ensureDataSource (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:11131:471296)
    at Object._checkDataBinding (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:11131:447859)
    at Object._init (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:11131:442830)
    at new (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:738:21404)
    at r.fn.init.n.fn.(anonymous function) [as ejGrid] (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:738:22661)
    at GridComponent.EJComponents.ngAfterViewInit (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:923:64)
    at callProviderLifecycles (http://localhost:49464/dist/vendor.js?v=nMqkQ_LZ_CiGyFvzk1Kt7hliVxlW_KJUCW7-pcLGavQ:22246:18)
    at callElementProvidersLifecycles (http://localhost:49464/dist/vendor.js?v=nMqkQ_LZ_CiGyFvzk1Kt7hliVxlW_KJUCW7-pcLGavQ:22217:13)
    at f (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:1139:64978)
    at t.DataManager.executeLocal (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:1139:3131)
    at Object._ensureDataSource (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:11131:471296)
    at Object._checkDataBinding (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:11131:447859)
    at Object._init (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:11131:442830)
    at new (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:738:21404)
    at r.fn.init.n.fn.(anonymous function) [as ejGrid] (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:738:22661)
    at GridComponent.EJComponents.ngAfterViewInit (http://localhost:49464/dist/main-client.js?v=4sT28-oKDCFU-IE1IjkuoH_f_AVBAsMSpRnH5Dbxgts:923:64)
    at callProviderLifecycles (http://localhost:49464/dist/vendor.js?v=nMqkQ_LZ_CiGyFvzk1Kt7hliVxlW_KJUCW7-pcLGavQ:22246:18)
    at callElementProvidersLifecycles (http://localhost:49464/dist/vendor.js?v=nMqkQ_LZ_CiGyFvzk1Kt7hliVxlW_KJUCW7-pcLGavQ:22217:13)
    at viewWrappedDebugError (http://localhost:49464/dist/vendor.js?v=nMqkQ_LZ_CiGyFvzk1Kt7hliVxlW_KJUCW7-pcLGavQ:19492:15)
    at callWithDebugContext (http://localhost:49464/dist/vendor.js?v=nMqkQ_LZ_CiGyFvzk1Kt7hliVxlW_KJUCW7-pcLGavQ:24547:15)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:49464/dist/vendor.js?v=nMqkQ_LZ_CiGyFvzk1Kt7hliVxlW_KJUCW7-pcLGavQ:24077:12)
    at ViewRef_.detectChanges (http://localhost:49464/dist/vendor.js?v=nMqkQ_LZ_CiGyFvzk1Kt7hliVxlW_KJUCW7-pcLGavQ:21244:18)
    at http://localhost:49464/dist/vendor.js?v=nMqkQ_LZ_CiGyFvzk1Kt7hliVxlW_KJUCW7-pcLGavQ:15882:63
    at Array.forEach ()
    at ApplicationRef_.tick (http://localhost:49464/dist/vendor.js?v=nMqkQ_LZ_CiGyFvzk1Kt7hliVxlW_KJUCW7-pcLGavQ:15882:25)
    at http://localhost:49464/dist/vendor.js?v=nMqkQ_LZ_CiGyFvzk1Kt7hliVxlW_KJUCW7-pcLGavQ:15754:106
    at ZoneDelegate.invoke (http://localhost:49464/dist/vendor.js?v=nMqkQ_LZ_CiGyFvzk1Kt7hliVxlW_KJUCW7-pcLGavQ:86745:26)
    at Object.onInvoke (http://localhost:49464/dist/vendor.js?v=nMqkQ_LZ_CiGyFvzk1Kt7hliVxlW_KJUCW7-pcLGavQ:14960:33)

My code attached - any suggestions why i always get an error?

Used Libs:

Angular 4.4.5

syncfusion-JavaScript 15.3.33

ej-angular2 15.3.34

@syncfusion/ej2-data 1.0.19

Attachment: gridexamplecomponent_1c138984.zip

[Venkatesh Ayothi Raman]

Hi Martin, 

Thanks for using Syncfusion products. 

We were unable to reproduced the reported issue at our end and the reported issue will occur when we bound the JSON data as string. By default, the ej.parseJSON method used to parse the json string into the json data. So, we should parse the jsong string as json data using ej.parseJSON, if we return the data from the controller as a json string. 

For example, 

var promise=this.dataManager.executeQuery(new ej.Query().addParams('$top', '7')); 

         promise.done(function (e) {  

             

            ej.parseJSON(e.result); //parse the data to json object 

        });  

    } 

 

We went through your code example that you have shared for us and found that you are wrongly defined the datasource in Grid like as follows, 

this.dataManager = new DataManager({ url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Orders', adaptor: new ODataV4Adaptor }); 

In our source code, we have defined the DataManager class as ej.DataManager and adaptor name as string. So, we suggest you to use following code example instead of above, 

this.dataManager = ej.DataManager({ url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Orders', adaptor:"ODataV4Adaptor" }); 

        this.gridData = this.dataManager; 

We have also modified the sample which you have shared for us and it can be download from following link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Csample-312784516 

Regards, 

Venkatesh Ayothiraman. 

[Martin Strojek]

Hi,

thanks for the hint on the parameter, i once started with this example:

https://help.syncfusion.com/js/datamanager/data-binding with WebApiAdaptor an in this doc example the adaptor Parameter is not passed as a string. I just modified this starting snipped then.

Unfortunately I get a Cannot find name 'ej' error now.

Fixed the obove error with adding a reference of "@types/ej.web.all" to the types property in the tsconfig.json

[Martin Strojek]

Hi,

the ReferenceError: ej is not defined is back but I can't find out where i'm missing a piece.

Error:

restapi-adaptor.ts:6 Uncaught ReferenceError: ej is not defined
    at Object.<anonymous> (restapi-adaptor.ts:6)
    at __webpack_require__ (bootstrap 6fe175e14e9077501c5f:657)
    at fn (bootstrap 6fe175e14e9077501c5f:85)
    at Object.<anonymous> (navmenu.component.ts:15)
    at __webpack_require__ (bootstrap 6fe175e14e9077501c5f:657)
    at fn (bootstrap 6fe175e14e9077501c5f:85)
    at Object.<anonymous> (app.module.browser.ts:31)
    at __webpack_require__ (bootstrap 6fe175e14e9077501c5f:657)
    at fn (bootstrap 6fe175e14e9077501c5f:85)
    at Object.<anonymous> (index.js:4)

this is my Code in restapi-adaptor.ts

import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

export class RestApiAdaptor extends ej.ODataV4Adaptor  {

    processQuery(dm: ej.DataManager, query: ej.Query, hierarchyFilters?: any): any {
       
        // rewrite query string from orginal adapter
        let original = super.processQuery.apply(this, arguments);
        console.log(original);

        let url = original.url;
        url = url.replace('?$count=', '?count=');
        url = url.replace('&$count=', '&count=');
        url = url.replace('?$skip=', '?skip=');
        url = url.replace('&$skip=', '&skip=');
        url = url.replace('?$top=', '?top=');
        url = url.replace('&$top=', '&top=');

        return {
            type: original.type,
            url: url,
            ejPvtData: original.ejPvtData,
            contentType: original.contentType,
            data: original.data
        };
    }
}

[Martin Strojek]

Fixed again, had to put the EJAngular2Module reference in app.module.shared.ts before the component holding the grid / loading the adaptor.

[Venkatesh Ayothi Raman]

Hi Martin, 

Thanks for the update. 

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

Regards, 

Venkatesh Ayothiraman.