I'm trying to figure out if it is possible to use a custom html template for displaying kendo legends. I couldn't find a way to inject a "ng-template" item inside kendo-chart-legend. I am looking for a solution similar to

<kendo-chart-series-item-tooltip>

    <ng-template let-category="category" let-value="value"> {{ category | translate }} : {{ value | kendoNumber:'p2' }} </ng-template>

</kendo-chart-series-item-tooltip>

I wonder if it is possible to make it with legends as well. By the way, jQuery plugin has "legend.labels.template" but it seems that it is not for html templates.

https://stackblitz.com/edit/angular-bjwgmd?file=app/app.component.ts

The position property of the axis titles only allows positioning along its axis. Is there a way to have in the chart linked above, the axis titles appear off the chart? For instance, for the x-axis title to be positioned at the bottom of the y-axis (and vice versa)?

I'm aware of the padding property but this would require updating each time the chart is resized.

Hi,

I'm using the Drawer component as a navigation menu widget. When I try to lay out content in the kendo-drawer-content area the content is correctly rendered except when it is a layout component; then styling simply breaks. For example, grids are rendered correctly but cards, steppers, tabstrips, panelbars, etc. lose their structure/styling (see Stackblitz: https://stackblitz.com/edit/kendo-drawer-component-ehlmsd for some examples).

Am I doing something wrong or is this a bug?

Thanks in advance for your assistance.

Hi there,

We are using Kendo Grid with our Angular 10 website and are grouping our header columns using  the <kendo-grid-column-group> element. I would love to get your guidance for how to set the kendo-grid-column-group headerStyle attribute from a separate .scss file rather than embedded in the .html file itself. 

We have the styling we want specified using the following logic in our html file:

<kendo-grid-column-group
      title="My column header"
      [locked]="false"
      [headerStyle]="{'background-color': '#e0e0e0', 'text-align': 'center' ,'color': '#000000','line-height': '1em'}">

The above logic works great. THE PROBLEM:  we want to move the header styling into a global .scss file so that any future grouped headers will by default have this styling. Unfortunately, when the styling is replaced with a class from our .scss file (even the local component .scss file), it doesn't register the styling anymore.

For example, the logic below doesn't add in the styling in my html:

<kendo-grid-column-group title="My column header"  [locked]="false"  [headerStyle]="{'groupedColumnsStyle': true}">

with the corresponding styling in the .scss file:

.groupedColumnsStyle{
  background-color: #e0e0e0 !important;
  text-align: center !important;
  color: #000000 !important;
  line-height: 1em !important;
}

I have done all the obvious checks: 

In the local component .scss file, it imports correctly, and styles from other elements on the same html page can be updated. I also tried to just use the [headerClass] but I was unable to update the styling using the above methods either. However, I cannot figure out how to use a class to reference styling for the grouped header column. Any guidance you provide would be greatly appreciated! 

Thx!

I am looking to build a requirement as shown in the picture (kendo-filter-custom.png) where user can have ability to use Text filter to search with different search options or use multi-select checkbox with search.

I am seeing options to have either one but not both.

Can anyone suggest way we accomplish this?

Also I am looking for any suggestion to show popup filter when custom is selected from Text Filter. shown in the picture (kendo-filter-custom-popup.png)

In my combobox while filtering it highlights the option considering the 'startWith' operator while I want to highlight the first option that comes after filtering using the 'contains' operator. 

I tried using kendoDropDownFilter directive and provided DropDownFilterSettings object to it as below

Html:

<kendo-combobox 
                [data]="items | async"
                [textField]="'name'"
                [valueField]="'id'"
                [valuePrimitive]="true"
                (valueChange)="valueChange($event)"
                [filterable]="true"
                (filterChange)="onFilter($event)"
                [kendoDropDownFilter]="filterSettings"
                (close)="$event.preventDefault()">

component.ts 

public filterSettings: DropDownFilterSettings = {
        caseSensitive: false,
        operator: 'contains'
    };

But this is not working.

I have implemented Kendo-grid pagination in my angular site. 

It seems working fine by functionality. I am facing issue items per page dropdown UI difference.

It does not render same as it is given in the demo on telerik site.

I did not find any solution yet why the dropdown skin is different.

Hi ,

I want to be able to add an icon to the selected rows (preferably in the command column). But, the icon should be added only on button click. And I need the icon to stay even if I unselect the row.

I hope you get the picture.

Thanks,

Jubin