Data binding in JQuery Toolbar widget

Toolbar provides you a flexible approach for binding data from various data sources. There are various properties in Toolbar for Data Binding.

Data fields and configuration

The following sub-properties provides a way to bind either the local/remote data to the Toolbar control.

Property Table of JavaScript Toolbar control

Property Syntax Description</b>
[dataSource](https://help.syncfusion.com/api/js/ejtoolbar#members:datasource) dataSource: window.countriesField It specifies the data source of the Toolbar. The data source contains the list of data for generating the Toolbar items. By default, its value is null and its data type is object.
field fields: {text: "name", value: "key" } It specifies the mapping fields for the data items of the Toolbar. By default, its value is null and its data type is object.
[query](https://help.syncfusion.com/api/js/ejtoolbar#members:query) query: ej.Query().from("Suppliers").select("ContactName"); It specifies the query to retrieve the data from online server. By default, its value is null and its data type is object.
[id](https://help.syncfusion.com/api/js/ejtoolbar#members:fields-id) id It specifies the id of the tag and its default value is null and data type is string.
[text](https://help.syncfusion.com/api/js/ejtoolbar#members:fields-text) text It specifies the text content of the tag and its default value is null and data type is string.
[imageUrl](https://help.syncfusion.com/api/js/ejtoolbar#members:fields-imageurl) imageUrl This property defines the imageURL for the image location. While setting images, the folder name in which the images are stored should be set to imageUrl property. The value set to this property should be string type.
[imageAttributes](https://help.syncfusion.com/api/js/ejtoolbar#members:fields-imageattributes) imageAttributes This property defines style for the image. While setting an image, styles can be applied such as height, width by using this property. The value set to this property should be string type.
[spriteCssClass](https://help.syncfusion.com/api/js/ejtoolbar#members:fields-spritecssclass) spriteCssClass This property sets the Sprite CSS for the image tag in Toolbar. The value set to this property should be string type.
[htmlAttributes](https://help.syncfusion.com/api/js/ejtoolbar#members:fields-htmlattributes) htmlAttributes This property sets the HTML attribute for the Toolbar item. The value set to this property should be object type. It can be any HTML attribute such as id, class, style.
[tooltipText](https://help.syncfusion.com/api/js/ejtoolbar#members:fields-tooltiptext) tooltipText This property sets the text value for Toolbar item while mouse over in Toolbar. The value set to this property should be string type.

Local data

Toolbar provides you an extensive data binding support to generate Toolbar items, that the values can be mapped to the ToolBar fields, namely key and text.

And also you can add image, image styles, sprite CSS class, query and HTML attributes options with data binding fields. The following code explains the details about the data binding with Toolbar.

  • html
  • <div class="cols-sample-area">
            <div id="toolbarJson"></div>
        </div>
  • javascript
  • $(function () {
            BrowserItems = [{
                employeeId: "1",
                spriteCss: "Browsers ie-browser",
                title: "Internet Explorer",
    
            }, {
                employeeId: "2",
                spriteCss: "Browsers chrome-browser",
                title: "Chrome",
            }, {
                employeeId: "3",
                spriteCss: "Browsers firefox-browser",
                title: "Firefox",
    
            }, {
                employeeId: "4",
                spriteCss: "Browsers bitty-browser",
                title: "Bitty",
    
            }, {
                employeeId: "5",
                spriteCss: "Browsers opera-browser",
                title: "Opera",
    
            }
            ];
            $("#toolbarJson").ejToolbar({
                dataSource: BrowserItems,
                fields: { id: "employeeId", spriteCssClass: "spriteCss", tooltipText:"title" },
                orientation: ej.Orientation.Horizontal,
                width: "100%"
            });
        });
  • css
  • <style type="text/css" class="cssStyles">
        .darktheme .cols-sample-area .e-tooltxt .Browsers {
            background-image: url('../content/images/toolbar/browserd.png');
        }
    
        .cols-sample-area .e-tooltxt .Browsers {
            display: block;
            background-image: url('../content/images/toolbar/browserl.png');
            height: 32px;
            width: 32px;
            background-repeat: no-repeat;
        }
    
        .e-tooltxt:hover .Browsers, .darktheme .cols-sample-area .e-tooltxt:hover .Browsers {
            background-image: url('../content/images/toolbar/browserh.png');
        }
    
        .Browsers.ie-browser {
            background-position: -84px 0px;
        }
    
        .Browsers.chrome-browser {
            background-position: -42px 0px;
        }
    
        .Browsers.firefox-browser {
            background-position: 0px 0px;
        }
    
        .Browsers.bitty-browser {
            background-position: -126px 0px;
        }
    
        .Browsers.opera-browser {
            background-position: -168px 0px;
        }
        .material .frame{
            width: 360px;
        }
    </style>

    Data-binding_img1

    Remote data

    You can bind the data for the Toolbar items from remote. That is, you can access the data from any other server that is located as remote web service. It uses DataManager to retrieve data and you can create DataManager with its URL. To create DataManager, define ej.DataManager() to a variable. Then provide online link to url property. Assign this variable to Toolbar dataSource.

    To bind Remote data to Toolbar and query is used to get the data, use the following code example.

  • html
  • <div id="toolbar"></div>
  • javascript
  • $(function () {
            // DataManager creation
            var dataManger = ej.DataManager({
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
            });
            // Query creation
            var query = ej.Query()
                 .from("Orders").take(6);
    
            $("#toolbar").ejToolbar({
                dataSource: dataManger,
                fields: { text: "CustomerID" },
                query: query,
                orientation: "horizontal",
                width: "340px"
            });
        });

    Data-binding_img2

    KnockoutJS binding

    KnockoutJS support allows you to bind the HTML elements against any of the available data models.

    Two types of KnockoutJS binding is supported,

    • One-way binding
    • Two-way binding

    One-way binding refers to the process of applying observable values to all the available properties of the Toolbar, where the changes made in Toolbar widget is not reflected and triggered in turn to the observable collection. This kind of binding applies to all the properties of the Toolbar.

    Two-way binding supports both the processes – it applies the observable values to the Toolbar properties as well as the changes made in the Toolbar widget is reflected back and triggered within the observable collections.

    For more information about the KnockoutJS binding, refer the following link location,

    https://help.syncfusion.com/js/knockoutjs

    NOTE

    Add the following script files along with the specified code to access KnockoutJS binding. It contains JS library for KnockoutJS binding.

    • Knockout.min.js
    • ej.widget.ko.min.js

    The link for the script file is as follows:

    http://cdn.syncfusion.com/18.3.0.35/js/common/ej.widget.ko.min.js

    The following code example depicts you the way to bind data to the Toolbar through the KnockoutJS support.

  • html
  • <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
          <link href="http://cdn.syncfusion.com/18.3.0.35/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
          <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
          <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"> </script>
          <script src="http://cdn.syncfusion.com/js/assets/external/knockout.min.js"></script>
          <script src="http://cdn.syncfusion.com/18.3.0.35/js/web/ej.web.all.min.js"> </script>
          <script src="http://cdn.syncfusion.com/18.3.0.35/js/common/ej.widget.ko.min.js"></script>
       </head>
       <body>
          <div class="cols-sample-area">
             <div id="toolbar" data-bind="ejToolbar:{ dataSource:dataList, fields:{ id:'id', spriteCssClass:'spriteCss', text:'text'}, width:width }"></div>
          </div>
       </body>
    </html>

    AngularJS binding

    Toolbar is availed with two types of AngularJS support namely,

    • One way binding
    • Two way binding

    One-way binding refers to the process of applying scope values to all the available properties of the Toolbar, where the changes made in Toolbar widget is not reflected or triggered in turn to the scope collection. This kind of binding applies to all the properties of the Toolbar.

    Two-way binding supports both the processes – it applies the scope values to the Toolbar properties as well as the changes made in the Toolbar widget is also reflected back and triggered within the AngularJS scope change function.

    To know more detail about the AngularJS binding, refer the following link location,

    https://help.syncfusion.com/js/angularjs

    Add the following script files as given in the below example to access KnockoutJS binding. It contains JS library for AngularJS binding.

    • Angular.min.js
    • ej.widget.angular.min.js

    The following code example depicts you the way to bind data to the Toolbar widget through AngularJS support,

  • html
  • <!DOCTYPE html>
    <html lang="en" ng-app="toolApp">
       <head>
          <title>Essential Studio for JavaScript :AngularJS Support for Toolbar</title>
          <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
          <link href="http://cdn.syncfusion.com/18.3.0.35/js/web/flat-azure/ej.web.all.min.css"rel="stylesheet"/>
          <!--scripts-->
          <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
          <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"> </script>
          <script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
          <script src="http://cdn.syncfusion.com/18.3.0.35/js/web/ej.web.all.min.js"></script>
          <script src="http://cdn.syncfusion.com/18.3.0.35/js/web/ej.unobtrusive.min.js"></script>
          <script src="http://cdn.syncfusion.com/18.3.0.35/js/ej.widget.angular.min.js"> </script>
       </head>
       <body ng-controller="ToolCtrl">
          <div class="cols-sample-area">
             <div id="toolbar" ej-toolbar e-datasource="dataList" e-width="230px"
                e-fields-id="id" e-fields-spritecssclass="spriteCss">
             </div>
          </div>
       </body>
    </html>
  • javascript
  • var list = [{
            id: "1",
            spriteCss: "ToolbarItems LeftAlign_tool",
    
        }, {
            id: "2",
            spriteCss: "ToolbarItems CenterAlign_tool",
        }, {
            id: "3",
            spriteCss: "ToolbarItems RightAlign_tool",
        }, {
            id: "4",
            spriteCss: "ToolbarItems Justify_tool",
    
        }, {
            id: "5",
            spriteCss: "ToolbarItems Bold_tool",
        }, {
            id: "6",
            spriteCss: "ToolbarItems Italic_tool",
        }, {
            id: "7",
            spriteCss: "ToolbarItems StrikeThrough_tool",
        }, {
            id: "8",
            spriteCss: "ToolbarItems Underline_tool",
        }
        ];
    
        angular.module('toolApp', ['ejangular']).controller('ToolCtrl', function ($scope) {
            $scope.dataList = list;
        });
  • css
  • <style type="text/css" class="cssStyles">
        /*controls*/
        .darktheme .cols-sample-area .e-tooltxt .ToolbarItems {
            background-image: url('../images/toolbar/ui-icons-metro.png');
        }
    
        .cols-sample-area .e-tooltxt .ToolbarItems {
            display: block;
            background-image: url('../images/toolbar/ui-icons-dark.png');
            height: 22px;
            width: 22px;
        }
    
        .e-tooltxt:hover .ToolbarItems, .darktheme .cols-sample-area .e-tooltxt:hover .ToolbarItems {
            background-image: url('../images/toolbar/ui-icons-light.png');
        }
    
        .ToolbarItems.LeftAlign_tool {
            background-position: -26px -39px;
        }
    
        .ToolbarItems.CenterAlign_tool {
            background-position: -55px -39px;
        }
    
        .ToolbarItems.RightAlign_tool {
            background-position: -89px -39px;
        }
    
        .ToolbarItems.Justify_tool {
            background-position: -123px -39px;
        }
    
        .ToolbarItems.Bold_tool {
            background-position: -159px -39px;
        }
    
        .ToolbarItems.Italic_tool {
            background-position: -196px -39px;
        }
    
        .ToolbarItems.StrikeThrough_tool {
            background-position: -55px -70px;
        }
    
        .ToolbarItems.Underline_tool {
            background-position: -23px -68px;
        }
    </style>

    Data-binding_img6