Hi there, I'm hoping that someone might be able to help me - at present we are utilising the default kendo UI for angular in our project.

However, I need to try and overwrite one specific component (the panelbar header and its selected styles).

I do not want this overwrite to affect other UI elements of the same kind - at present I have a local component file, a HTML file with the panelbar within and a SCSS attached to affect its styling. However, no amount of targeting is letting me overwrite the styles of the panel bar.

Ideally I just need the background to be transparent and text to be grey.

local.HTML

<div class="panelbar-wrapper">
    <kendo-panelbar>
        <kendo-panelbar-item 
        title="Record Control & Reply Bits" [expanded]="true">
            <ng-template kendoPanelBarContent>

</ng-template>
</kendo-panelbar-item>
</kendo-panelbar>
</div>

.k-panelbar .k-panelbar-item.k-panelbar-header.k-level-0 .k-link.k-selected{
        
         background-image: none !important;
         color: #303030 !important;
         background: transparent !important;
        
}
    .k-panelbar .k-panelbar-item.k-panelbar-header.k-level-0 .k-link{
        color: #303030 !important;
        
}    

Any help would be really appreciated. 

I'm trying to target a panel bar and overwrite the kendo default styling on the header for just this one specific component using a local SCSS file. Unfortunately, no level of targeting seems to affect the actual component on the page. At present the default UI theme is in place, I'm looking to implement the following styling if possible to make the background transparent and look as below:

Any help would be really appreciated!

local.html

local.scss

Hi Team,

I'm currently working with kendo grid and panel bar components using Angular. My application has multiple panel bars with each panel bar containing a kendo grid with Filter Menu options. My issue is such that while I try to use the filter in the first grid and then move on to the second grid and try to filter the options the filter menu automatically closes without filtering the values.

The feature works just fine when I'm handling filters in a single grid. The issue is when I try to use the filters with more than one grid on that page. Please assist.

Thank You.

I have a sidebar menu with a panelbar and i use the routerlink to navigate to components.

When i click a panelbar item the background changed - class k-state-selected was added. Can i prevent that?

I have a PanelBar with children. How can I make the children index an extra 3em so that the children are moved to the right and appear under the parent, offset by a bit.

Right now the children are directly below their parent.

        <kendo-panelbar-item title="Orders">
          <kendo-panelbar-item title="Upload Orders"></kendo-panelbar-item>
          <kendo-panelbar-item title="Batch Summary"></kendo-panelbar-item>
        </kendo-panelbar-item>

On selecting a panel bar item I am opening up a modal which in turn returns back a true or false.if true I am displaying the new item .if false I am staying on the previous item.but in case of false scenario even if I am staying at the previous item, as the next item was clicked ,the focused and selected property of that item is getting set to true and that of the previous item to false.how do I revert the selected and focused property if I don't display the itemcontent even if the user clicks on it.