Problem with connecting DataManager to Grid

[Karol Wlodarek]

Hello,

We are having trouble with connecting your AngularJS Grid with our Web API. We tried implementing your example binding DataManager as a datasource in e-datasource Grid field.

Here we paste piece of our code:

       let query = new ej.Query().from("Project");

       this.dataManager = ej.DataManager({

           url: "/api/",

           adaptor: new ej.WebApiAdaptor(),

           headers: [{ 'Authorization': 'token']

       });

       this.dataManager.executeQuery(query);

We checked that executeQuery returns desired data, but it is not displayed (bound to a view). Passing local data array works fine and data is displayed properly, so we eliminated view factor.

We would like to ask you to send us some Angualar example of proper connecting Web API to dataManager and binding it as a datasource.

Sincerely,

Karol

[Venkatesh Ayothi Raman]

Hi Karol, 

Thanks for contacting Syncfusion support. 

We went through your code example that you have shared for us and found that you are using “executeQuery” API to execute the query, if so, the result of the data can be accessed only done function in executeQuery method. In that function, we can get the result which we have passed the corresponding query. Please refer to the following code example and Help documentation, 

Code example: 

<div ng-app="GridCtrl"> 

        <div ng-controller="bodyCtrl"> 

            <div ej-grid id="Grid" e-width="500px" 

                 e-datasource="data" e-pagesettings-pagesize="2" e-allowpaging="true" > 

 

                <div e-columns> 

                    <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-isprimarykey="true" e-textalign="right"></div> 

                    <div e-column e-field="Name" e-headertext="Employee Name" e-textalign="right"></div> 

                </div> 

            </div> 

        </div> 

    </div> 

 

<script> 

    angular.module("GridCtrl", ["ejangular"]) 

        .controller("bodyCtrl",  function ($scope) { 

          let dataManager = ej.DataManager({ url: "/api/Orders", adaptor: new ej.WebApiAdaptor() }); 

 

            $scope.data = []; //initially bound the empty data source 

 

            let query = new ej.Query().take(5); 

            

            dataManager.executeQuery(query).done(function (e) { 

              

               $scope.Grid.dataSource(e.result); //bind the Grid data source  

 

            }); 

            

        }); 

</script> 

 

 

Help documentation: https://help.syncfusion.com/js/datamanager/query#from 

We have also prepared a sample based on your requirement which can be download from following link, 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/WebApiEF4867253481000183326 

In that sample, we have rendered the grid control using Angular and webApi adaptor. And, we have executed the query at initial rendering like as follows, 

<div ng-app="GridCtrl"> 

        <div ng-controller="bodyCtrl"> 

            <div ej-grid id="Grid" e-width="500px" 

                  e-datasource="data" e-query="query"  > 

 

                <div e-columns> 

                    <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-isprimarykey="true" e-textalign="right"></div> 

                    <div e-column e-field="Name" e-headertext="Employee Name" e-textalign="right"></div> 

                </div> 

            </div> 

        </div> 

    </div> 

angular.module("GridCtrl", ["ejangular"]) 

        .controller("bodyCtrl",  function ($scope) { 

 

            $scope.query = new ej.Query().take(5); //initially define the query 

            $scope.data = ej.DataManager({ url: "/api/Orders", adaptor: new ej.WebApiAdaptor() });  

            

            

        }); 

 

  

If we misunderstood your query, then could you please provide more details for your requirement? 

Regards, 

Venkatesh Ayothiraman. 

[Karol Wlodarek]

Thanks so much it works great.

Regards,

Karol

[Venkatesh Ayothi Raman]

Hi Karol, 

Thanks for the feedback. 

We are happy to hear that your requirement is achieved. 

Regards, 

Venkatesh Ayothiraman.