Integration

AngularJS

The 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, but the changes made in the Toolbar widget does not reflect or get 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 to the following link location,

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

NOTE

Add the following script files as given in the following example to access the AngularJS binding. They provide JS library for AngularJS binding.

angular-min.js

ej.widget.angular.min.js

The following code example explains the way to bind the data to the Toolbar widget through AngularJS support.

Add the following code example into the corresponding ASPX page to render the ToolBar Control

  • html
  • <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
    
        <title>Essential Studio for JavaScript :AngularJS Support for Toolbar</title>
    
        <link href=" http://cdn.syncfusion.com/ 17.2.0.28/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.globalize.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/ 17.2.0.28/js/web/ej.web.all.min.js"></script>
    
       <script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
    
        <script src="http://cdn.syncfusion.com/ 17.2.0.28/js/web/ej.unobtrusive.min.js"> </script>
    
        <script src="http://cdn.syncfusion.com/ 17.2.0.28/js/ej.widget.angular.min.js"> </script>
    
    </head>
    
    <body>
    
       <div ng-app="toolApp">
    
                    <div ng-controller="ToolCtrl">
    
                        <div id="toolbar1" ej-toolbar e-datasource="dataList" e-width="210px"
    
                            e-fields-id="id" e-fields-spritecssclass="spriteCss">
    
                        </div>
    
                    </div>
    
                </div>
    
    </body>
    
    </html>
  • js
  • <script>
    
         var list = [
    
    {
    
        id: "1",
    
        spriteCss: "tools movetofolder",
    
    
    
    }, {
    
        id: "2",
    
        spriteCss: "tools categorize",
    
    
    
    }, {
    
        id: "3",
    
        spriteCss: "tools flag",
    
    
    
    }, {
    
        id: "4",
    
        spriteCss: "tools forward",
    
    
    
    }, {
    
        id: "5",
    
        spriteCss: "tools newmail",
    
    
    
    },
    
     {
    
         id: "6",
    
         spriteCss: "tools reply",
    
    
    
     },
    
     {
    
         id: "7",
    
         spriteCss: "tools done",
    
    
    
     }
    
         ];
    
    
    
         angular.module('toolApp', ['ejangular']).controller('ToolCtrl', function ($scope) {
    
             $scope.dataList = list;
    
         });
    
    </script>
  • css
  • <style type="text/css">
    
         .darktheme .cols-sample-area .e-tooltxt .tools {
    
            background-image: url('../images/toolbar/maild.png');
    
        }
    
    
    
        .cols-sample-area .e-tooltxt .tools {
    
            display: block;
    
            background-image: url('../images/toolbar/maill.png');
    
            height: 24px;
    
            width: 24px;
    
            background-repeat: no-repeat;
    
        }
    
    
    
        .e-tooltxt:hover .tools, .darktheme .cols-sample-area .e-tooltxt:hover .tools {
    
            background-image: url('../images/toolbar/mailh.png');
    
        }
    
    
    
        .tools.done {
    
            background-position: -11px -140px;
    
        }
    
    
    
        .tools.movetofolder {
    
            background-position: -12px -40px;
    
        }
    
    
    
        .tools.categorize {
    
            background-position: -14px -248px;
    
        }
    
    
    
        .tools.flag {
    
            background-position: -13px -282px;
    
        }
    
    
    
        .tools.forward {
    
            background-position: -14px -314px;
    
        }
    
    
    
        .tools.newmail {
    
            background-position: -14px -348px;
    
        }
    
    
    
        .tools.reply {
    
            background-position: -14px -388px;
    
        }
    
    </style>

    The following screenshot displays the output of the above code.

    KnockoutJS

    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, but the changes made in the 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 also reflected back and triggered within the observable collections.

    For more information about the KnockoutJS binding, refer to the following online documentation in the following link location,

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

    NOTE

    Add the following script files along with the given code to access the KnockoutJS binding. They provide JS library for KnockoutJS binding.

    knockout-min.js

    ej.widget.ko-latest.min.js

    The link for those script files are as follows:

    http://cdn.syncfusion.com/js/assets/external/knockout.min.js

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

    The following code example explains how to bind data to the Toolbar through the KnockoutJS support.

    Add the following code example into the corresponding ASPX page to render the Toolbar control

  • html
  • <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
    
        <title>Essential Studio for JavaScript :AngularJS Support for Toolbar</title>
    
        <link href=" http://cdn.syncfusion.com/17.2.0.28/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.globalize.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/17.2.0.28/js/web/ej.web.all.min.js"></script>
    
        <script src="http://cdn.syncfusion.com/js/assets/external/knockout.min.js"> </script>
    
        <script src="http://cdn.syncfusion.com/17.2.0.28/js/web/ej.unobtrusive.min.js"> </script>
    
        <script src="http://cdn.syncfusion.com/17.2.0.28/js/ej.widget.ko.min.js"> </script>
    
    </head>
    
    <body>
    
        <div class="frame">
    
            <div class="control">
    
                <div id="toolbar1" data-bind="ejToolbar: { dataSource: dataList, fields: { id: 'id', spriteCssClass: 'spriteCss', text: 'text' }, width: width }"></div>
    
            </div>
    
        </div>
    
    </body>
    
    </html>
  • js
  • <script>
    
            $(function () {
    
                var tool = [
    
            {
    
                id: "1",
    
                spriteCss: "editTools cursor",
    
                text: "Cursor",
    
            }, {
    
                id: "2",
    
                spriteCss: "editTools select",
    
                text: "Select",
    
            }, {
    
                id: "3",
    
                spriteCss: "editTools move",
    
                text: "Move",
    
            }, {
    
                id: "4",
    
                spriteCss: "editTools rectselect",
    
                text: "Rectangle Select",
    
            }, {
    
                id: "5",
    
                spriteCss: "editTools roundselect",
    
                text: "Round Select",
    
            }, {
    
                id: "6",
    
                spriteCss: "editTools brush",
    
                text: "Brushes",
    
            }, {
    
                id: "7",
    
                spriteCss: "editTools pen",
    
                text: "Pen",
    
            }, {
    
                id: "8",
    
                spriteCss: "editTools gradient",
    
                text: "Gradients",
    
            }, {
    
                id: "9",
    
                spriteCss: "editTools crop",
    
                text: "Crop",
    
            }, {
    
                id: "10",
    
                spriteCss: "editTools symbols",
    
                text: "Symbols",
    
            }
    
    
    
                ];
    
    
    
                window.viewModel = {
    
                    dataList: ko.observableArray(tool),
    
                    width: ko.observable("100%"),
    
                };
    
                ko.applyBindings(viewModel);
    
            });
    
        </script>
  • css
  • <style type="text/css" > .darktheme .cols-sample-area .e-tooltxt .editTools {
    
        background-image: url('../images/toolbar/editToolbar.png');
    
    }
    
    
    
    .cols-sample-area .e-tooltxt .editTools {
    
        display: block;
    
        background-image: url('../images/toolbar/editToolbarl.png');
    
        height: 26px;
    
        width: 26px;
    
        background-repeat: no-repeat;
    
    }
    
    
    
    .e-tooltxt:hover .editTools, .darktheme .cols-sample-area .e-tooltxt:hover .editTools {
    
        background-image: url('../images/toolbar/editToolbarh.png');
    
    }
    
    
    
    .editTools.cursor {
    
        background-position: -0px -0px;
    
    }
    
    
    
    .editTools.select {
    
        background-position: -0px -36px;
    
    }
    
    
    
    .editTools.move {
    
        background-position: -0px -72px;
    
    }
    
    
    
    .editTools.rectselect {
    
        background-position: -0px -108px;
    
    }
    
    
    
    .editTools.roundselect {
    
        background-position: -0px -144px;
    
    }
    
    
    
    .editTools.brush {
    
        background-position: -0px -180px;
    
    }
    
    
    
    .editTools.pen {
    
        background-position: -0px -216px;
    
    }
    
    
    
    .editTools.gradient {
    
        background-position: -0px -252px;
    
    }
    
    
    
    .editTools.crop {
    
        background-position: -0px -288px;
    
    }
    
    
    
    .editTools.symbols {
    
        background-position: -0px -324px;
    
    }
    
    
    
    .frame {
    
        height: 280px;
    
        width: 90%;
    
        border-radius: none;
    
        margin-left: 80px;
    
        margin-top: 40px;
    
        padding: 0;
    
    }
    
    
    
    .control {
    
        margin: 120px 120px 0;
    
    }
    
    
    
    </style >

    The following screenshot displays the output of the above code.