What is the best way to dynamically incorporate buttons into the Kendo UI toolbar?

Having an issue with the Kendo UI toolbar where all buttons are loaded during initialization, but there are requirements to add buttons dynamically. Here's how buttons are loaded in a page controller:

...
$scope.toolbarButtons = [{
    type: 'button',
    text: 'Button 1',     
    click: 'clickButton1'
}, {
    type: 'toggleButton',
    text: 'Button 2'
}, {
    type: 'button',
    text: 'Button 3'
}
...

And here is how we add the toolbar and pass the buttons to the directive :

<toolbar buttons="toolbarButtons"></toolbar>

return {
    scope: false,
    restrict: 'E',
    template: '<div kendo-toolbar="toolbar"></div>',
    controller: 'ToolbarController',
    link: function ($scope, element, attr) {

        $scope.buttons = $scope[attr.buttons];

        // Code to manage the toolbar
        ...
    };

Attempting to change the scope binding of the buttons array using:

scope: {
    buttons: '='
}

However, when adding a button in the toolbarButtons array, the button is not displayed.

Answer №1

One way to add a button in Kendo UI is by using the add method of the toolbar. Here's an example:

var toolbar = $("#toolbar").data("kendoToolBar");
toolbar.add ({ type: "button", text: "Button N", id: "buttonN" });

Check out this demo:

$(document).ready(function() {
  $("#toolbar").kendoToolBar({
    items: [
      {
        type: 'button',
        text: 'Button 1'
      },
      {
        type: 'button',
        text: 'Button 2'
      },
      {
        type: 'button',
        text: 'Button 3'
      }
    ]
  });

  var n = 4;
  $("#add").on("click", function() {
    var toolbar = $("#toolbar").data("kendoToolBar");
    toolbar.add ({ type: "button", text: "Button " + n, id: "button" + n });
    n++;
  });
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.default.css" />

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

<button class="k-button" id="add">Add Button</button>
<div id="toolbar"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Send the output of MPDF back to the browser by utilizing JSON in combination with ExtJS

I am currently using mpdf to generate a PDF report in my PHP code. I have successfully been able to save the PDF file and view it by using Output($pdfFilePath), but now I need to send it back to the browser using JSON without saving it on the server. To ac ...

Incorporating design elements specific to an anchor tag

I have a list of links (li) with one, two, or three li elements in the ul. Each li contains an <a> tag with text or icons. Below are some code examples: <ul> <li><a href="#">prev</a></li> <li><a href="#" ...

What methods can be used to get npx to execute a JavaScript cli script on a Windows operating system

The Issue - While my npx scaffolding script runs smoothly on Linux, it encounters difficulties on Windows. I've noticed that many packages run flawlessly on Windows, but the difference in their operations remains elusive to me. Even after consulting A ...

Unexpected behavior observed in Typescript method used as a custom filter for ng-repeat

module filterModule{ 'use strict'; export class UsersFilter { public userList: any[]; public userQuery: string; constructor(){ this.userList = [{id:1,name:'Jim',surname:'Anderson' ...

Show the text beside the textbox in ASP.NET MVC

Is there a way to display text next to a Text Box using jQuery without using validation? For example, if the Name field is left blank in a form and the Submit Button is clicked, the message should appear next to the Name Text Box. Instead of traditional ...

The 'split' property is not present on the 'string | number | {}' type

Just starting out with Typescript and I've encountered an error stating that the split method does not exist on type number. I've tried narrowing down the type by checking the value's type, but so far it hasn't been successful. Below is ...

jQuery character counting malfunctioning

Hey there I'm currently working on creating a jQuery word counter, but unfortunately most of them do not recognize special characters like æ, ø, å, ö, which are actually considered as LETTERS in my country rather than special characters. The fir ...

Decomposing a Vuex module into distinct files with Nuxt: A step-by-step guide

In the official Nuxt documentation (here), it is mentioned that 'You can choose to divide a module file into separate files: state.js, actions.js, mutations.js, and getters.js'. While there are examples of breaking down the Vuex store at the roo ...

Controlling SVG elements within React

Just starting my programming journey and currently diving into building a surf app using React JS. For the landing page, I want to display location pins on an image of a coastline. These pins should be clickable, leading users to detailed information about ...

Error JSON material for MeshFaceMaterial encountered

Successfully loaded my model using the following code: loader.load( "js/charWalk01.js", function( geometry, materials ) { mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() ); scene.add( mesh ); } ...

How can PHP be used to automatically select the current website from a dropdown menu?

I manage several office websites that all feature the same dropdown menu in the page header, allowing visitors to easily navigate between different office locations. While I have already designed the dropdown menu, I am unsure about how to handle the serve ...

Delay the POST submission form for updating documents in MongoDB

My objective is to delay a POST form submission in order to collect additional data. Currently, I am developing an application that streamlines testing for specific views. The process involves rendering a view using an HTML canvas element, allowing the us ...

Is there a way to configure my datepicker so that it displays only dates that are later than a specified date

At the heart of my inquiry lies a dilemma: I have two date pickers, one for leave_start and the other for leave_end. If an individual selects "YES" for a future text_field, I aim to ensure that the date pickers only display dates after the person's an ...

Developing a Type-inclusive TypeScript encapsulation for the first level of Array.flat() with generic functionality

I am working on creating a function that constructs an array from the input arguments, allowing for only one type or arrays of that same type. Essentially like (...items)=>items.flat(1), but with type safety and generics. It seems crucial to ensure that ...

What is the best way to transform the response data received from axios into a different response format?

After accessing response.data, I am getting a result like:  [{…}, {…}] If I expand it, here is how it looks: [ 0: {...}, 1: {...} ] I have attempted various methods to extract the values, including using a for loop, but it results in an infinite ...

Having an issue with TypeScript and React where the onChange event on the <select> element is only setting the previous value instead of the current value when using the useState hook

I'm currently developing a scheduling web tool. One of the key features I'm working on involves calculating the total hours between two selected times, startTime and endTime. These times are chosen via a form and stored using the useState hook: ...

Looking for a specific string within a 2D array in Python by iterating either to the right or

I am working with two arrays, one containing strings and the other containing words: l = ["abc", "def", "hij", "klm", "nop", "qrs"] word = ["abc","knq","knop"] I need to search for each word in the list and return the correspon ...

Issue with PHP array returning null values when accessed individually

Do you have any thoughts on why this might be occurring? Your code snippet: <?php print_r($this->$property); var_dump($this->$property[0]); ?> Here is the output: Array ( [0] => WP_Post Object ( [ID] => 34901 ...

How to utilize the reduce method with an array of objects in JavaScript

Every week, a number of objects are delivered to me. Each object contains information such as date, hours, and other fields. I need to arrange these objects in an array based on the total hours for each day. Here is an example of the objects: var anArray ...

Detecting race conditions in React functional components promises

There's an INPUT NUMBER box that triggers a promise. The result of the promise is displayed in a nearby DIV. Users can rapidly click to increase or decrease the number, potentially causing race conditions with promises resolving at different times. T ...