Hi,

I am Kamal Hinduja Based Geneva, Switzerland(Swiss)  . Can anyone explain What are the themes supported by Kendo UI for Angular?

Thanks, Regards

Kamal Hinduja  Geneva, Switzerland

Hi,
I use the kend dropdownlist with a attached kendo-label. However the "for" reference of the label is marked as invalid (at least by "AInspector" and "WAVE" Accessibility testing tools). 

Please see attached screen shots, where I tested against the first example from the kendo docs
( https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/dropdownlist/basic_usage?theme=default-ocean-blue-a11y )

DOM inspection of the example shows, that the label properly references the dropdownlist, also the aria-labelledby reference is correct:

<kendo-label text="Find restaurants in your area" dir="ltr"><!---->
  <label for="k-9997b5c1-2233-4273-ba25-6e344c093c3d" id="k-2a8d206c-3623-44ce-a03d-c8c097acc5a6">
  Find restaurants in your area<!----></label>
      <kendo-dropdownlist ... 
                      aria-describedby="k-80ee2bb7-41d8-4c8b-9afc-08898b371395"
                      id="k-9997b5c1-2233-4273-ba25-6e344c093c3d" ... aria-labelledby="k-2a8d206c-3623-44ce-a03d-c8c097acc5a6">
          <button ...>...</button>
            ...       

The problem could be, that the label references the <kendo-dropdownlist> tag itself, not the included button or other included elements.

According to HTML documentation , only "labelable elements" can be referenced by the "for" reference of a label (e.g. button, input, see labelable elements ).

My question is, how to deal with it, and how to explain the warnings to our customers...

Thank you in advance!

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

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

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

Hi!

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

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?

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.

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. 

Here's the code:

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

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>

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