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.

How to set Angular ListBox dataSource property using WebAPI and ej.DataManager?

Thread ID:

Created:

Updated:

Platform:

Replies:

132595 Sep 11,2017 07:37 AM Sep 26,2017 10:47 AM Angular 9
loading
Tags: ejListBox
Ivana Stefanoska
Asked On September 11, 2017 07:37 AM

Hi,

I'm using ej-listbox component in Angular and I retrieve data from ASP.NET Web API by using ej.DataManager.

Reponse that I receive back form my api method is in json format and has the following properties:


export class DataResponse<T> {

    data: T; // array of objects

    errorMessage: string;

    responseCode: boolean;

}


I'm having problem with binding response data property to list box items. How can I bind Data property of Response Object to dataSource property of ej-listbox?

Here is the code for ej-list box options:


this.datamanager = new ej.DataManager({

url: this.configuration.api + "api/users/multiplePaged", // web api url

crossDomain: true

});


this.listBoxOptions = {

width: "100%",            

showCheckbox: true,

allowDrag: false,

allowDrop: false,

allowMultiSelection: true,

template: '<div style="display:inline;"><img class="image" src="../../../../images/userIcon.png" alt="member"/><div class="ename"> ${name} </div><div                          class="desig"> ${userName} </div></div>',

dataSource: this.datamanager,

fields: { text: "name", value: "name", id: "id" },

allowVirtualScrolling: true,

virtualScrollMode: "continuous",

objectRef: this.refType,

itemRequestCount: 10,

}

I would be very grateful if you can help me.
Thank you in advance!

Regards,

Ivana




Arun Palaniyandi [Syncfusion]
Replied On September 12, 2017 01:22 PM

Hi Ivana Stefanoska,  
  
Thanks for contacting Syncfusion support.  
 
We have analyzed your shared code and suspect that issue might be due to missing adaptor. When using web API or URL for data manager then you need to specify the adaptor type for the Datamanager. Hence, if the adaptor type is not specified, the Datamanager will not correctly bind to the datasource.Please find the below code snippet 


  this.dataManger = ej.DataManager({ 
url: "http://localhost:2088/api", // web api url 
crossDomain: true,  
adaptor: new ej.WebApiAdaptor()  }); 




We have also prepared a sample for your reference below. 
 
 
If still you still face any difficulties, kindly let us know. We will be happy to help you.  
  
Regards,  
Arun P.  


Ivana Stefanoska
Replied On September 13, 2017 04:22 AM

Hi Arun,

Thank you for your response, but it wasn't helpful in my case.

Instead of :
      new PageResult(result, null, count); 

as it is in your ServerOperations sln, api/orders method, I return custom object of type DataResponse.

export class DataResponse {

    data: T; // array of objects

    errorMessage: string;

    responseCode: boolean;

}

My back-end side code, api method:

public async Task Get()

{
                  . . . . . .

                return Ok(dataResponse);  // dataResponse is object of type DataResponse

}

How can I then use data property of DataRespoonse which in my case is List of objects as dataSource of ej-listbox?

Thank you,

Ivana



Arun Palaniyandi [Syncfusion]
Replied On September 14, 2017 12:52 PM

Hi Ivana Stefanoska,    
    
Thanks for your update.    
  
We have tried to bind the datasource as like your Data in the service and we can able to reproduce your issue. Hence in order to bind the returned list of objects as datasource to ListBox, we suggest you to use our customAdaptor to modify the returned datasource value. This customAdaptor is used develop our customized changes and also you override functionality of the existing adaptors. Please use the  below code snippets. 
  
  
<script type="text/javascript"> 
  
                var customAdaptor = new ej.WebApiAdaptor().extend({ 
                    processResponse: function (data, ds, query, xhr, request, changes) { 
                        result = data.Data; 
                        return result; 
                    }, 
                }); 
                var dataManager = ej.DataManager({ 
                    url: "http://localhost:63127/api/Projects/1", 
                    crossDomain: true, 
                    adaptor: new customAdaptor() 
                }); 
  
</script> 
  
  
   
  
  
  
  
We have also prepared a sample for your reference below.  
  
          
Regards,         
Arun P.     


Ivana Stefanoska
Replied On September 19, 2017 03:25 AM

Hi Arun,

Thanks for your response, but there is still an issue.

After I updated my code with your proposed solution, the following error is displayed:
ERROR TypeError: this.adaptor.processQuery is not a function.

Please help me.

Regards,
Ivana


Arun Palaniyandi [Syncfusion]
Replied On September 20, 2017 06:47 AM

Hi Ivana Stefanoska,       
       
Thanks for your update.     
  
We suspect that you have missed referring the process query in the custom adaptor. So, we suggest you to include the process query in your customAdaptor like below.    
  
  
<script type="text/javascript">  
   
   var customAdaptor = new ej.WebApiAdaptor().extend({ 
            processResponse: function (data, ds, query, xhr, request, changes) { 
                result = data.Data; 
                return result; 
            }, 
 
            processQuery: ej.UrlAdaptor.prototype.processQuery // need to give the process query as Url adaptor because the webapi is expanded from the url adptor only. 
        }); 
        var dataManager = ej.DataManager({ 
            url: "http://localhost:63127/api/Projects/1", // your service link. 
            crossDomain: true, 
            adaptor: new customAdaptor() 
        }); 
   
</script>  


 
 
Please try out the above shared suggestion and if you still have any difficulties, share your service link or application (if possible), so that we would check and update you a prompt solution.   


 
 
Please refer the below given UG Link for more reference.   
  


 
 
Regards,   
Arun P   


Ivana Stefanoska
Replied On September 22, 2017 09:02 AM

Hi Arun,

Your shared suggestion doesn't work. Error is the same: this.adaptor.processQuery is not a function
Here's my code in TypeScript

 var customAdaptor = new ej.WebApiAdaptor().extend({
            processResponse: function (data, ds, query, xhr, request, changes) {
                return data.Data;
            },

            processQuery: ej.UrlAdaptor.prototype.processQuery // need to give the process query as Url adaptor because the webapi is expanded from the url adptor only. 
        });
 

        this.datamanager = new ej.DataManager({
            url:this.configuration.api + "api/users/multiplePaged",
            crossDomain: true,
            adaptor: customAdaptor
        });

        this.query =  new ej.Query().from('');

        this.listBoxOptions = {
            width: "100%",            
            showCheckbox: true,
            allowDrag: false,
            allowDrop: false,
            allowMultiSelection: true,
            template: '<div style="display:inline;"><img class="image" src="../../../../images/userIcon.png" alt="member"/><div class="ename"> ${name} </div><div class="desig"> ${userName} </div></div>',
            dataSource:this.datamanager,
            fields: { text: "name", value: "name", id: "id" },
            allowVirtualScrolling: true,
            virtualScrollMode: "continuous",
            objectRef: this.refType,
            itemRequestCount: 10,
            query: this.query,
            loadDataOnInit: true
        }

In Network tab of my Browser, there isn't any api call to the server when I use your suggested solution.

Please review the syntax i'm using in my Typescript code, maybe there is some mistake in my code or in the suggested solution.

Just to point out, my version of syncfusion-javascript is 15.3.26, which is the latest as far as I know.

Ivana



      

Arun Palaniyandi [Syncfusion]
Replied On September 25, 2017 08:04 AM

Hi Ivana Stefanoska,        
        
Thanks for your update. 
 
We have checked your shared codes and there is no problem with the codes and the syntax. We suspect that this issue is occurring, while making the request to the webapi service. Hence in order to check this issue from our side, we request you to share your service link or application (if possible) as asked earlier. We also would like to know whether the following issue is reproduced in our shared demo sample or not ?. You can also use this sample to reproduce your mentioned issue. Otherwise, you can also use your hosted service to reproduce this issue in a separate application and then share this application to us. 
 
These information would be very much helpful for us to isolate the issue and then provide a prompt solution to you from our side. 
     
Regards, 
Arun P. 
 


Ivana Stefanoska
Replied On September 25, 2017 09:24 AM

Hi,

It's not possible to share my service api link.
How would you explain this from my previous answer:

"In tht Network tab of my Browser, there isn't any api call to the server."

Thanks
Ivana,


Arun Palaniyandi [Syncfusion]
Replied On September 26, 2017 10:47 AM

Hi Ivana Stefanoska,         
Thanks for your update. 
In the previous update, we suspect that this issue is reproduced while making the request in the webapi service. If you unable to send the data, then kindly create a dummy sample at your side to replicate this issue and then share to us. We unable to proceed further on this issue without the details. 
And also told earlier, we request you to check our shared samples and revert us with the mentioned issue.  
Regards, 
Arun P . 


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.

;