Data binding

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 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 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 id It specifies the id of the tag and its default value is null and data type is string.
text text It specifies the text content of the tag and its default value is null and data type is string.
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 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 spriteCssClass This property sets the Sprite CSS for the image tag in Toolbar. The value set to this property should be string type.
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 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="toolbar"></div>
        </div>
  • css
  • <style type="text/css" class="cssStyles">
        .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;
        }
    
        .html {
            background-color: yellowgreen;
        }
    </style>

    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, use the following code example.

  • html
  • <div id="toolbar"></div>
  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module ToolbarComponent {
        $(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);
    
            var sample = new ej.Toolbar($("#toolbar"),{
                dataSource: dataManger,
                fields: { text: "CustomerID" },
                query: query,
                orientation: "horizontal",
                width: "340px"
            });
        });
    }