New to Kendo UI for jQuery? Download free 30-day trial

Keep the PanelBar Header Style Constant

Environment

Product Version 2019.3.1023
Product Progress® Kendo UI® PanelBar for jQuery

Description

How can I style the Header of the Kendo UI PanelBar such that its CSS property remains the same at all the states (focused, selected, hover)?

Solution

In order to keep the CSS property of the Kendo UI PanelBar Header constant regardless of its state, use either of the two approaches:

Approach 1

Set the CSS property of the following classes using a selector to add styling to a particular PanelBar:

  #panelbar.k-panelbar>.k-item>.k-link,
  #panelbar.k-panelbar>.k-item>.k-link .k-icon,
  #panelbar.k-panelbar>.k-item>.k-link:hover {
    background-color: blue;
    color: white;
    border-color: blue;
    box-shadow: none;
  }

Example

<style>
  #panelbar.k-panelbar>.k-item>.k-link,
  #panelbar.k-panelbar>.k-item>.k-link .k-icon,
  #panelbar.k-panelbar>.k-item>.k-link:hover {
    background-color: blue;
    color: white;
    border-color: blue;
    box-shadow: none;
  }
</style>

<div id="panelbar"></div> <br><br>
<div id="panelbar1"></div>

<script>
  $("#panelbar").kendoPanelBar({
    dataSource: [
      { text: "foo", items: [
        { text: "bar" },
        { text: "xyz" },
        { text: "abc" },
        { text: "pqr" }
      ] }
    ]
  });

  $("#panelbar1").kendoPanelBar({
    dataSource: [
      { text: "foo", items: [
        { text: "bar" },
        { text: "xyz" },
        { text: "abc" },
        { text: "pqr" }
      ] }
    ]
  });
</script>

OR

Approach 2

Set the CSS property of the following classes using 'div' to add styling globally:

  div.k-panelbar>.k-item>.k-link,
  div.k-panelbar>.k-item>.k-link .k-icon,
  div.k-panelbar>.k-item>.k-link:hover {
    background-color: blue;
    color: white;
    border-color: blue;
    box-shadow: none;
  }

Example

<style>
  div.k-panelbar>.k-item>.k-link,
  div.k-panelbar>.k-item>.k-link .k-icon,
  div.k-panelbar>.k-item>.k-link:hover {
    background-color: blue;
    color: white;
    border-color: blue;
    box-shadow: none;
  }
</style>

<div id="panelbar"></div> <br><br>
<div id="panelbar1"></div>

<script>
  $("#panelbar").kendoPanelBar({
    dataSource: [
      { text: "foo", items: [
        { text: "bar" },
        { text: "xyz" },
        { text: "abc" },
        { text: "pqr" }
      ] }
    ]
  });

  $("#panelbar1").kendoPanelBar({
    dataSource: [
      { text: "foo", items: [
        { text: "bar" },
        { text: "xyz" },
        { text: "abc" },
        { text: "pqr" }
      ] }
    ]
  });
</script>
In this article