Telerik Forums
Kendo UI for Angular Forum
2 answers
47 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
21 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
15 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
17 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
13 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
14 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
20 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
18 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
1 answer
16 views
I have the code below. The column titled "Hair Color" shows the value properly. However "Hair Color2", which uses a template, does not. Note that both versions of "Last Name" work fine. So the issue appears to be something to do with using a template and a nested field. How can I make this work?

Here is a StackBlitz demonstrating the issue: https://stackblitz.com/edit/angular-phpipy-9tnfas?file=src%2Fapp%2Fapp.component.ts

 

<kendo-grid [data]="data">

  <kendo-grid-column field="id" title="id"></kendo-grid-column>
  <kendo-grid-column field="firstName" title="First Name"></kendo-grid-column>
  <kendo-grid-column field="lastName" title="Last Name"></kendo-grid-column>
  <kendo-grid-column field="hair.color" title="Hair Color"></kendo-grid-column>

  <kendo-grid-column title="Last Name2">
    <ng-template kendoGridCellTemplate let-dataItem>
      {{ dataItem['lastName'] }}
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column title="Hair Color2">
    <ng-template kendoGridCellTemplate let-dataItem>
      {{ dataItem['hair.color'] }}
    </ng-template>
  </kendo-grid-column>

</kendo-grid>

 

  data = [

    {
      "id"101,
      "firstName""Abbi",
      "lastName""Jones",
      "email""ajones123@aol.com",
      "correctiveLens"false,
      "hair": { "color""Blond""type""Curly" },
      "birthdate""2/23/1981",
      "startTime""8:15 PM"
    },
    {
      "id"1,
      "firstName""Terry",
      "lastName""Medhurst",
      "email""atuny0@sohu.com",
      "correctiveLens"true,
      "hair": { "color""Black""type""Strands" },
      "birthdate""12/1/1981",
      "startTime""12:05 AM"
    },
    {
      "id"2,
      "firstName""Sheldon",
      "lastName""Quigley",
      "email""hbingley1@plala.or.jp",
      "correctiveLens"false,
      "hair": { "color""Blond""type""Curly" },
      "birthdate""12/1/1981",
      "startTime""12:00 AM"
    },
    {
      "id"3,
      "firstName""Terrill",
      "lastName""Hills",
      "email""rshawe2@51.la",
      "correctiveLens"true,
      "hair": { "color""Blond""type""Very curly" },
      "birthdate""12/1/1981",
      "startTime""12:00 AM"
    }
  ];

Martin Bechev
Telerik team
 answered on 04 Jun 2024
1 answer
12 views

We have a map tile layer and are trying to show the growth of our locations by programmatically adding makers to the array used by the bubble layer on a timed interval.  And it "works" but every time we update the array of markers, the entire map redraws or flashes or something.  Is that avoidable?  In the code below displayMarkers() is a computed signal that returns an array of markers depending on where we are in the chronological progression.

    <kendo-map-layers>
      <kendo-map-tile-layer #tileLayer [subdomains]="tileSubdomains" [urlTemplate]="tileUrl"
        attribution="&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>">
      </kendo-map-tile-layer>
      <kendo-map-bubble-layer #markerLayer [data]="displayMarkers()" locationField="latlng" valueField="size"
        [symbol]="vanguardSymbol"></kendo-map-bubble-layer>
    </kendo-map-layers>
Martin Bechev
Telerik team
 answered on 04 Jun 2024
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?