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

Using the SASS build for Kendo Angular Material I wish to simply change the primary, secondary and accent colors for the entire theme and then download.

There is only a drop down to select a color palette, but no way to choose specific colors.

When I download the variables.scss, there aren't entries for these three colors.

Question: How do I edit the variables.scss to change these three colors?

I have a requirement to customize the kendo column and also needs to use Context Menu. 
I'm sharing screenshots of the demo I'm trying to implement.

When I right click on the kendo column (which is having the ng template )  content like Icon or data/text it doesn't work
But on the cell it works. 

Can you help me out in this ??

Hi,

When user enter only mm/dd, i need to show invalid date format error message. To do this i am trying to get the entered date value using valueChange() method. But valueChange() method only return date value if user enter mm/dd/yyyy like [12/12/2020]. When user enter partial value like [12/12/yyyy], it return null value. How can i get the partial date value?

Thanks