".k-" items??

[Bob]

Hi,

First, I hope this is the right place to post this, since it is my first post.

I am working with 2 TreeViews and I need to be able to expand and collapse each of them and search one of them.

I have found code on the web that works great, on the web, but I cannot get it to work in my app.

So, I am trying to troubleshoot why and it is really difficult because I do not know what ".k-" things are. I have search all through Telerik and StackOverflow and Googled till my eyes have bled, but cannot find any information on them.

Some, I can guess at, but others, I can't, as below:

• .k-treeview          Obviously the TreeView
• .k-item                I'm guessing the node on the TreeView
• .k-plus                A non-expanded node?
• .k-minus             An expanded node?
• .k-first                The first node of a tree level?
• .k-last, .k-bot     These seem to be the same - the last or bottom node of a tree level?
• .k-group            A level in a tree?
• .k-mid               A middle node in a tree level?
• .k-top               The top node of a tree level?
• .k-item .k-plus   I have no clue, since it seems to be 2 others combined, so what does it do?
• span.k-in          I have no clue

 So can someone tell me:

A)  Am I correct on the ones I have guessed at.

B)  For the ones that I have wrong or have no clue - what are they?

C)  Is there somewhere to find out what any other ".k-" things are? As you all know, the documentation for kendo is horrendous.

TIA,

Bob Mathis

[Dimo]

Hi Bob,

First of all, let me clarify the HTML output of a single TreeView item:

<li class="k-item">
  <div class="k-top">
    <span class="k-icon k-minus"></span>
    <span class="k-in"></span>
  </div>
  <ul class="k-group">...</ul>
</li>

- <li class="k-item"> element is the TreeView item (node).
- <div class="k-top | k-mid | k-bot"> element is the item's outer container. It also encloses the child group, if it exists
- <span class="k-icon k-plus | k-minus"> element is the expand/collapse icon
- <span class="k-in"> element is the item's inner container. It holds the item content and no child group


Here is the CSS class name information:

.k-plus              a non-expanded icon
.k-minus             an expanded icon
.k-first             the first root item of the treeview
.k-last              the last item of a given level
.k-bot               the outer container of the last item of a tree level
.k-group             an item group (level)
.k-mid               the outer container of a middle item of a tree level
.k-top               the outer container of the first item of a tree level
.k-item .k-plus      this is a descendant CSS selector, which targets non-expanded icons inside items
span.k-in            an item's inner content container

With regard to question (C), we have not invested time in documenting all Kendo UI widgets' CSS classes, but most of this information can be easily deduced by using a browser DOM inspector. CSS classes, which are reused by lots of widgets, are documented here:

http://docs.telerik.com/kendo-ui/web/appearance-styling#primitives

http://demos.telerik.com/kendo-ui/styling/icons (also see the other demos in this section)

Regards,
Dimo
Telerik