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.
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
|
this.dataManger = ej.DataManager({
crossDomain: true,
adaptor: new ej.WebApiAdaptor() });
|
Hi Arun,
Thank you for your response, but it wasn't helpful in my case.
Instead of :
new PageResult
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
{
. . . . . .
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
|
<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({
crossDomain: true,
adaptor: new customAdaptor()
});
</script>
|
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
|
<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({
crossDomain: true,
adaptor: new customAdaptor()
});
</script> |
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,
