Tell me more: Kendo UI ButtonGroup in Angular v5 App

In our quest to beautify the web, we present more “cool” UI available for the plain & humble Kendo UI button. Kendo UI provides four types of buttons:

  1. Button
    You can use Kendo button in your application. To learn how, follow my previous article :
    Beautiful Buttons with Kendo UI in Angular v5 app
  2. ButtonGroup
  3. DropDownButton
  4. SplitButton

This post will cover the “ButtonGroup” control.


ButtonGroup is a collection of two or more Buttons.  Some features of this:

  1. Each button in the ButtonGroup can be separately configured depending on the requirements of your project.
  2. You can use any type of button in a ButtonGroup, like Button, Icon Button, or Image Button. Again, it depends on your project requirement.
  3. Kendo UI ButtonGroup also gives you selection modes. By default, it is Multi-selection with an option to change it into single mode.

For using Kendo UI buttons, you need to install Kendo in your Angular application. To learn the process of installation, follow my previous article and make your Angular app ready.

Power up your Angular 5 Application with Kendo UI

When ready with your Angular v5 app along with Kendo UI Buttons module, follow the following process.
Let us use three Kendo buttons in our app like this (output would be like the image):


Now, if you need to use ButtonGroup, then write –

as Angular Directive for binding more than one buttons in a group.

kendoButton >Yes
kendoButton >No
kendoButton >Cancel

Now, serve your Angular app with “ng serve –open” again and see the difference in output:

This looks much better as a ButtonGroup.

If you select or click any button, it is not immediately visible  which button was selected. To include this important functionality, you can use toggable property of kendoButton and make it “true”:

The code now looks like the following:

kendoButton [togglable]=“true”>Yes
kendoButton [togglable]=“true”>No
kendoButton [togglable]=“true”>Cancel

Now, if you click any button in ButtonGroup, it’ll be in selected mode.

Icon buttons in ButtonGroup
Let’s further improve this by including an icon with the button. Here is an example of how you can use Icon button in ButtonGroup:

kendoButton [togglable]=“true” [icon]=“‘check'”>Yes
kendoButton [togglable]=“true” [icon]=“‘cancel'”>No
kendoButton [togglable]=“true” [icon]=“‘close'”>Cancel

The result is much better with visual cues as follows: 

Here are some more icons available for Kendo UI Icon buttons.

Kendo UI ButtonGroup Selection Mode:

Using Selection mode, you can restrict the number of buttons that can be selected in a ButtonGroup. By default, the selection mode of the ButtonGroup is set to multiple. If you want to select one at the time, set selection to single.

Use this code.
<kendo-buttongroup [selection]=“‘single'”>
kendoButton [togglable]=“true” [icon]=“‘check'”>Yes
kendoButton [togglable]=“true” [icon]=“‘cancel'”>No
kendoButton [togglable]=“true” [icon]=“‘close'”>Cancel

Again, serve your Angular App (ng serve –open). Now, user can select only one option at a time.

Disabled ButtonGroup

You can enable or disable the ButtonGroup or an individual button in a ButtonGroup for Angular App.

“disable” is a property for both, ButtonGroup or button. Set “disable” to “true” if you want to disable a ButtonGroup. By default, Kendo UI ButtonGroup sets it to “false” that’s why all the buttons in a group are enabled.

To disable a specific button, set its own disabled attribute to true and leave the disabled attribute of the ButtonGroup undefined. If you define the disabled attribute of the ButtonGroup, it will take precedence over the disabled attributes of the underlying buttons and they will be ignored.



Here are two ButtonGroups in which I used “disable” for ButtonGroup level and also for individual button.

<kendo-buttongroup [selection]=“‘single'” [disabled]=“true”>
kendoButton [togglable]=“true” [icon]=“‘check'”>Yes
kendoButton [togglable]=“true” [icon]=“‘cancel'”>No
kendoButton [togglable]=“true” [icon]=“‘close'”>Cancel

<kendo-buttongroup [selection]=“‘single'”>
kendoButton [togglable]=“true” [icon]=“‘check'”>Yes
kendoButton [togglable]=“true” [icon]=“‘cancel'” [disabled]=“true”>No

kendoButton [togglable]=“true” [icon]=“‘close'”>Cancel

Watch the output:

Toggle Disabled

You can toggle “disabled” property at run time using component of Angular app. Edit your “app.component.ts” or any component code file where you want to write the function to toggle disable.

class AppComponent {

public isDisabled: boolean = true;

public toggleDisabled(): void {

this.isDisabled = !this.isDisabled;



Now, create a new kendoButton in the app where you want to bind this function.

kendoButton (click)=“toggleDisabled()” [primary]=“true”>Toggle Disabled

And set [disabled]=isDisabledin HTML view. Like:

<kendo-buttongroup [selection]=“‘single'” [disabled]=“isDisabled”>

kendoButton [togglable]=“true” [icon]=“‘check'”>Yes

kendoButton [togglable]=“true” [icon]=“‘cancel'”>No

kendoButton [togglable]=“true” [icon]=“‘close'”>Cancel

<kendo-buttongroup [selection]=“‘single'”>
kendoButton [togglable]=“true” [icon]=“‘check'”>Yes
kendoButton [togglable]=“true” [icon]=“‘cancel'” [disabled]=“isDisabled”>No
kendoButton [togglable]=“true” [icon]=“‘close'”>Cancel

kendoButton (click)=“toggleDisabled()” [primary]=“true”>Toggle Disabled

Click on the button to Disable Toggle.

After clicking on “Toggle to Disabled”, your all disabled ButtonGroups or Buttons will be enabled.

Hope you enjoyed reading this article. Stay tuned for next one on “Kendo UI Dropdown Button”.


Beautiful Buttons with Kendo UI in Angular v5 app

You may have used CSS for styling your buttons. Here is an easy solution to make your application buttons more effective and user-friendly without the hassle of CSS, i.e., Kendo UI Buttons. These buttons provide a clickable UI functionality with arbitrary content.

For using Kendo UI buttons, you need to install Kendo in your Angular application. To learn the process of installation, follow my previous article and make your Angular app ready.

Power Up your Angular 5 Application with Kendo UI

Kendo provides four types of buttons:

  1. Button
  2. ButtonGroup
  3. DropDownButton
  4. SplitButton


To get all the package components, import the ‘ButtonsModule’ in your application root module, like in this code:

imports: [




// Register the modules




The package also exports the following modules for individual components:

  • ButtonModule
  • ButtonGroupModule
  • DropDownButtonModule
  • SplitButtonModule


Button is an Angular directive which detects user interaction and triggers a corresponding event. In Kendo UI Button, we have some wonderful features:

  1. Default Button

For example, I need to use a button for selecting a file from my local computer, so I can use this button with only text (which is the default type), or with text and icon, or may be with only folder icon without text.

Then, select a button acording to your need :

  1. Only Text : <button
  2. Text with Icon: <button
    kendoButton [icon]=“‘folder'”>Open</button>
  3. Only Icon: <button
    kendoButton [icon]=“‘folder'”></button>
  1. Bare Button

you just need to use [look] property of kendo UI Buttons and change it to ‘[look]=bare’.


  1. Only Text : <button
    kendoButton [look]=“‘bare'”>Open</button>
  2. Text with Icon: <button
    kendoButton [icon]=“‘folder'” [look]=“‘bare'”>Open</button>
  3. Only Icon: <button
    kendoButton [icon]=“‘folder'” [look]=“‘bare'”></button>
  1. Flat Button

Again, just change the [look] property to ‘flat’ like ‘ [look]=”‘flat'” ‘. The bare and flat buttons look almost same but select or mouse hover styles are a little bit different.


  1. Only Text : <button
    kendoButton [look]=“‘flat'”>Open</button>
  2. Text with Icon: <button
    kendoButton [icon]=“‘folder'” [look]=“‘flat'”>Open</button>
  3. Only Icon: <button
    kendoButton [icon]=“‘folder'” [look]=“‘flat'”></button>
  1. Outline Button

Outline Button is used to have a button with in-built border style. Change your [look] property to ‘outline’.


  1. Only Text : <button
    kendoButton [look]=“‘outline'”>Open</button>
  2. Text with Icon: <button
    kendoButton [icon]=“‘folder'” [look]=” ‘outline'”>Open</button>
  3. Only Icon: <button
    kendoButton [icon]=“‘folder'” [look]=” ‘outline'”></button>

More Features and Functionalities of Kendo UI Buttons:

  • Disabled Button

To make any button Disabled, set the disabled property to true only.


kendoButton [disabled]=“true”>Save</button>

You can use the same property with any type of buttons.

  • Icon Button

You can create your buttons more user-friendly by adding image, predefined, or custom icons to it. The button provides three properties for it:

  1. icon: For using the built-in Kendo UI icons, Like Folder, Open Folder, and more.

    kendoButton [icon]=“‘calendar'”>Events</button>

  2. iconClass: Adding FontAwesome and other font icons from required third-party CSS classes, use iconClass property.



    Using in Button

    kendoButton [iconClass]=“‘fa fa-calendar fa fw'”> Events</button>

  3. imageURL: for using third-party images as icon from a specified URL.

    kendoButton [imageUrl]=“‘'&#8221;>Snowboarding</button>

    Your buttons must be like this:

  • Primary Button

    The Button enables you to highlight the actions to the user by enhancing its appearance.

    For making any type of button as Primary, set the primary property to true. Like:

kendoButton [primary]=“true”>Open</button>

And your output will be like:

  • Toggleable Button

    Toggleable Button enables you to indicate whether it is active or inactive. To get this behavior, use the togglable property and set it to true.

kendoButton [look]=“‘bare'” [togglable]=“true”>Submit</button>

See the output when it’s in Inactive mode:


Manage Events of Kendo UI Buttons:

If you need to manage your events in Kendo Button, just write your event name in small brackets (), with event name, like if you need to use Click event then write like this:
(click)=“functionName ()”

Use the bellow code for button:

kendoButton [primary]=“true” (click)=“testClick()”
>Click Me</button>

“testClick” its function Name replace this with your function, need to be call. Now create a function in “aap.component.ts”, like:

public testClick(): void {

alert(“Kendo Button Click Event is Working !!”);


Now run your app in browser, check the page:

Now click to test your click event.

Now you can use any Events Click, focus or more.

Is Blockchain right for your business?

The Government of India, in its 2018 budget, has undertaken to explore the use of blockchain proactively for ushering in a digital economy. It has also made clear the distinction between blockchain (that is supports) and Bitcoin cryptocurrency (that it doesn’t support).

When is the right time for your business to implement blockchain technology? Is it the right time to invest your capital in the technology and if yes, then will your current capacity or core capabilities be able to bear the overwhelming potential that blockchain has to offer?

But what is blockchain exactly?
And what capabilities make it so attractive for enterprises? Blockchain is a disruptive technology trend that enables a shared, authentic, decentralized ledger that is:

SECURE: Blockchain uses strong cryptography to create transactions that are impervious to fraud and establishes a shared truth. Also, all the transactions are signed with the digital certificate.

SHARED: The real benefits of blockchain, over conventional technology, are achieved when we use it to link organizations to share information on a distributed ledger.

DISTRIBUTED: A blockchain can be distributed across multiple organizations and becomes more secure as replicas are added.

LEDGER: Every transaction is written into the ledger once and cannot be changed after the fact.

What kind of businesses is blockchain best for?

First and foremost, blockchain technology is adept for businesses where large amounts of data is transferred, updated and filtered by multiple users. The potential scenario to apply blockchain depends largely on that. Once we realize that there is a situation that requires the capabilities of blockchain, there arises the need to understand whether a public blockchain is required or an enterprise blockchain is essential.

But what is an enterprise blockchain? An enterprise blockchain (i.e. Hyperlegder, Ethereum Enterprise, Ripple, Quorum, etc.) is a distributed ledger with the following characteristics:

  • All the participants, and their digital identities, are known from one or many trusted organizations
  • Writes and read permissions are roles-based and usually requires consensus of several participants
  • Multiple algorithms are used for consensus

There are two types of enterprise blockchain:

  • Private: Usually managed by a single organization. Typically, the network participants are internal business units or divisions.
  • Consortium: In this case, the blockchain network is managed by multiple trusted organizations. New participants require a consensus of several participants.

Which industries can use blockchain? The potential impact of blockchain is significant across all sectors and industries—from banking to government to healthcare and beyond, as it:

  • Eliminates intermediaries increasing efficiency and speed.
  • Simplifies operations by reducing cost and time related to reconciliations and disputes.
  • Potentially enables new business models increasing revenue and savings.

According to top market analysts and leading consulting firms, the top five industries that blockchain will likely disrupt by 2020 are
financial services, government, real estate, supply chain management, and media distribution. Currently, most active customers using blockchain are financial services institutions, including insurance companies. However, the trend is rapidly shifting to other industries.

More interestingly, a sizeable percentage of blockchain implementations involve at least one participant from a second industry such as manufacturing, government or retail. A few sample customer examples include:

  • Bank of America and Microsoft Treasury using Blockchain in a Trade Finance scenario to improve the process of issuing a Standby Letter of Credit to a customer (SBLC) to a customer.
    Impact: The process has been reduced from 3-5 weeks to just 3-5 days.
  • Renault Group is working together with Microsoft and VISEO to create the first digital car maintenance book based on Blockchain and using Microsoft Azure capabilities.
  • Large food manufacturers and distributors are using blockchain to track their premium products journey from source to consumption efficiently, and to have a shared ledger as the single source of truth.

An easy way to get started with Blockchain technologies in the cloud. Microsoft Azure is taken up as a use case here. Microsoft Azure Blockchain is the cloud platform for BankChain, a blockchain consortium of 30 top banks. Companies are creating innovative applications on top of Azure for near real-time cross-border remittance at near zero cost, real-time peer-to-peer transfer systems with automated reconciliation, end-to-end loan syndication process management, vendor onboarding, NDA processing, and vendor rating and many more. The State Bank of India, India’s largest bank is using Primechain’s blockchain-enabled smart contracts and KYC.

For enterprises, they can look forward to using cloud technology to test the waters with blockchain’s enterprise readiness. Currently, Microsoft Azure supports the most widely used blockchain and distributed ledger protocols on Azure, including HyperLedger Fabric, R3 Corda, Quorum, Chain Core and BlockApps.

Some principles that enterprises should look forward to are as follows:

  • Blockchain on your terms: No one-size-fits-all approach — The platform and the ecosystem partners should make it easy to get started and iterate quickly with the blockchain of your choice, both on-premises and in the cloud.
  • Integrated with your business: Merge blockchain with the IT assets you already have. The platform should let you integrate blockchain with the cloud services your organization uses to power shared processes.
  • Ready for the enterprise: With the Coco Framework, Cryptlets, and Azure services integrations, Microsoft is addressing existing technology gaps with blockchain and helps organizations build durable enterprise-grade applications.

Contact us at if you want to get started on this new and exciting journey!!