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.
Syncfusion Feedback

Problem with connecting DataManager to Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

130818 Jun 5,2017 12:49 PM UTC Jun 9,2017 04:25 AM UTC AngularJS 3
loading
Tags: ejGrid
Karol Wlodarek
Asked On June 5, 2017 12:49 PM UTC

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 [Syncfusion]
Replied On June 6, 2017 10:59 AM UTC

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> 
 
 


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


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
Replied On June 8, 2017 08:58 AM UTC

Thanks so much it works great.

Regards,
Karol

Venkatesh Ayothi Raman [Syncfusion]
Replied On June 9, 2017 04:25 AM UTC

Hi Karol, 

Thanks for the feedback. 

We are 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.

Warning Icon 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.Close Icon

;