As a end user I should be capable of assigning my own accessibility attributes. right now I could see that input automatically mapping area-describedby from hint component.
Please do the needful.
The TextBox component allows us to specify a template for the prefix and suffix areas by applying the TextBoxPrefixTemplate and TextBoxSufffixTemplate directives to an ng-template.
I would also like to able to specify a template for the actual input area itself.
My use case for this is that I have a directive that I use within my application that I would normally apply to the <input> tag to ensure some custom processing is undertaken during user input. With the current TextBox component I am unable to do this.
Additionally I would like to specify the autocomplete attribute for the <input> tag to alow the browser to autocomplete things such as shipping-address etc. or even to disable the browser autocomplete completely by setting this to "off". Again this is not possible with the current TextBox but would be easily achievable if I could specify the template for the input area.
If this was implemented as requested I would expect my angular HTML to look something like:
<kendo-textbox>
<ng-template kendoTextBoxPrefixTemplate>
<button kendoButton look="clear" icon="image"></button>
</ng-template>
<ng-template kendoTextBoxInputTemplate>
<input myDirective [autocomplete]="myValue" />
</ng-template>
<ng-template kendoTextBoxSuffixTemplate>
<kendo-textbox-separator></kendo-textbox-separator>
<button kendoButton fillMode="clear" icon="calendar"></button>
<kendo-icon name="bell"></kendo-icon>
</ng-template>
</kendo-textbox>
The DatePicker control for Angular has a hidden vertical scrollbar on the kendo-virtualization element, which is nested inside the kendo-calendar-navigation and kendo-calendar-viewlist elements. Though it is hidden from view, it is still clickable, and can obscure the selectable dates in the calendar. Clicking it results in activating the scrollbar, which will result in the navigation sidebar scrolling.
I have attached two screenshots to show the affected areas. Highlighted in red are the areas that when clicked will activate the sidebar scrollbar, and highlighted in blue is the area that will activate the calendar scrollbar, along with their respective elements in the DOM.
It appears the scrollbar is hidden from view via a combination of padding and margin settings from the css below:
.k-calendar .k-content.k-scrollable,
.k-calendar .k-calendar-content.k-scrollable {
box-sizing: content-box;
overflow-x: hidden;
overflow-y: auto;
display: block;
padding-right: 100px;
padding-left: 100px;
margin-left: -100px;
margin-right: -117px;
}
I am using Edge Version 105.0.1343.50
Tab Key: When you press the TAB key, the editor loses control of the focus. It is intended to give tab space rather than leave editor control. The indent space actually differs greatly from the tab space.
We are using placeholder like <span id="P_Name" name="P_Name">{P_Name}</span> . this would replace with the patient name on loading the editor.
we used the ContentEditable = false is not working for the span. Some important content such as patient information should be read-only.
attached the sample editor content , the below content are loading dynamically , so we should restrict user should not edit the conent.
when someone clicks on a date in the middle of the component, it will scroll the component instead of selecting the date.
This occurs in chrome and edge. In firefox this issue is not observed.
Steps:
1. Open a datepicker (https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/)
2. Hover over tuesday (bootstrap theme), between tuesday and wednesday in default theme.
3. Click on the date.
4. The component scrolls instead of selecting the date.
The cursor also changes from pointer to default. It seems another component is on top of the tuesday column.
https://stackblitz.com/edit/angular-e53ira?file=src/app/app.component.ts
If the popup is off-screen, it is simply cut off, unlike vertical which flips it to the other side.
Hi there,
we'd like to raise a change request in relation to column widths on grids:
https://www.telerik.com/kendo-angular-ui/components/grid/columns/width/
Currently, we can either set a fixed width on a column, or not set a width at all and leave it dynamic. Our problem is, that we have some columns that would benefit from additional space if it is available (e.g. on a larger screen), yet really suffer if they do not receive enough space.
When we give such a column a fixed size, we have to choose an amount that will still leave other columns enough space on smaller screens, and since it is fixed, is does not increase in size with larger screens.
If we don't set a fixed width, (or give all columns a fixed width), the available space will be distributed evenly/proportionally among the columns. So here, the columns do benefit from extra space, but the problem is that on smaller screens, they also can become too small to display the content.
We would like to be able to set a minimum width on columns. We imagine the behavior to be as follows:
If there are some columns with a fixed width and some with a min. width, and
Would like to have a carousel component for pictures or carousel-ing through templates
Something like this maybe: https://stackblitz.com/edit/ivycarousel-demo?file=src%2Fapp%2Fapp.component.ts
Issue description: While navigating through page number buttons Screen reader does not identify which page number is selected. Issue is observed with “Narrator” and “NVDA” as well
Test Environment:
Narrator (Windows 11), NVDA (Version: 2022.1)
Repro steps:
Actual results: While navigating through page number buttons Screen reader does not identify which page number is selected. Issue is observed with “Narrator” and “NVDA” as well
Expected results: While navigating through page number buttons screen reader should identify which page number is selected
Attachments: Attachments
Hi there,
It would be extremely useful to have some sort of global configuration for component settings / inputs.
For example: I want to remove animation from all of my dropdown lists.
This should be easier. The default workflow is to configure each and every instance of DropDownList using the component's input properties.
Less than ideal workarounds
Thank you.
Please find the below screenshot for your reference and help us
Thanks,
Rajkumar S
Hi
I've started using Filter component since your recent editorTemplate feature makes is more usable when it comes to selecting predefined list of values.
One problem with this is that majority of values for filterable fields are based on predefined list of values that we put in dropdown list.
So our component template has many repeated templates like this
</ng-template>
Writing these editor templates with handlers for valueChange that differs only in the source list and using onInit to set these as editorTemplate seems inefficient.
Our component ended up with mostly filter editor templates just in order to use filter component.
I am aware that this could be all done in markup but using filters property on Filter is more flexible as filters can be driven from server side.
It would be a good that FilterExpression type has some property like valuesListData: {text: string, value: any}[].so that dropdown get generated automatically.
I assume that picking from the dropdown is the mostly used scenario and would satisfy majority use cases.
So this is a feature request:
As a developer I would like to be able to set a list of objects on FilterExpression object so that Filter component create dropdown for value editor with the provided list.
Hello,
we are searching for two components that we don’t find in your ANGULAR Library.
These components are:
I have attached some print screens for existing components on the market...
Could you please check if there are any future/planned developments concerning these two components with Telerik?
Thank you in advance…
Select all checkbox provided in tree list module is not working as expected. Below are the detailed step to reproduce
To Reproduce
Scenario 1 :
Scenario 2 with pagination:
Scenario 3:
Expected behavior
Scenario 1:
The select all checkbox should be unchecked. Same as what provided in Grid module
Scenario 2:
The select all checkbox should be unchecked
Scenario 3:
The child node need to be checked
Hi,
Currently, it seems impossible to have a global search field that look up into a given number of columns.
The idea would be to: either have a bindable property (like "searchString"), either having just an option to activate a "global search"(and you would add the search component).
It would also be required to be able to provide a list of "fields" to search in.
Obviously, when the search string change, it should reset the paging.
It's something we have to implement again every time we use your Grid(and it's quite hard to make a wrapping component because there is a lot of things to customize. You can check how the global filter is implemented: PrimeNG (primefaces.org)
I have installed kendo-angular-layout package and after running the command npm start Im receiving the errors represented in the pictures.
Im not sure how to fix this?
Im not sure how to check my Kendo package version as well /
Hi
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",
I know to associate any Kendo UI component with the Label, template reference variable is the way to go.
<label [for]="numerictextbox">NumericTextBox: </label>
<kendo-numerictextbox #numerictextbox>
</kendo-numerictextbox>
But what if my label and input box are coming from different components, then this template ref variable approach would not work. So i would suggest kendo to use traditional ID approach to set the focus on input element.
Kendo can use HostBinding property from Angular , to remove ID from kendo-numerictextbox level, and adding the user supplied ID directly to inner input element.
@HostBinding('attr.id') _id = null; @Input() id?: string;
Thank You
https://www.telerik.com/kendo-angular-ui/components/scheduler/timezones/#toc-fixed-timezones
In the kendo scheduler fixed timezones are not working properly because it only takes the local time which on the browser and shows the local time only in kendo scheduler.
Not showing the fixed timezones depends upon the other country timezones.
we want some solution for set the fixed timezones.
Example: if browser time shows the india timezones locally but we want to show other country timezones which depends upon the country.