CODEWITHSUNDEEP
javascriptjqueryangularkendo-uikendo-ui-angular2
Amit
Amit

Reputation: 1491

Bind Click Event to Kendo ToolBar

I am trying to bind click event to buttons I have in kendo Tool bar. I am creating button using template. I am using Kendo Jquery with angular. Any help will be highly appreciated.

So far I have tried this using Kendo Jquery Documentation:

<!DOCTYPE html>
<html>

<head>
    <base href="https://demos.telerik.com/kendo-ui/toolbar/index">
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>

</head>

<body>
    <div id="example">
        <div class="demo-section k-content wide">
            <div id="toolbar"></div>
        </div>
        <script>
            $(document).ready(function () {
                $("#toolbar").kendoToolBar({
                    items: [
                        {
                            template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-save'></span>Save</a>"
                        },
                        {
                            template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon  k-i-arrows-swap'></span>Top/Bottom</a>"
                        },
                        {
                            template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-pencil'></span>Edit</a>"
                        },
                        {
                            template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-calendar'></span>Schedule</a>",
                            click: onButtonClick()
                        },

                        {
                            type: "splitButton",
                            text: "Download",
                            menuButtons: [{
                                    text: "PDF",
                                    icon: "k-i-pdf"
                                },
                                {
                                    text: "EXCEL",
                                    icon: "k-i-excel"
                                }
                            ]
                        },

                        {
                            type: "button",
                            text: "Action",
                            overflow: "always"
                        },
                        {
                            type: "button",
                            text: "Another Action",
                            overflow: "always"
                        },
                        {
                            type: "button",
                            text: "Something else here",
                            overflow: "always"
                        }
                    ]
                });

                $("#dropdown").kendoDropDownList({
                    optionLabel: "Paragraph",
                    dataTextField: "text",
                    dataValueField: "value",
                    dataSource: [{
                            text: "Heading 1",
                            value: 1
                        },
                        {
                            text: "Heading 2",
                            value: 2
                        },
                        {
                            text: "Heading 3",
                            value: 3
                        },
                        {
                            text: "Title",
                            value: 4
                        },
                        {
                            text: "Subtitle",
                            value: 5
                        }
                    ]
                });
            });

            function onButtonClick() {
                alert('clicked')
            }
        </script>
    </div>
</body>

</html>

Dojo for the same: https://dojo.telerik.com/@amitdwivedi/uDOFeWev

Upvotes: 7

Views: 2857

Answers (1)

nevada_scout
nevada_scout

Reputation: 983

According to the Telerik Docs for the toolbar Click function, the click event handler is only applicable for toolbar items of type button or splitButton. But, items with a template do not have a type.

So, you need to either use basic buttons instead of templates (then you can use the Telerik click handler), or put the click handler in the template itself like this:

$(document).ready(function() {
  $("#toolbar").kendoToolBar({
    items: [
      {
        template: "<a href='' onclick='onButtonClick()' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-save'></span>Save</a>"
        //                    ^^^^^^^^^^^^^^^^^^^^^^^^^
      }
    ]
  });
});

function onButtonClick(){
  alert('clicked')
}

Example Dojo: https://dojo.telerik.com/UniqiHuF/4

Upvotes: 6

Related Questions