CODEWITHSUNDEEP
htmlcsskendo-uikendo-grid
Zach B
Zach B

Reputation: 534

Adding focus styles to Kendo UI grid?

Working to improve the accessibility of a site using the Kendo UI grid.

Experiencing challenges adding a style to a grid tile with all the style inheritance that is built into Kendo UI.

Does anyone know how to change the focus style of anchor tags (or any HTML elements for that matter) in the Kendo UI grid?

Example - I'd like to add this style to grid items:

a:focus { outline: #FF0000 dotted medium; }

Upvotes: 0

Views: 1445

Answers (3)

Shayne Trosdahl
Shayne Trosdahl

Reputation: 23

Depending on how your grid is setup...

Kendo adds a selected class to the element.

You can target that in the css with something like this. 

.k-state-selected{
    border: 1px dotted red !important;
}

You may not need the important if you have your css loaded last but it doesn't hurt to have it.

Upvotes: 0

OnaBai
OnaBai

Reputation: 40917

I guess that you are using a template for rendering a column as an HTML anchor, right?

You should have something like:

{ 
    field: "City", 
    width: 200, 
    template: "<a href='http://maps.google.com?q=#= City #'>#= City #</a>" 
}

If you do this and use the CSS:

a:focus { outline: #FF0000 dotted medium; }

It works! Check it here: http://jsfiddle.net/F5R7m/1/

Now the question is if you want to limit this style only to a grid so the anchor outside the grid does not get the same style. Then you might define the template as:

{ 
    field: "City", 
    width: 200, 
    template: "<a class='ob-grid' href='http://maps.google.com?q=#= City #'>#= City #</a>" 
}

and the CSS style as:

a.ob-grid:focus { 
    outline: #FF0000 dotted medium;
}

and you get it running as in this example: http://jsfiddle.net/F5R7m/2/

Or you can limit it to one single grid without changing the template by defining the CSS as:

#grid a:focus { 
    outline: #FF0000 dotted medium;
}

Where #grid refers to the id of your Kendo UI grid. Example here : http://jsfiddle.net/F5R7m/3/

And if you want it for every grid in your page, you can define you CSS as:

.k-grid a:focus { 
    outline: #FF0000 dotted medium;
}

Then any HTML anchor will have the red dotted line when it gains focus as in here : http://jsfiddle.net/F5R7m/5/

Upvotes: 1

Jonathan Buchanan
Jonathan Buchanan

Reputation: 878

You most likly just need to add the !important in your css.

I use the following JS to add a css class to the tr in a kendo Grid to color rows differently and for a highlighting effect (in this case by a td containing a specific word):

function setMessageColor(){
    $("#EventMessagesGrid tr td:contains('Nominal')").closest('tr').addClass("nominal-message");
    $("#EventMessagesGrid tr td:contains('Warning')").closest('tr').addClass("warning-message");
    $("#EventMessagesGrid tr td:contains('Failure')").closest('tr').addClass("failure-message");
}

With the css for these classes following this pattern:

.warning-message {
background-color: #fffdec !important;
}
.warning-message:hover {
    background-color: #fff9c2 !important;
}

Upvotes: 0

Related Questions