Integrate Breeze.js

You can use the Data module to integrate Breeze.js into your application. Using the BreezeDataView Class, set up a Breeze DataService and bind the wijmo.data module to it. In this sample, we use a Breeze.js EntityQuery to fetch the data.

In Notepad, create a new HTML page, add the following code and save the document with an .html extension.

Drop down and copy markup to paste in Notepad

Paste in Notepad.	Copy Code
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Add links to the dependencies, KnockOut, and Breeze to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.

Drop down and copy references to paste inside the head tags

References	Copy Code
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20133.19.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20133.19.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20133.19.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/wijmo.data.breeze.3.20133.19.js" type="text/javascript"></script> <!--Knockout JS Library--> <script src="http://cdn.wijmo.com/wijmo/external/knockout-2.2.0.js" type="text/javascript"></script> <!--Wijmo Knockout Integration Library--> <script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20133.19.js" type="text/javascript"></script> <!--Breeze.js References --> <script type="text/javascript" src="http://todo.breezejs.com/Scripts/q.js"></script> <script type="text/javascript" src="http://todo.breezejs.com/Scripts/breeze.debug.js"></script>

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which does the following:

Creates a ViewModel with the following properties:
- Connects to a data source using the Breeze DataService.
- Sets up the MetadataStore, adding one EntityType for the Product table, and four properties.
- Sets up an EntityManager for the DataService and MetadataStore.
- Sets the number of records per page to 10 with the pageSize option.
- Sets the inlineCount option to true.
Refreshes the data.
Sets up the following functions to use in button click events:
- Filters by Category ID.
- Sorts on Product ID or Price.
- Sets the number of products per page to 10, or clears paging to show all (0).
- Goes to the previous or next page.
- Adds or deletes a product and commits the change to the data source.
- Doubles the price of the selected item.
Binds the ViewModel to the container using Knockout.
Loads, or if unavailable, creates a new Session ID.

Drop down and copy code

ViewModel Script	Copy Code
<script id="scriptInit" type="text/javascript"> $.support.cors = true; var viewModel; function ViewModel() { var dataService = new breeze.DataService({ serviceName: "http://demo.componentone.com/aspnet/NorthwindAPI/api/read", hasServerMetadata: false }); var ms = new breeze.MetadataStore(); var productType = new breeze.EntityType({ shortName: "Product" }); productType.addProperty(new breeze.DataProperty({ name: "Product_ID", isPartOfKey: true })); productType.addProperty(new breeze.DataProperty({ name: "Product_Name" })); productType.addProperty(new breeze.DataProperty({ name: "Category_ID" })); productType.addProperty(new breeze.DataProperty({ name: "Unit_Price" })); ms.addEntityType(productType); this.manager = new breeze.EntityManager({ dataService: dataService, metadataStore: ms }); var productView = new wijmo.data.BreezeDataView(new breeze.EntityQuery("Product"), this.manager, { pageSize: 10, inlineCount: false }); productView.refresh(); this.products = productView; this.filterBeverages = function () {productView.filter({ Category_ID: 1 });}; this.filterCondiments = function () {productView.filter({ Category_ID: 2 });}; this.sortId = function () {productView.sort("Product_ID")}; this.sortPrice = function () {productView.sort("Unit_Price desc, Product_Name");}; this.clearPaging = function () {productView.pageSize(0);}; this.setPaging = function () {productView.pageSize(10);}; this.prevPage = function () {productView.prevPage();}; this.nextPage = function () {productView.nextPage();}; this.add = function () {productView.add({ Product_ID: 100, Product_Name: "Tomato", Category_ID: 1, Unit_Price: 5 }); productView.commitEdit(); }; this.deleteCurrent = function () {productView.remove();}; this.doublePrice = function () { productView.editItem(); productView.currentEditItem().Unit_Price *= 2; productView.commitEdit(); }; this.save = function () {this.manager.saveChanges();}; } $(document).ready(function () { viewModel = new ViewModel(); ko.applyBindings(viewModel, $(".container").get(0)); }); </script>

ViewModel Script

Copy Code

<script id="scriptInit" type="text/javascript">
    $.support.cors = true;
    var viewModel;
   
    function ViewModel() {
        var dataService = new breeze.DataService({
            serviceName: "http://demo.componentone.com/aspnet/NorthwindAPI/api/read",
            hasServerMetadata: false
        });
        var ms = new breeze.MetadataStore();
        var productType = new breeze.EntityType({ shortName: "Product" });
        productType.addProperty(new breeze.DataProperty({ name: "Product_ID", isPartOfKey: true }));
        productType.addProperty(new breeze.DataProperty({ name: "Product_Name" }));
        productType.addProperty(new breeze.DataProperty({ name: "Category_ID" }));
        productType.addProperty(new breeze.DataProperty({ name: "Unit_Price" }));
        ms.addEntityType(productType);
   
        this.manager = new breeze.EntityManager({
            dataService: dataService,
            metadataStore: ms
        });
   
        var productView = new wijmo.data.BreezeDataView(new breeze.EntityQuery("Product"), this.manager, {
            pageSize: 10,
            inlineCount: false
        });
        productView.refresh();
   
        this.products = productView;
   
        this.filterBeverages = function () {productView.filter({ Category_ID: 1 });};
        this.filterCondiments = function () {productView.filter({ Category_ID: 2 });};
        this.sortId = function () {productView.sort("Product_ID")};
        this.sortPrice = function () {productView.sort("Unit_Price desc, Product_Name");};
        this.clearPaging = function () {productView.pageSize(0);};
        this.setPaging = function () {productView.pageSize(10);};
        this.prevPage = function () {productView.prevPage();};
        this.nextPage = function () {productView.nextPage();};
        this.add = function () {productView.add({
                Product_ID: 100,
                Product_Name: "Tomato",
                Category_ID: 1,
                Unit_Price: 5
            });
            productView.commitEdit();
        };
        this.deleteCurrent = function () {productView.remove();};
        this.doublePrice = function () {
            productView.editItem();
            productView.currentEditItem().Unit_Price *= 2;
            productView.commitEdit();
        };
        this.save = function () {this.manager.saveChanges();};
    }
   
    $(document).ready(function () {
        viewModel = new ViewModel();
        ko.applyBindings(viewModel, $(".container").get(0));
    });  
</script>

In the <body> section of your HTML file, replace the markup with this, which does the following:

Creates a table with buttons and binds the button click events to the functions in the script.
Creates a second table with a Grid widget, and binds the data to it.

Drop down and copy code

Save your HTML file and open it in a browser. The grid appears like the live widget below.

See Also

Concepts

Reference