Questions on Kendo UI for Angular Forum

0 answers

193 views

Kendo Combo Box disabled on enter key press

Hey Team,

We are facing one issue while using the kendo UI Combo box in Reactive forms (@progress/kendo-angular-dropdowns v13.0.3). When we type some value which is not in the list and press enter then the combo box gets disabled and value also gets cleared. The value change method is also not called. We have allowCustom and valuePrimitive true as well.

If the value typed is available in dropdown then it remains as is on enter key press.

Please help us in resolving this.

Thanks

ComboBox

asked on 17 Jun 2024

5 answers

729 views

Custom Filter Menu with Popup

Hello, I need to create custom filter menu for my grid with two datepickers - similar to this example.
My constructor looks like this:

constructor(private element: ElementRef, private popupService: SinglePopupService) {

...

}

I inject the SinglePopupService as shown in the StackBlitz example, in order to be able to prevent closing the datepicker popup, but it's not working - I'm getting the following error:

NullInjectorError: R3InjectorError(MyLazyLoadedModule)[SinglePopupService -> SinglePopupService -> SinglePopupService -> SinglePopupService]: NullInjectorError: No provider for SinglePopupService!

I'm using this functionality in a lazy loaded module of my app, but I have the GridModule as well as the DateInputsModule imported.

Could you please help me with this?

Grid

answered on 13 Jun 2024

0 answers

62 views

Kendo Treeview Indeterminate vs Checked States While Filtered

I'm not sure if this is expected behavior, but there seems to be an inconsistency with checked keys. When you filter a treeview and select a parent, the parent is added to checked keys along with any visible children. It seems to make more sense to only add the children to checked keys and to set the parent to indeterminate, as this is the behavior you'd expect without the filter applied. Below, are two screenshots - one after filtering and selecting, another after just selecting a child without filtering. Please let me know if this is something that will be addressed in a future release or if my team needs to write custom logic in our application for handling the checked and indeterminate keys.

CheckBox

TreeView

asked on 13 Jun 2024

0 answers

156 views

Lost on how to use SCSS, themes, palettes.

I was asked to upgrade an Angular app from 8 to 17. And I upgraded to Kendo-Angular 16. I am pretty much an Angular newbie. I got the authentication working, and the data is coming, but the styling is gone. Right now this code is throwing the error "undefined variable".

@use '@angular/material' as mat;
@include mat.core();
$kendo-um-primary: mat-palette($green-palette);

With a red squiggly underlining $green-palette. The old code was:

@import '~@angular/material/theming';
@include mat-core();
$kendo-um-primary: mat-palette($mat-indigo);

The only theme files I see in my new package.json are:

"@progress/kendo-theme-bootstrap": "^8.0.1",

"@progress/kendo-theme-default": "^8.0.1",

"@angular/material": "~17.3.10",

ColorPalette

Styling

asked on 12 Jun 2024

1 answer

78 views

All data in one column

Hi everyone,

I am trying to turn my Keno grid from this (first picture attached) to this (second picture attached). I am new to Kendo, so I am not sure if this is even possible to combine these three data points together in one column.

Thank you!

Grid

answered on 11 Jun 2024

2 answers

214 views

Digital Accessibility Issues when using kendo grid in angular

Hi there,

Recently we started working on accessibility issues on angular 15 app Currently we are using the below version for kendo grid.

"@progress/kendo-angular-grid": "^4.7.0",

And we are facing some issues from kendo grid and wanted to check if these get sorted out if the kendo grid version is updated to higher versions. And if so, please suggest the version no..
Please find the attached issues.

---------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------
Please check the issues and let us know how I can sort out my issues.

Accessibility

Grid

updated answer on 11 Jun 2024

0 answers

131 views

Refused to load the stylesheet - changing style color based on different environments

I am using default-ocean-blue as my default theme and based on the environment I need to change it to default-turquoise.
I used CDN links to add the initial default theme in index.html.

But I am getting error as below:
"Refused to load the stylesheet 'https://kendo.cdn.telerik.com/themes/7.2.1/default/default-ocean-blue.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback."

Is there any way to fix it. I don't want to use CDN approach. So can this be fixed using precompiled css or compile themes from SCSS source files?

Requirement is to change the theme color dynamically from ocean-blue to default-turquoise when user is in different environments like production , development & local.

so it should dynamically load the css based on the environment.

General Discussions

Styling

updated question on 11 Jun 2024

1 answer

131 views

Kendo UI for Angular - Chart Sorting

Hello,

Is it possible to provide sorting capability to chart? In the basic example of Bar chart here https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bar/ If I wanted to sort based on unit sorts, highest to lowest or lowest to highest. for simplicity we can ignore multiple bar for Q1.... Qn

Thanks

Charts

answered on 11 Jun 2024

0 answers

143 views

Kendo-switch is not working after update kendo-input to 10.1.2

ANGULAR VERSION 12.0.4
kendo-angular-input 10.1.2

I'm using angular-kendo but when i update my package and after that I found some styling related issue with angular numeric textbox and with kendo-switch although I fixed numeric textbox issue with some mannual style but still not able to fix kendo-switch

Previous Output before package update:-

After package update:-

I

<ng-container
                      *ngIf="field.Type === 'switch' && (field.Condition || field.Condition === undefined) && !field.Hidden">
                      <ng-container *ngIf="field.Flag === null">
                        <div style="padding-top: 10%; width: 100%;" class="text-center">
                          <kendo-switch [checked]="LatestField(field.ID)" [title]="((field.Tooltip!='undefined' && field.Tooltip!=undefined && field.Tooltip!=null)?field.Tooltip:'')"
                            (valueChange)="SetVChangesCheckboxValue(field.ID, $event, field.LegacyBoolInt)"
                            [id]="ModelID + '_' + field.ID" [attr.cypress]="ModelID + '_' + field.ID"></kendo-switch>
                          &nbsp;
                          <span style="color: rgba(0,0,0,0.38);">
                            {{ LabelForFieldId(field.ID) }} {{ LatestField(field.ID) ? 'Enabled' : 'Disabled' }}
                          </span>
                        </div>
                      </ng-container>
                      <!-- <input  type="checkbox"> and FLAG based -->
                      <ng-container *ngIf="field.Flag">
                        <div style="padding-top:10%; width: 100%;" class="text-center">
                          <kendo-switch [checked]="flags && flags[field.ID]" [title]="((field.Tooltip!='undefined' && field.Tooltip!=undefined && field.Tooltip!=null)?field.Tooltip:'')"
                            (valueChange)="EmitFlagChanged({ 'id': field.ID, 'value': $event })"
                            [id]="ModelID + '_' + field.ID" [attr.cypress]="ModelID + '_' + field.ID"></kendo-switch>
                          &nbsp;
                          <span *ngIf="flags" style="color: rgba(0,0,0,0.38);">
                            {{ LabelForFieldId(field.ID) }} {{ flags[field.ID] ? 'Enabled' : 'Disabled' }}
                          </span>
                        </div>
                      </ng-container>
                    </ng-container>

Thanku any help is appreciated

Switch

asked on 10 Jun 2024

0 answers

74 views

Column specific filter

I have a requirement in our kendo angular application, we have 6 columns in a kendo grid where we are using kendo filter. So the requirement is when i filter a particular column, only that particular column should display filtered values rest of the 5 columns should display the entire data as it is. Is it possible to implement using kendo filter ? Please help me with a quick solution as it is a P1, Thanks in advance !

Filter

General Discussions

Grid

asked on 10 Jun 2024