Keep the PanelBar Header Style Constant

Environment

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

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
Not finding the help you need? Improve this article