Telerik Forums
Kendo UI for Angular Forum
1 answer
53 views

Hi,

We need advice on how to add "id" and "for" reference attributes to custom angular components and associated kendo labels.

 

We use custom controls, that implement the ControlValueAccessor interface. We would like to use them with associated kendo-labels.

There is a good documentation here:

https://www.telerik.com/kendo-angular-ui/components/labels/label/association#other-angular-components

However it is not sufficient for our case. We need to keep WCAG conformity (level AA), means, the Html label element and the Html input element should be connected by attributes for and id, e.g.:

<label for="someId">Input here</label>
<input id="someId">

With standard kendo label and kendo input controls, these reference attributes for the inner Html elements are added by some kendo magic.
This however does not work if the kendo input control is wrapped in a component.
The accessability testing tools (e.g. WAVE, AInspector) mark this as an error.

Can someone propose a solution, on how to get the proper attributes onto the Html elements, or does anyone know a good and usable workaround (final ressort would be to set aria-label to the inner input element ...).

I attach a codesandbox  link which extends the kendo documentation mentioned above, and a screenshot with WAVE test result for the code snippet.

Thank you in advance.

https://codesandbox.io/p/sandbox/exciting-water-s8hp6k

 

Martin Bechev
Telerik team
 answered on 26 Mar 2025
1 answer
75 views

How can I adjust the background colour display on column charts to match the behaviour of line charts, where the colour spans the entire width of the value? Currently, the background colour on column charts only covers the width of the column itself. Is there a way to extend it to cover the full width of the value, similar to line charts?

Line chart


Column chart

Yanmario
Telerik team
 answered on 23 May 2024
1 answer
126 views

Need sample source code in Angular 14 UI like below format Kendo Chart.

Present is in jQuery, but instead of jQuery using angular 14 UI support source code.

https://docs.telerik.com/kendo-ui/knowledge-base/display-time-on-value-axis#solution

Martin Bechev
Telerik team
 answered on 07 Feb 2023
0 answers
3.3K+ views

Hi!

I searched the forum but found no answer. I have several controls in the form, each one inserted according to the scheme:

      <div fxFlex="30">
        <kendo-formfield [orientation]="'horizontal'">
          <kendo-label text="Rodzaj przewozów">
            <kendo-dropdownlist #transportTypeDropdown class="transport-type" [data]="transportTypes"
              [textField]="'name'" [valueField]="'id'" [formControlName]="formNames.transportType"
              [(value)]="formModel.transportType" [disabled]="areControlsDisabled">
            </kendo-dropdownlist>
          </kendo-label>
          <app-form-error [controlName]="formNames.transportType" [form]="form"></app-form-error>
        </kendo-formfield>
      </div>
      <div fxFlex="10">
        <kendo-formfield [orientation]="'horizontal'">
          <kendo-label text="wyszukaj bez trasy">
            <input type="checkbox" #searchWithoutRouteCheckbox class="search-without-route-type"
              [formControlName]="formNames.searchWithoutRoute" [value]="formModel.searchWithoutRoute" kendoCheckBox
              [disabled]="areControlsDisabled" />
          </kendo-label>
          <app-form-error [controlName]="formNames.searchWithoutRoute" [form]="form"></app-form-error>
        </kendo-formfield>
      </div>
      <div fxFlex="10">
        <kendo-formfield [orientation]="'horizontal'">
          <kendo-label text="Przes. kal. 2">
            <kendo-dropdownlist #calendarShiftDropdown class="calendar-shift" [data]="calendarShiftItems"
              [textField]="'text'" [valueField]="'value'" [formControlName]="formNames.calendarShift"
              [valuePrimitive]="true" [(value)]="formModel.calendarShift" [disabled]="areControlsDisabled">
            </kendo-dropdownlist>
          </kendo-label>
          <app-form-error [controlName]="formNames.calendarShift" [form]="form"></app-form-error>
        </kendo-formfield>
      </div>

 

and I get errors in the console:

The `kendo-formfield` component should contain only one control of type NgControl with a formControlName

AFAIS there's no doubled controls in formfield. In other form I have simmilar controls and getting no errors and I'm stuck on this issue. What I'm doing wrong?


Robert
Top achievements
Rank 2
 updated question on 07 Oct 2022
1 answer
429 views

Hi, we are looking for the input, dropdowns which has this outline design in the material theme but we are not able to find it. 

 

It'd have been better if we have this.

 

something like this https://codepen.io/finnhvman/pen/xyOORQ

 

Thanks.

1 answer
431 views

hi,

How do I display the auto generated percent value as label in the bars?

I have a bar chart with [stack]="{ type: '100%' }". I would like to display the percentage as label in the bar (like in attached pic).

I tried label component but getting the value displayed rather calculated percentage. 

<kendo-chart-series-item-labels format="{0:P}" position="center">


Here's the code:

https://stackblitz.com/edit/angular-ivy-n9xwdr?file=src%2Fapp%2Fapp.component.html

Hetali
Telerik team
 answered on 06 Sep 2022
0 answers
75 views

I've got a bar chart and I would like to display different label than value, but I don't know how to do it. Tried with [name] property for the <kendo-chart-series-item>, but that does not work - it just show the legend next to chart itself, and I'd like to keep label on the bar. 

My code:

<kendo-chart-series>
        <kendo-chart-series-item
            *ngFor="let item of series"
            [data]="item.data" // <--- array of numbers, I'd like to replace number with string
            [type]="item.type"
            [color]="item.color"
            [border]="{
                width: 0
            }"
        >
            <kendo-chart-series-item-labels
                [background]="item.background || 'rgba(255, 255, 255, 0.5)'"
                [position]="item.labelPosition"
                [visible]="!!item.labelPosition"
            ></kendo-chart-series-item-labels>
        </kendo-chart-series-item>
    </kendo-chart-series>
EDIT: sorry for stupid title, some edition fail occured...
Konrad
Top achievements
Rank 1
 updated question on 24 Jun 2022
1 answer
337 views

Hello

I have a question. On click of a label, I want my kendo numeric textbox to have focus, but it is not working. Following is my code.

<label for="kid">Currency</label>

<kendo-numerictextbox
  [attr.id]="'kid'"
  [format]="formatOptions"
  [min]="min"
  [max]="max"
  [step]="step"
  [autoCorrect]="true"  
  [spinners]="false"
  [formControl]="control"
  [changeValueOnScroll]="false"
>
</kendo-numerictextbox>

Issue is because, at the run time kendo generates a random ID, and appends that ID to the input box(.k-input) , instead of appending the id given by the user as above. This is causing the issue and focus is not set on input box when clicking in label. Could you please check it and suggest a solution.

"@progress/kendo-angular-inputs": "^9.0.0",

 

Thank you

Hetali
Telerik team
 answered on 08 Jun 2022
0 answers
89 views
I'm trying to get multiple label per item on Kendo Column chart
Desired layout looks like on the first attached image.

I was able to get only this layout
import { Component } from '@angular/core';
import { groupBy, GroupResult } from '@progress/kendo-data-query';
import { ValueAxisLabels } from '@progress/kendo-angular-charts';

export type TrendItem = {
  clientName: string;
  periodName: string;
  income: number;
};

@Component({
  selector: 'my-app',
  template: `
        <kendo-chart>
          <kendo-chart-category-axis>
              <kendo-chart-category-axis-item [categories]="categories">
              </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>

          <kendo-chart-value-axis>
              <kendo-chart-value-axis-item [labels]="valueAxisLabels">
              </kendo-chart-value-axis-item>
          </kendo-chart-value-axis>

          <kendo-chart-series>
            <kendo-chart-series-item *ngFor="let groupedResult of groupedTrendsByPeriod" [data]="groupedResult.items" field="income" type="column">
              <kendo-chart-series-item-labels [content]="labelVisual">
              </kendo-chart-series-item-labels>
           </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `,
})
export class AppComponent {
  public valueAxisLabels: ValueAxisLabels = {
    font: 'bold 16px Arial, sans-serif',
  };

  public trendItems: TrendItem[] = [
    {
      clientName: 'Client1',
      periodName: 'Q1 2020',
      income: 20,
    },
    {
      clientName: 'Client1',
      periodName: 'Q2 2020',
      income: 15,
    },
    {
      clientName: 'Client1',
      periodName: 'Q3 2020',
      income: 35,
    },
    {
      clientName: 'Client1',
      periodName: 'Q4 2020',
      income: 40,
    },
    {
      clientName: 'Client2',
      periodName: 'Q1 2020',
      income: 15,
    },
    {
      clientName: 'Client2',
      periodName: 'Q2 2020',
      income: 20,
    },
    {
      clientName: 'Client2',
      periodName: 'Q3 2020',
      income: 15,
    },
    {
      clientName: 'Client2',
      periodName: 'Q4 2020',
      income: 30,
    }
  ];

  public categories = (groupBy(this.trendItems, [{ field: 'clientName' }]) as GroupResult[])
    .map((e) => e.value);

  public groupedTrendsByPeriod = groupBy(this.trendItems, [{ field: 'periodName' }]) as GroupResult[];

  public labelVisual(e: { dataItem: TrendItem }) {
    return `$${e.dataItem.income}\r\n${e.dataItem.periodName}`;
  }
}
You can try this code here.

My current result look like on the second attached image.

So my question is how to display multiple labels per item like on the first picture?

My current obstacles.

 - I didn't find a way to add multiple `<kendo-chart-series-item-labels>` elements. Only one will be rendered, rest will be ignored.
 - I didn't find a way to position labels below column chart. For column chart it's only possible to use "center", "insideBase", "insideEnd", "outsideEnd" options (according to API Reference) but none of them gives me desired position.

I asked this question on Stack Overflow as well.
Vadim
Top achievements
Rank 1
 asked on 23 Dec 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?