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. 

Can I set an end time for the weekly schedule view?

In one of the projects I'm working on, I need to set these parameters because shifts in the calendar start and end are non-standard.

As an example: Set the day start and end time to 6:00 am every day from 25/12/2022 to 31/12/2022.

This is what I am trying to do, but it doesn't work.

https://stackblitz.com/edit/angular-krup2a

This is generated with this code snippet:

            <kendo-multiselect
              [checkboxes]="true"
              [autoClose]="false"
              [data]="listItems"
              [clearButton]="false"
              formControlName="referenceType"
              #multiselect
              [style.width.px]="350"
              textField="name"
              valueField="id"
              [itemDisabled]="itemDisabled"
            >
            </kendo-multiselect>

I'd like to remove the X clear icon.  Is this possible?

Hello

I have a grid cell with filter set to menu. So the popup appears with the list of default operators that are needed to be included in the popup.

Something like below:

<ng-template
  kendoGridFilterMenuTemplate
  ...
>
  <kendo-grid-numeric-filter-menu
   ...
  >
    <kendo-filter-eq-operator> </kendo-filter-eq-operator>
    <kendo-filter-neq-operator> </kendo-filter-neq-operator>
    <kendo-filter-gte-operator> </kendo-filter-gte-operator>
    <kendo-filter-lte-operator> </kendo-filter-lte-operator>
    <kendo-filter-isnull-operator> </kendo-filter-isnull-operator>
    <kendo-filter-isnotnull-operator> </kendo-filter-isnotnull-operator>
  </kendo-grid-numeric-filter-menu>

</ng-template>
 
What i am trying to achieve is to add another operator like 'In' that can accept comma separated values.
I have looked at the doc (https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-row/#toc-custom-filter-row-components/)
But i dont see a custom filter operator example. 
Could you please let me know if its possible to do that or is there anyway i can achieve this.
 
Thanks
SM
  

See this example:
https://stackblitz.com/edit/angular-7nulmk?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts,package.json

- When the icon is clicked, the row in the treelist is not selected.

- When k-icon class is removed from the span, it works: selection is updated

Hi,

I am facing a case like this:
Source: https://stackblitz.com/edit/angular-v6xzlw-vrqmxj
I am using kendo grid.
The data displayed on the grid is ok but when exporting excel, the data is missing.
I've been trying to find a way for a few days but still can't solve it.
Please support.

Thanks!

I have the following pdf-export-component: 

<div class="hidden-export">
  <kendo-pdf-export #pdf paperSize="A4" [margin]="margins" [scale]="scale">
    <div *ngIf="printInvoice">
      <app-printinvoice [invoice]="printInvoice"></app-printinvoice>
    </div>
  </kendo-pdf-export>
</div>

where hidden-export just renders off the screen and app-printinvoice is a simple component that renders the provide invoice  I also have a grid of invoices with selectablerows and this button:

<button kendoButton [disabled]="selectedInvoiceNums.length === 0" (click)="emailInvoices(pdf)">Email Invoice</button>

which fires this method:

emailInvoices(pdfComponent: PDFExportComponent) {
    for (let invoice of this.selectedInvoices) {
      if (!invoice.email) {
        this.toasterService.warning(`${invoice.co} does not have an email.`, 'Email Missing');
        this.removeChangedInvoice(invoice.invoiceNumber);
      }
      else {
        this.printInvoice = invoice;
        pdfComponent.saveAs(`${this.printInvoice.co}.pdf`);
        pdfComponent.export().then((group: Group) => 
          exportPDF(group)).then((dataUri: string) => {
            const base64 = dataUri.split(';base64,')[1];
            this.invoiceService.emailInvoice(this.printInvoice!.invoiceNumber, base64).pipe(takeUntil(this.destroyed$)).subscribe(result => {
              if (!result.success)
                this.toasterService.error(`Failed to email invoice for ${invoice.co}: ${result.message}`, 'Email Error');
            });
          });
      }
    }
  }

these are rendering blank PDF's though it is setting the name of the pdf correctly so I know it is successfully changing printInvoice.  If I set printInvoice to the first Invoice of the grid on initialization then it will save that Invoice object every time through the for loop though with different names.  I can't figure out what I am missing.

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