Hi,

I set up a panelbar with collections:

<kendo-panelbar [items]="menuItems"> </kendo-panelbar>

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?