How-To: Create Beautiful Charts with Kendo UI with Local Data

If you know jQuery, and want to include data-viz elements in your web page without all the hassle, you are at the right place. I am going to give you a gist of how Kendo works with jQuery to create robust data-viz elements.

We will build a ratings pie chart, step by step. Final product is shown below.

1. Download

First things first. You need to download Kendo UI. There are several paid versions, and a free (trial) version. Trial is more than enough for trying it out.

Download Kendo UI for a trial period from here. You will have to sign up to download it.

2. Transport

Extract the downloaded ZIP archive to an easily accessible location. We are going to need it’s js and css folders.

3. Kickstart

Kickstart the project by creating a new folder, say kendo-pie. Copy the downloaded js and css folders in kendo-pie.

Now, create a new HTML file in kendo-pie, say index.html. This is our main webpage. The pie chart will reside here.

4. The HTML

Open index.html with your favourite text editor. Add some starter code.

Give it a title, say Overall Ratings. Link all the necessary js and css files, inside head.

Time to populate the body. Create a wrapper (div), with id overall. The actual chart element and it’s script will reside in this wrapper. Create the chart div inside the wrapper, with id chart. Give it some style with a style attribute.

The above goes inside body, and the whole thing up-to this point looks something like this:

5. The jQuery

Create a script element inside the wrapper, and add some starter jQuery code.

Inside the document-ready function, select the chart element with jQuery’s id selector, and apply kendoChart() method.

6. The Kendo

kendoChart() takes a configuration object as an argument. This configuration object is used to describe the chart and include data (local or remote) to be represented.

Let’s contsruct the configuration object:

  1. Add title property.

2. Add legend property.

3. Add some defaults.

4. Add series properties: type of chart and local data.

5. Add tooltip property.

kendoChart() method is ready. So is the script. Coding part is complete. Wrapper should look like this.

These were the basic steps to create a pie chart using jQuery and Kendo, mostly Kendo. Now, open index.html in browser, and you should see output as below.

I hope the above steps were helpful in giving you a basic idea about Kendo UI. It’s up to you now to tweak the chart however you want, or create a new element altogether. There are loads available. Docs are available here, and demos here.

Note: This post is authored by Mr. Abhay Kumar, interning with GTM Catalyst (distributor of Telerik controls in India).

Advertisements

Angular + Kendo UI: DropDown Button

In our quest to beautifying the web, we present more “cool” UI available for the humble Kendo UI button.

The Kendo UI DropDownButton is a component that is available in {ButtonsModule} from
‘@progress/kendo-angular-buttons’.

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

You need to complete the Angular v5 app along with Kendo UI Buttons module before continuing with the following:

DropDownButton looks like the Button but when you click, it displays a popup list with items. DropDownButton also allows us binding a list or an array with multiple values from an Angular component.

If you have any Array like this in any Component and want to show this array’s values as a list of options in the DropDownButton, you can do that using the following code.


data: Array<any> = [{

text: ‘My Profile’

}, { text: ‘Friend Requests’ },

text: ‘Account Settings’ },

text: ‘Support’ },

text: ‘Log Out’ }];

Now, in app.component.html, add a Kendo DropDownButton.
<kendo-dropdownbutton></kendo-dropdownbutton>

Kendo DropDownButton has a property called “data” for binding the Options list with it.

<kendo-dropdownbutton [data]=“data”>
User Settings
</kendo-dropdownbutton>

Now, your DropDownButton must be something like the below image and when you click on it, it shows all options:

Events Binding with DropDownButton

DropDownButton provides Events like:

  1. Focus
  2. Blur
  3. Open
  4. Close
  5. itemClick

Let’s have a look at how you can use any of these step by step:

Step 1. Create an Event Handler function in your Component Class.


public onItemClick (): void {

console.log (‘item click’);

}

Step 2. Use Angular Event Binding with your DropDownButton in component HTML file.

<kendo-dropdownbutton [data]=“data” (itemClick)=“onItemClick ()”>

User Settings

</kendo-dropdownbutton>

Step 3. Serve your Angular app in the browser and click on any available option in the DropDownButton.


In a similar way, you can use more events of DropDownButton, as in the following code:

(focus)=“onFocus()”

(blur)=“onBlur()”

(close)=“onClose()”

(open)=“onOpen()”

DropDownButton With Icon

To beatify your DropDownButton, use Icon along with Text using [icon] property of Kendo UI DropDownButton.
<kendo-dropdownbutton [data]=“data” [icon]=“‘gear'” (itemClick)=“onItemClick ()”>

User Settings


</kendo-dropdownbutton>

And it’ll be more attractive for your Client.



You can use other types of icons also like
FontAwsome or Image Icon, so as to make the buttons more eye-catching, For example:

  1. FontAwsome
    Just use the CSS of FontAwsome in your Angular App.

<link
rel=“stylesheet”
href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css&#8221;>


<kendo-dropdownbutton [iconClass]=“iconClass”>

  1. Image Icon

Update the Component with Image URL in any variable, like:

imgIconURL:string=http://demos.telerik.com/kendo-ui/content/shared/icons/16/star.png&#8221;;

Now, use [imageUrl] in DropDownButton,

<kendo-dropdownbutton [data]=“data” [imageUrl]=“imgIconURL”>


Must checkout the
 built-in Kendo UI icons.

Popup Item Templates

This is really a best feature of DropDownButton. The Kendo UI DropDownButton provides options for setting the behavior of its popup and popup items with custom templates.

Step 1:

Add a new icon property and its value to your data array.
data: Array<any> = [{

text: ‘Cut’icon: ‘cut’ },

text: ‘Paste’icon: ‘paste’

}];

Now, use <ng-template></ng-template> for custom template and decorate it as you want.

<kendo-dropdownbutton [data]=“data”>
Edit

<ng-template
kendoDropDownButtonItemTemplate
let-dataItem>
<span
class=“k-icon k-i-{{ dataItem.icon }}”></span>
<span>{{ dataItem.text }}</span>
</ng-template>

</kendo-dropdownbutton>

Now, see the output. Well, it’s just awesome.


Data Binding with DropDownButton

The DropDownButton enables you to bind the data with DropDownButton in two ways:

  1. Primitive (strings and numbers).

    You can bind an array to the DropDownButton with string and numbers’ data called as Primitive, which we did in our previous examples.

data: Array<any> = [{

text: ‘Cut’

}, { text: ‘Paste’

}];

If the text field in the data objects is named text, the DropDownButton gets its value automatically.

  1. Complex (data inside objects) type.

A Complex data type is just an object with multiple properties. The component extracts the text value from the data items and in this way, sets the text of the items in the popup. If the name of the property in data source is different from the text—for example, actionText — you have to set it as a [textField]. Here is an example –
data: Array<any> = [{

actionName: ‘Undo’icon: ‘undo’ },

actionName: ‘Redo’icon: ‘redo’ },

actionName: ‘Cut’icon: ‘cut’ },

actionName: ‘Copy’icon: ‘copy’ },

actionName: ‘Paste’icon: ‘paste’

}];

Now, set [textField] to “‘actionName'”.

<kendo-dropdownbutton [data]=“data” [textField]=“‘actionName'”>

Edit

</kendo-dropdownbutton>

And Check the output:

We can add more properties like disabled, click, and more.

To set the enabled or disabled state of the DropDownButton, use disabled property. To set the icon of each item, use the icon, iconClass, and imageUrl properties of data items. To attach a function that will be called when the user clicks an item, set the click property of the data item.

  1. Disabled:

    Just add a new property “disabled: true” in the data object that you want to be Disabled. For example:

data: Array<any> = [{

actionName: ‘Undo’icon: ‘undo’ },

actionName: ‘Redo’icon: ‘redo’disabled: true },

actionName: ‘Cut’ icon: ‘cut’ },

actionName: ‘Copy’icon: ‘copy’ },

actionName: ‘Paste’icon: ‘paste’disabled: true

}];

Now, your output must be something like the below image.


  1. Click:

Using Click Property of Data Items in DropDownButton, you can attach a function. Let us see how it’s work.

First, add a click property to the data object array.

{

actionName: ‘Undo’,

icon: ‘undo’,

click: (dataItem) => {

console.log(`Undo in process !!`);

}

}

And, serve your Angular app again.


Keyboard Shortcut/Navigation

Kendo UI DropDownButton supports many shortcuts to make it more user-friendly from keyboard only. The keyboard navigation of the DropDownButton is enabled by default.

DropDownButton supports the following keyboard shortcuts:

SHORTCUT KEYS DESCRIPTION
Enter & Space Opens the popup, or activates the highlighted item and closes the popup.
Alt + Down Arrow Opens the popup.
Alt + Up Arrow Closes the popup.
Esc Closes the popup.
Up Arrow & Left Arrow Sets the focus on the previously available item.
Down Arrow & Right Arrow Sets the focus on the next available item.

Earlier articles on using Kendo UI with Angular:

ButtonGroup
Tell me more: Kendo UI ButtonGroup in Angular v5 App

 

How-To: SEO Friendly JS pages – Navigate Between App States With Kendo Router

In this post we learn how to make our Javascript pages SEO friendly.

With Javascript, we can render different content on the same URL. Search engines expect each URL to host unique content. This presents a dilemma for the search engine robots who see different content at different times for the same URL. This can lower the ranking of the page significantly. The solution is to have a unique link for each application “state”.

An interesting byproduct is that now each resource on your webpage gets its own URL to deeplink with.

The Kendo UI Router class is responsible for tracking and navigating between different states of application. It is very useful in making application states book-markable and linkable.

1. Kickstart

Instantiate a new router object with Router class.

const router = new kendo.Router();

Add default route handler, i.e. route handler for / route.

router.route('/', () => {
  console.log('/ URL was loaded');
  // Change state
});

Start router after document is ready (through jQuery).

$(() => {
  router.start();
});

The above code goes into the main logic of the app.


  const router = new kendo.Router();
  router.route('/', () => {
    console.log('/ URL was loaded');
    // Change state
  });
  $(() => {
    router.start();
  });

This was a very basic example of routing using Kendo Router.

2. Parameters

Parameters can be used in route handlers to handle a diversity of routes. Parameters are prefixed with a : (colon) to differentiate between hardcoded segments and parameter segments.

router.route('/api/:id', (id) => {
  console.log('id: ', id);
  // Change state
});

In the above example, id is a parameter. It’s value is passed to the callback function, and is used in the function to change app state, if required.

2a. Optional Segments

Optional segments can be used in URL to avoid 404 error in case of absence of parameter.

router.route('/api/:id/(:name)', (id, name) => {
  console.log('id: ', id, ', name:', name);
  // Change state
});

In the above example, name is an optional parameter. Both of the below URLs will invoke above route handler.

/api/1
/api/1/abc

2b. Globbing

Globbing means invoking route handler for every URL, in layman terms. It uses regular expression * to capture the whole URL after the *.

router.route('/api/*anything', (anything) => {
  console.log('anything: ', anything);
  // Change state
});

The above route handler gets invoked for anything after /api/. For example:

/api/123
/api/123/abc
/api/xyz123
and so on...

2c. Query String Parameters

In addition to route parameters, query string parameters can be used in routes. Route callback function receives a params object with query string parameters.

router.route('/api', (params) => {
  console.log(params.id, params.name);
  // Change state
});

The above route handler gets invoked with the following routes.

/api?id=2
/api?id=3&name=abc
and so on...

The parameters id and name can be accessed with the params object as params.id and params.name.

3. Navigate

The navigate method is used to navigate to a particular route and invoke its handler, and change the current state of app.

$(() => {
  router.start();
  router.navigate('/api');
});

The navigate method can be used only after starting the router. The above router.navigate(‘/api’) will invoke the respective route handler.

Missing Routes

What if a route is missing? We can handle missing routes by defining routeMissing method while creating the router object.

const router = new kendo.Router({ 
  routeMissing: (e) => { console.log(e.url); }
});

Note: This post is authored by Mr. Abhay Kumar, interning with GTM Catalyst (distributor of Telerik controls in India).

Getting Non-religious with React Library – Part I (The Concepts)

The Javascript wars are raging! Are you with the purist Javascript nerds or on traditional jQuery’s side or would you prefer lean React or does Google’s AngularJS get your mojo? This post isn’t about this religious debate.

This three part series is going to introduce the React to developers. React was created by Facebook and is supported by them.

We start slow in this post but will end with a working example of React application. We are interested in building an enterprise application and would end up adding a Grid to the page in Part III of this post.

The one thing I love about React is that it is non-religious. It is ready to embrace any JavaScript technology that you can throw at React. React is a very light weight framework and only contains the capability of rendering the view. React makes no assumptions about the rest of the technology stack used and can plug in with any Model or Model View framework.

Surprisingly with all that versatility, React is very simple to learn and can be introduced incrementally into an existing project (part running React and part running jQuery).

Here are some concepts to be aware about:

  1. Virtual DOM: Virtual DOM is a shadow of the page DOM but is never updated. It is only destroyed and re-rendered for the specific components that have changed. This makes updates blazingly fast.
  2. One Way Databinding: Closely tied to the above, only inputs are accepted as change of state. Change in the property doesn’t trigger the update on the DOM automatically.
  3. JSX: This is a JavaScript extension that allows XML to be embedded within React components directly. Think of this as a light weight template library.
  4. Classes/ Components: The heart of React. Everything rendered by React is a component. Components are composable and can be composed of additional components.
    1. Properties/ Props: React Components have properties that are used to accept input from other components and used to render the components directly.
    2. Events: Allows components to respond to various input activities.
    3. State: Components can maintain state that is only available to the specific component i.e. sort of a private data.
  5. References: One way binding constructs that allow inputs to be accessed from the backend.
  6. Developer Tools: React Developer Tools are available for Chrome and Firefox as a browser extension for React. It allows you to inspect the React component hierarchies in the virtual DOM.

React CLI

The easiest way to get started with React is through create-react-app CLI (the official React CLI). So, fire up your command line interface and get cracking..

First install the create-react-app:

npm install –g create-react-app

Then we can create a new app, and that bootstraps the entire application. We simply use “create-react-app my-app” and render it with npm start. Remember to browse to the root directory where you want to create your node application. I tend to keep my node projects in the “Documents\nodeprojects” directory.

create-react-app my-app

cd my-app

npm start

These commands just runs through a npm script to set up a server for us and kick off the app. You should see a screen as follows:

Note: It does take a while to install everything. Have patience as npm creates the first React app for you.

This was probably the fastest way to get started with node. In the next part, we will cover building a React application from scratch.

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

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):

kendoButton>Yes
kendoButton>No
kendoButton>Cancel

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”:
[togglable]=“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.
https://www.telerik.com/kendo-angular-ui/components/styling/icons/#toc-actions


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.
[selection]=“‘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.

[disabled]=“true”

Example:

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.

export
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.


<button
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


<button
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

Example:

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

imports: [

BrowserModule,

FormsModule,

HttpModule,


// Register the modules

BrowserAnimationsModule,

ButtonsModule

]

The package also exports the following modules for individual components:

  • ButtonModule
  • ButtonGroupModule
  • DropDownButtonModule
  • SplitButtonModule

Button:

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
    kendoButton>Open</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’.

Examples:

  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.

Examples:

  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’.

Examples:

  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.

Examples:

<button
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.

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

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

    CSS URL

    <link
    rel=“stylesheet”
    href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css&#8221;>

    Using in Button

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

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

    <button
    kendoButton [imageUrl]=“‘https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png'&#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:

<button
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.

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

See the output when it’s in Inactive mode:

Active:

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:

<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.

Power Up your Angular 5 Application with Kendo UI

Are you an Angular Developer? If yes so which CSS or SCSS you are using for making your application better in User Experience?

In this post, I’ll tell you how you can use Kendo UI by Telerik to make applications that pop out to users. We will use the minimalist approach in this article by simply “enhancing” a button on the webpage.

I’ve divided this article into three steps:

  1. Download Kendo UI for React, Angular, jQuery.
  2. Create an Angular Application by Angular CLI
  3. Include Kendo UI to showcase the improved User Experience

So, let’s start and see what is Kendo UI and how to get it?

What is Kendo UI?

Kendo UI is an easy to use HTML 5 JavaScript framework by Telerik for building interactive and high-performance modern web applications and websites. Kendo UI comes with JavaScript files, images and style sheets and offers a library of 70+ UI widgets and features. The best part is that Kendo UI provides AngularJS and Bootstrap integration.

To get Kendo UI, browse to:  https://www.telerik.com/kendo-ui and login if you have a Telerik account already or click to ‘Get a Free Trial’.

Now you need to select an option to indicate in which Application you want to use Kendo UI. I selected Angular because I’ll be creating an Angular 5 application.

Next you will need to create a telerik.com account. After the account is created, you will be shown a Getting Started document by Telerik Developers. This is a quick start guide that you can refer.

As the next step, we will create a vanilla Angular app in which we will install Kendo UI.

For Angular development, we need to have Angular CLI installed on our computer. We can check the same as follows:

  1. Open Command Prompt and type "ng -v" use to check angular version.

If we do not have angular installed, the command prompt will give an error. In this case,  please install Angular CLI, from the following URL: https://cli.angular.io/

Type the following command at Node command prompt or Command Prompt of windows: "npm install -g @angular/cli"

After successful installation of Angular CLI try again the last Command to check Angular Version "ng -v". I hope now you’ll get version info on command prompt.

Let’s create our first Angular App using CLI  by using the following command:
"ng new my-first-project –style=scss"

Now your Angular application is successfully created. But still we don’t have Kendo UI in our app.

To add Kendo UI in the Angular app, use the following command:

"npm install --save @progress/kendo-angular-buttons @progress/kendo-angular-l10n @angular/animations"

Note: The Kendo UI components use Angular animations. As of the Angular 4/5 release, you have to install the @angular/animations package separately.

Now you have Kendo buttons available in your Angular application.

We need to edit our project and I’ll be using Visual Studio Code by Microsoft for the same.

Open that folder where created your Angular application “my-first-project”.

Now you can see all files and folders of your project in your Visual studio Explorer. src is that folder where your application is existing.

As we know in Angular application we have a module file “src/app/app.module.ts” so update that file with following code:

import { BrowserModule } from ‘@angular/platform-browser’;

import { NgModule } from ‘@angular/core’;

import { FormsModule } from ‘@angular/forms’;

import { HttpModule } from ‘@angular/http’;

import { AppComponent } from ‘./app.component’;

// Import the Animations module

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;

// Import the ButtonsModule

import { ButtonsModule } from ‘@progress/kendo-angular-buttons’;

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

FormsModule,

HttpModule,
// Register the modules

BrowserAnimationsModule,

ButtonsModule

],

providers: [],

bootstrap: [AppComponent]

})

export
class AppModule { }

Your code should look like the below:

Now we will add an input button from Kendo UI. Update your view file from path ‘src/app/app.component.html’ with the following code:

{{title}}

kendoButton (click)=“onButtonClick()”

[primary]=“true”>My Kendo UI Button

The code should look like the following:

We are almost done. The last change is to include a function in your default component that can be called on button click which updates the model value.

Update your app component ‘src/app/app.component.ts ‘ as follows:

import { Component } from ‘@angular/core’;

@Component({

selector: ‘app-root’,

templateUrl: ‘./app.component.html’,

styleUrls: [‘./app.component.scss’]

})

export class AppComponent {

title = ‘Hello World!’;

onButtonClick() {
this.title = ‘Hello from Kendo UI!’;

}

}

It is time to run the application. Now open terminal or Command prompt to start your application.

For built-in terminal in Visual Studio code press (ctrl + `) and run command:

'ng serve' to start web pack for angular application.

Note: The Kendo UI components use @angular-devkit/core from node modules. If you get the error as shown:

Then you have to install the @angular-devkit/core package separately by using command:

'npm I @angular-devkit/core'

After this again run 'ng serve' or 'ng serve –open' it’ll start listening our request on a default port 4200 in windows. We can change it if this port is busy by using command: 'ng serve –port <1234>' 1234 is any free port.

So, here is your first look of your application with a simple and plain button.

Now install Kendo Default Theme for you scss in application with command:

'npm install --save @progress/kendo-theme-default'

It will update your packages in application.

Now just update last file of this project ‘src/styles.scss’ to import the Kendo Theme:

@import “~@progress/kendo-theme-default/scss/all”;

This is how easy it is to get Kendo UI in your Angular v5 app.

Just run your application again with same command: 'ng serve –open'

With the stylesheet in place, you should see something like this in the browser:

012018_1355_powerupyour25

Hope you have enjoyed this simple tutorial on Getting Started with Angular with Kendo UI. The source code for this simple application will be available shortly.

To explore the other features of Kendo UI button, please visit: https://www.telerik.com/kendo-angular-ui/components/buttons/button/

We will be publishing more such guides. Come back for more!

Kendo UI Mobile Cordova Templates for Hybrid Mobile Apps

Hybrid Mobile Apps are one of the ways in which you can create a cross platform Mobile Applications using HTML/JavaScript/CSS technologies. The key here is Cross Platform. I want to write once and want to take my app to all platforms. One of the quickest ways is the Hybrid Way. Although Hybrid has its disadvantages when it comes to scenarios like high graphical UIs – it is a good choice when we have a simple data entry kind of scenario. In this blog post i will introduce you to Kendo UI Mobile templates we have done. These templates will speed up your Cordova based Hybrid Mobile App development. These templates make use of our Open Source Hybrid Mobile UI Framework called Kendo UI Mobile. Continue reading

Kendo UI Chart - Custom Series Colors

How To: Provide Custom Series Colors for Kendo UI Data Visualization Charts

In this blog post i will take a look at one of the simplest API configuration we have for Kendo UI Data Visualization. When you use Kendo UI Data Viz to plot a chart have you ever wanted to provide your own custom colors for the series in the chart. If yes, well read on – i will show you how to achieve custom colors on series using Kendo UI Data Viz. Lets get started. Continue reading

Kendo UI Chart with Angular

How to: Drill Down Kendo UI Chart using Angular JS 1.X

Recently a customer was evaluating Kendo UI for one of their applications. Their team was using Angular JS as the UI framework. They wanted to know how to achieve a drill down on Kendo UI Chart with Angular JS. Now, Kendo UI has always supported Angular JS 1.x directive out of the box. Eventually i built a small demo on how to achieve this to showcase it to the customer. I thought why not turn this to a blog post and hence this post. I will be walk you through on how to create a drill down Kendo UI Chart with Angular JS 1.x. Lets get started. Continue reading

Kendo UI Grid

Video: How to add custom Date filter column in Kendo UI Grid using ASP.NET MVC Wrapper

Recently i wrote a blog post showcasing how to add a custom Date filter column in Kendo UI Grid using our Telerik  UI for ASP.NET MVC wrappers. You can find the blog here. In this blog post i will be providing a screen case i have recorded where i give you step by step instruction on how to create a custom Date filter column. If you have read the blog post – now you get to see it in action. Continue reading

Kendo UI Grid

How To: Custom Date Filter Column in Kendo UI Grid using ASP.NET MVC Wrapper

In one of my previous blog post, i had written about how to have a custom date filter column in Kendo UI grid but the JavaScript way. You can read about it here. Video version of that blog post is available here. In this blog post i will showcase how to achieve the same scenario but using ASP.NET MVC Wrapper. Continue reading

Kendo UI Grid

Video: Custom Date Filter Column in Kendo UI Grid (JavaScript)

In my previous post here, i talked about Kendo UI Grid & Custom Date Filter column using JavaScript. I have recorded a screen cast on the same subject. In the screen case you will be able to follow the step by step instruction to create a custom date filter column. Below you will find the screen cast recording:

Hope the video helps you if you have a similar requirement in your projects.

Till next time – Happy Coding !