DevExtreme jQuery/JS - OData Service
To bind the List to data provided by an OData service, use the ODataStore.
JavaScript
CSS
- $(function() {
- $("#listContainer").dxList({
- dataSource: new DevExpress.data.ODataStore({
- url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
- key: "Product_ID"
- }),
- itemTemplate: function(data, _, element) {
- element.append(
- $("<img />").attr("src", "data:image/jpg;base64," + data.Product_Primary_Image)
- .height(30).width(30)
- .addClass("item-image"),
- $("<p>").text(data.Product_Name)
- .addClass("item-text")
- )
- }
- });
- });
- .item-image {
- vertical-align: middle;
- }
- .item-text {
- display: inline-block;
- vertical-align: middle;
- margin: 0px 0px 0px 10px;
- }
Data kept in the ODataStore can be processed in the DataSource. For example, the DataSource can group or filter data.
JavaScript
- $(function() {
- $("#listContainer").dxList({
- dataSource: new DevExpress.data.DataSource({
- store: {
- type: "odata",
- url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
- key: "Product_ID"
- },
- group: "Product_Category",
- filter: ["Product_Available", "=", true]
- }),
- grouped: true,
- itemTemplate: function(data, _, element) {
- // The template is omitted for brevity
- // See the previous code example
- }
- });
- });
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.