Telerik Forums
Kendo UI for Angular Forum
0 answers
22 views

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",

 

 

Gerard
Top achievements
Rank 1
 asked on 12 Jun 2024
1 answer
18 views

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!

 

Hetali
Telerik team
 answered on 11 Jun 2024
2 answers
48 views

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.

Vishnu Priyanka
Top achievements
Rank 1
Iron
 updated answer on 11 Jun 2024
0 answers
22 views
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.
Shahistha
Top achievements
Rank 1
 updated question on 11 Jun 2024
1 answer
17 views

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 

Martin Bechev
Telerik team
 answered on 11 Jun 2024
0 answers
19 views

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:-


<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

saurav
Top achievements
Rank 1
 asked on 10 Jun 2024
0 answers
14 views
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 !
Rachana
Top achievements
Rank 1
 asked on 10 Jun 2024
0 answers
15 views

In my project I have many tooltips for displaying different things. But I want to change the CSS properties of one tooltip in particular which will not affect the other tooltips. How to do it ,the method mentioned in the document doesn't seem to work.

<div kendoTooltip tooltipClass="my-class">

.my-class *{

color:black;

}

Mathangi
Top achievements
Rank 1
 asked on 07 Jun 2024
2 answers
21 views

Using a Point object created with its constructor as the moveTo for a path fails when built for production but works when debugging.

    const moveTo: Point = new Point(x, y);
    path
      .moveTo(moveTo)
      .lineTo(moveTo.x + offsets[0].x, moveTo.y + offsets[0].y)
      .lineTo(moveTo.x + offsets[1].x, moveTo.y + offsets[1].y)
      .lineTo(moveTo.x + offsets[2].x, moveTo.y + offsets[2].y)
      .lineTo(moveTo)
      .fill('red');

 

If I use the code above, that path will draw just fine when built with development settings, but if I build the app for production it fails with NaN errors on the paths SVG Move step.  (the error has SVG that looks like 'M Nan')

however, if I just use the X and Y coordinates, it works... the following works in production.  I don't know if it's a bug or I'm doing something wrong, but the fact that it works in a dev build, but not an optimized production build makes me think it's a bug.

    path
      .moveTo(moveTo.x, moveTo.y)

 

Martin Bechev
Telerik team
 answered on 06 Jun 2024
1 answer
19 views

Hello,

I have a treeview and a editService as a directive/datasource. Anyway the nodeDrop called twice. Have u any idea why nodeDrop is called twice. Best regards Nico

   

this.treeview.nodeDrop.subscribe(x=>console.log(x));

 

Nico
Top achievements
Rank 1
Iron
 answered on 05 Jun 2024
Top users last month
Michael
Top achievements
Rank 1
Iron
Wilfred
Top achievements
Rank 1
Alexander
Top achievements
Rank 2
Iron
Iron
Matthew
Top achievements
Rank 1
Iron
ibra
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?