Month: August 2018

Angular + Kendo UI: DropDown Button

Posted by

0

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

Posted by

0

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