How do I apply the following CSS to only the Parent nodes of a Kendo Tree View?


Tags: css,kendo-treeview

Problem :

I have this CSS class:

.relationshipsTree 
{
    display: inline;
    font-size: 10pt;
    text-decoration: none;
    /*cursor: hand;*/
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    filter: none;
    font-weight: bold;
    color: green;
    background-color: transparent;
}

And I want to use it on the parent nodes of this Kendo Tree View:

<div id="relationshipsTree"></div>

How do I go about doing this?

EDIT -

This is the .js file I'm using to create the tree. I added:

$('#relationshipsTree').parent().addClass('relationshipsTree');

Based on an answer here, however, it is still not working.

Whole file:

function CreateRelationshipsTree()
{
    var primaryContactId = 671;
    var personOrCompany = 'C';
    var rootMemberId = 0;

    var data = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "../api/relationships?primaryContactId=" + primaryContactId + "&personOrCompany=" + personOrCompany + "&rootMemberId=" + rootMemberId,
                contentType: "application/json"
            }
        },
        schema: {
            model: {
                hasChildren: "hasChildren",
                children: "Items"
            }
        }
    });

    $("#relationshipsTree").kendoTreeView({
        dataSource: data,
        loadOnDemand: true,
        dataUrlField: "LinksTo",
        dataTextField: ["Name", "Name"],
        select: treeviewSelect
    });

    function treeviewSelect(e) {
        var node = this.dataItem(e.node);
        window.open(node.NotificationLink, "_self");
    }

    $('#relationshipsTree').parent().addClass('relationshipsTree');
}

function RefreshProjectTree() {
    var treeView = $("#relationshipsTree").data("kendoTreeView");
    treeView.dataSource.read();
}


Solution :

Updated

I found that I have misunderstood your question. I think you want to select the DOM parent element while you want to select the parent node in the tree view. This is my updated answer.

Midify your handler a bit:

function treeviewSelect(e) {
  $('#relationshipsTree div').removeClass('relationshipsTree');
  $(e.node).parents('li').first().children('div').addClass('relationshipsTree');
  var node = this.dataItem(e.node);
  window.open(node.NotificationLink, "_self");

}

A demo updated here


    CSS Howto..

    How to make HTML pages print at a consistent size from Chrome?

    how to add css padding for button such that it is consistent with column width?

    How do I align text and an image vertically inside a DIV?

    How can I stop a CSS keyframe animation?

    How to start css and html

    How to darken a background using CSS?

    How to use numbers from a js file in the css sheet?

    How to have a background image wider than the content area of a website (without scrollbars)

    How to make Online iPhone “Card Game” with HTML5 [closed]

    Any ideas how to replicate this inline dropdown menu using css/jquery

    How to get rid of text form borders in Chrome and Firefox?

    How to remove gap in masonry?

    How Float divs like twitter?

    Scroll Bar not Fully show the value In Div

    how to fit the background image to the containing anchor element?

    How to create table by using div

    How to make the css asset follow a certain order in symfony2 projetcs

    jQuery Accordion header with jQuery UI icon button (hide/show + hover/click)

    how to change css for a seletor when the selector doesn't exist javascript / jquery

    How can i achieve this style in Html/Css?

    How to add padding to 100% div in Bootstrap?

    How to combine multiple css framework with overpalling classes

    How to arrange two html buttons horizontally in a single line with equal width by completely fills the screen size

    image carousel showing all images

    How do I style JUST the reflection of the content without affecting its original source?

    How to Assemble HTML,CSS and JS with EachOther

    How to write Text in css like show in images?

    How to get length of elements with a certain css attribute?

    How to same element with unique XPath/CSS selector by both ID and Class?

    How to make text appears alitter above using html and css