Restyling an Html <SELECT> Element from a Telerik Kendo Panel Bar

Introduction

Recently, I needed to restyle an HTML <SELECT> box so that the selected element had a different background color. In all other ways, the element could be exactly like an HTML <SELECT>. Below are both the original element, and the restyled element.

 

 

This type of style change allows the novice user to immediately identify the control’s implied usage while allowing for some coordination with the site and page’s overall style.

 

Technology Platform

The project is an Asp.net MVC site with jQuery, and Knockout.js on the front-end requesting json content on the backend. For the purposes of this blog post, I’ve stripped down the functionality so that just the required elements are visible.

The project was already using Telerik Kendo controls so morphing the Kendo Panel Bar into a <SELECT> element was suggested.

The main work is in the css file but the entire working sample project is available for download.

 

Telerik Kendo Trial Version

The Telerik Kendo JavaScript files in the demo are part of a trial installation. Please make sure you install the trial version of Kendo in order to make sure the trial works for you. Make sure to update the Kendo files if your installed trial has more recent versions.

 

Kendo Styling

Kendo controls come with complete styling in several themes. In order to override the style of the panel bar, very few css styles need to change. Below is an image of the default Kendo Panel Bar.

 

 

The main issues with the default styles are the background color, text color, the item separator (line), and the hover/selected styles.

 

Restyling (SelectDDL.css)

In order to override the default style of the items, add an entry for “.k-item > .k-link” to the style sheet.

 

#panelbar .k-item > .k-link
{
    /* remove default styles Kendo provides */
    font-family: Segoe UI,Verdana,Helvetica,Sans-Serif;
    display: block;
    position: relative;
    font-size: 0.93em;
    border-bottom-style: none; /* next 3 lines remove line separator */
    border-bottom-width: 0px;
    border-bottom-color: transparent;
    padding-left: 2px;
    line-height: normal;
    text-decoration: none;
    zoom: 1;
    white-space: nowrap;
    background-image: none; /* get rid of image kendo uses to diminish highlight color of selected item */
    color: #000000;         /* overwrite default grey color */   
    background-color: #ffffff;
}

The next area to restyle is the actions: hover and selected. When the item is hovered over in an html <SELECT> element, there is no change in background color or text color. In order to reproduce that for the Kendo control, change the “.k-state-hover:hover” style for the items.

#panelbar .k-state-hover:hover
{
   /* control the colors when item is hovered  */ 
   background-color: #ffffff;
   color: #000000;
}

Now that all the Kendo styling has been ripped out, the html <SELECT> element styling for the select element needs to be added back for the list items.

#panelbar .k-item > .k-state-selected
{
    /* control the colors when item is selected  */ 
    background-image: none; /* stop Kendo diffuser */
    color: #ffffff;
    background-color: Red;
}

In order to get the element’s box outline, add a border to the containing element. In this example, the containing element’s HTML is:

<ul id="panelbar"> 
</ul>

And the css to restyle the border is:

#panelbar
{
    border: 1px solid #000000; /* simple black border */
}

Demo Page (Index)

On the demo page, you will see three boxes. The first is an html <SELECT> with only enough styling to make it conform to the height, width, and page position for the demo. The second box is the CSS styled <UL> element using the Kendo panel bar control. The third box is the Kendo panel bar control with the default styling.

 

 

JavaScript (selectDDL.js)

The JavaScript is straightforward. The data is returned from the server then bound to the html elements (<SELECT> or <UL>) with knockout.js. After that, the Kendo panel bar control is attached to the html element. The click event for the middle box’s <LI> element grabs the <LI>’s text and places it into a <DIV> right below – just so you see something happen.

Since the Kendo Panel Bar doesn’t have to do much, except look pretty, the configuration of the control is minimal:

// Add control 
$("#panelbar").kendoPanelBar({
    expandMode: "single"
});

The right-most control shows all the items by default. That isn’t the expected behavior of an html <SELECT>element. In order to shorten the displayed items, and have the middle box to behave more like an html <SELECT>, the element is styled in jQuery after the Kendo control is attached to the <UL> element:

// size the control to not overflow box
$('#panelbar').css('overflow-x', 'hidden');

Download

The complete working Visual Studio 2010 project can be found on GitHub.

 

Summary

Restyling the Kendo Panel Bar to behave as an html <SELECT> element took very few changes to the css and JavaScript.