Telerik Forums
Kendo UI for Angular Forum
1 answer
107 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
108 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
61 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
93 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
57 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
57 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
83 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
64 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
1 answer
63 views
Good afternoon,
Does anyone know how to disable  <kendo-filter> control?
<kendo-filter [filters]="populationCriteriaFilters"
  [value]="initialValue" (valueChange)="onFilterChange($event)"> </kendo-filter>
I have it on the card and the card is disabled and I need to disable it as well.
Any help will be greatly appreciated.
Hetali
Telerik team
 answered on 31 May 2024
1 answer
100 views
I am using Kendo Angular grid and have a column containing multiple buttons. These buttons are custom angular components. I am using [navigable]="true". How can I make these buttons be part of the navigation?
 
Chris
Top achievements
Rank 1
 updated question on 31 May 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?