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

Kendo UI DataViz

Resources from webinar “Visualizing Your Cloud Data using Kendo UI DataViz”

On Dec 08 2016 we finished yet another webinar here in Progress India. This time we focused on an enterprise scenario where in you have data in your cloud for e.g. may be Salesforce and you want to create beautiful looking Data Visualization out of that data. As part of the webinar we looked at Data Direct Cloud and Kendo UI products from our portfolio. This post is a recap of the webinar. You will find the deck and video recording of the webinar.

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

Kendo UI Grid

Video: How to Scaffold Kendo UI Grid in ASP.NET MVC Applications

Kendo UI is one of our popular controls set when it comes to HTML5 based app development. Kendo UI is client side UI framework and you work with Kendo UI using JavaScript. But if you are coming from ASP.NET MVC background you may be familiar with the concepts of HTML helper. Helpers are nothing but a shorthand to otherwise writing lengthy HTML code. With our UI for ASP.NET MVC product we provide what we call as “Kendo UI Wrappers for ASP.NET MVC” a.k.a Kendo UI helpers in ASP.NET MVC.

Grid control or widget as we call it – is one of the most widely used widget in Kendo UI. When you install our UI for ASP.NET MVC we also install Kendo UI Scaffolder. Scaffolding is a handy productivity feature in Visual Studio where the Scaffolder generates all the boiler plate code necessary. Our Kendo UI Scaffolder can scaffold Grid code for you – without you writing a single line of code.

In the below video i have tried to capture the steps required to perform a Kendo UI Grid Scaffolding in your ASP.NET MVC applications. The video is like a Step by Step instruction for you to follow:

Hope this video gives you a jump start if you are planning to use Kendo UI Grid in your ASP.NET MVC applications.

Till next time – Happy Coding !

Video: Building Enterprise Dashboards in Minutes using ASP.NET MVC

In my previous blogs post here, i talked about our Telerik UI for ASP.NET MVC and Dashboard Project Template that we provide for Visual Studio. In this blog post i have a screen cast created which shows how to use the Dashboard Project Template. In the screen cast i go over the process of using the Dashboard Project Template in a step by step manner. Continue reading

UI for ASP.NET MVC

Creating Dashboard in Minutes using Telerik UI for ASP.NET MVC

In this blog post i will be talking about one of our products named “UI for ASP.NET MVC”. As part of the product we provide certain productivity improvement things and in this blog post i will showcase one such feature namely – Project Templates. Using Project Templates you can jump start your ASP.NET MVC project using Kendo UI. We have a specific template which helps you create Dashboard within minutes. So lets take a lap around this Dashboard Project template now. Continue reading

Kendo UI

Resources from Webinar “Coexist: AngularJS 2.0 and React with Kendo UI”

On Jun 23 2016 we conducted yet another webinar. This time we talked about Kendo UI Components for Angular JS 2.0 and React JS. This blog post is a recap of the webinar. You will find the slide deck and video recording in this blog post. If you missed attending live or had to leave in between dont worry – we have you covered. Just go through this blog post to catch up on what you missed. Continue reading

UI for ASP.NET MVC

Get Up & Running with Telerik UI for ASP.NET MVC Project Templates

As a team working on a project one of the key aspects of development is productivity. You want to get up & running with your project as fast as you can. You don’t want to spend time on some mundane things, rather you want to leapfrog your development. That’s almost every project teams #1 priority and wish. Today, in this blog post i will be talking about how our product known as “UI for ASP.NET MVC” can help you jump start your ASP.NET MVC (3 to 5) projects. Let’s get things rolling now. Continue reading

Kendo UI

Resources from Webinar “Kendo UI Wrappers for ASP.NET MVC Core 1.0”

On May 26 2016, we finished yet another webinar. If you are here at our site for the first time, do note that we conduct webinars almost 3 Thursdays in the month , every month @ 12PM IST. If you want to know more about the schedules, you can check out our announcement category and there will be a blog post with the schedule.This week we did one of my favorite topics – ASP.NET MVC Core 1.0 + Kendo UI Wrappers or Tag Helpers. Continue reading