Wijmo UI for the Web
Integrate Breeze.js
Wijmo User Guide > Data > Data How To > Integrate Breeze.js
Show All
Hide All

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.

  1. 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>
  2. 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.11.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.0/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.20183.140.min.css" rel="stylesheet" type="text/css" />
  
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.90.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/interop/wijmo.data.breeze.3.20161.90.js" type="text/javascript"></script>
 
<!--Knockout JS Library-->
<!-- Both of the links below can work -->
<script src="http://cdn.wijmo.com/wijmo/external/knockout-2.2.0.js" type="text/javascript"></script> 
<!--<script src="http://cdn.wijmo.com/amd-js/3.20161.90/knockout-3.1.0.js" type="text/javascript"></script>--> 

<!--Wijmo Knockout Integration Library-->
<script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20161.90.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>
  3. 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.
    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>
  4. 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

    Grid Markup
    Copy Code 
    <h2>Data - BreezeJs integration</h2>
<table>
    <tr>
        <th>Filter</th>
        <td>
            <button data-bind="click:filterBeverages, button: {}" type="button">Beverages</button>
            <button data-bind="click:filterCondiments, button: {}" type="button">Condiments</button>
        </td>
    </tr>
    <tr>
        <th>Sort By</th>
        <td>
            <button data-bind="click:sortId, button: {}" type="button">ID</button>
            <button data-bind="click:sortPrice, button: {}" type="button">Price, Name</button>
        </td>
    </tr>
    <tr>
        <th>Pages</th>
        <td>
            <button data-bind="click:clearPaging, button: {}" type="button">Clear Paging</button>
            <button data-bind="click:setPaging, button: {}" type="button">Page Size = 10</button>
            <button data-bind="click:prevPage, button: {}" type="button">Previous</button>
            <button data-bind="click:nextPage, button: {}" type="button">Next</button>
        </td>
    </tr>
</table>
   
<h3>Products</h3>
   
<table id="demo-grid" data-bind="wijgrid: { 
    data: products, 
    allowEditing: true, 
    allowSorting: true, 
    showFilter: true, 
    columns: [
        { headerText: 'ID', dataKey: 'Product_ID' },
        { headerText: 'Product name', dataKey: 'Product_Name' },
        { headerText: 'Category ID', dataKey: 'Category_ID' },
        { headerText: 'Price', dataKey: 'Unit_Price', dataType: 'number' }
    ]}" >
</table>
  5. Save your HTML file and open it in a browser. The grid appears like the live widget below.
See Also
Data How To
Breeze.js
BreezeDataView

Reference

wijmo.data Namespace
BreezeDataView Class

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page