Unplanned
Last Updated: 19 Aug 2022 11:08 by ADMIN

Just as a first note, the documentation on how to write a custom `messagesMap` function for use in the `Pager` component is extremely vague. Without access to the KendoReact source code, it would have been near impossible.

First request: on the `GridProps` API page, the `pager` prop is defined as being the type "null" or `ComponentType<PagerProps>`. Please convert the text "ComponentType<PagerProps>" into a link to the `PagerProps` page. This will greatly aid in quickly linking to the appropriate documentation.

Second request (and the bulk of the feature request): please make (at least) the pager-related constants and default messages (string templates) available to consuming components. As of v5.4.0 of `@progress/kendo-react-data-tools`, the constants are exported from {kendo-react-private}/packages/datatools/src/messages/index.ts and they are consumed within the `Pager` (and subcomponents), but are not re-exported.

Not having access to the pager-related constants (`pagerInfo`, `pagerFirstPage`, `pagerPreviousPage`, `pagerNextPage`, `pagerLastPage`, `pagerItemPerPage`, `pagerPage`, `pagerOf` and `pagerTotalPages`) means it's a complete shot in the dark at how to write an override function to supply as the `messagesMap` prop. Not only that, but without access to the pager-related default messages (string templates) and given the way the `Pager`'s `render` method is written, we are unable to change just one or just a couple messages; we have to address all nine.

Right now in v5.4.0, the way the `Pager`'s `render` method is written, it simply checks to see if `messagesMap` is non-null (lines 214 through 223 of Pager.tsx, lines 38-43 of PagerInput.tsx and lines 36 and 37 of PagerPageSizes.tsx). This means that if we pass in a custom function for `messagesMap`, the custom function will be used to evaluate the message/string-template for `pagerFirstPage`, `pagerPreviousPage`, `pagerNextPage`, `pagerLastPage`, `pagerInfo`, `pagerPage`, `pagerOf`, `pagerTotalPages` and `pagerItemPerPage` (just in those three, aforementioned files). This means that we have to somehow know that `pagerInfo`, for example, will come through to the custom function as the string "pager.info" or that `pagerPage` will come through as "pager.page" so that the custom function knows which `messageKey` it's being passed so it can send out the object with the appropriate message/string-template as the object's `defaultMessage` property.

Instead, if the pager-related constants and default messages were exposed, we could very easily write a custom `messagesMap` function that could address any number of the nine default messages.

As an example, the Telerik/Kendo default string template for `pagerInfo` is "{0} - {1} of {2} items" that could be better scoped to the type of data the grid shows. Let's say the grid displays products and we'd like the pager to show "Displaying products 5 - 10 of 302" in the bottom right. If the pager-related constants and messages were exposed, this becomes a very simple task while not disturbing all other Telerik/Kendo default messages:

import React from 'react';
import { Grid, GridColumn, GridNoRecords, GridColumnMenuFilter } from '@progress/kendo-react-grid';
import { pagerInfo, pagerOf, messages as defaultPagerMessages, Pager } from '@progress/kendo-react-data-tools';

export default function MyComponent() {
    const customMessagesMap = messageKey  => {
        switch (messageKey) {
            case pagerInfo: return { messageKey, defaultMessage: 'Displaying products {0} - {1} of {2}' };
            default: return { messageKey, defaultMessage: defaultPagerMessages[messageKey] };
        }
    };

    const CustomPager = () => (
        <Pager
            skip={...}
            take={...}
            total={...}
            buttonCount={...}
            type="numeric"
            info={true}
            pageSizes={[...]}
            messagesMap={customMessagesMap}
    );

    return (
        <div className='my-component'>
            <Grid data={[...]} pager={CustomPager}>
                <GridColumn ... />
            </Grid>
        </div>
    );
};
The ability to override the string-templates used by the Grid Pager has been made very easy, and is well-documented, in the other Kendo frameworks (UI for jQuery, UI for Angular and UI for ASP.NET MVC). We're struggling to understand why it seems to be such a "black box" in KendoReact.
Unplanned
Last Updated: 19 Aug 2022 07:32 by ADMIN
Hi, currently component Pager (https://www.telerik.com/kendo-react-ui/components/datatools/pager/) doesn't allow to display text before dropdown.

Pager now:

What i want to achieve:

Will you consider supporting such an option in the future? 
Unplanned
Last Updated: 18 Aug 2022 16:17 by ADMIN

Allow the Grid to update its data without remounting the whole component, so the current selection of the filtering menu would be persisted.

We have scenarios where the data is constantly updating the filter selection is lost if the Grid is updated before pressing the `Filter` button.

 

Declined
Last Updated: 18 Aug 2022 12:28 by ADMIN

Test Environment:

OS: Windows_11
Version: 21H2
OS Build: 22000.795

Browser: Version 103.0.1264.71 (Official Build) (64-bit)

Prerequisite steps:

1. Go to system settings.

2. Navigate to 'Accessibility' and activate it.

3. Navigate to 'Contrast theme' and activate it.

4. Select 'Desert/Aquatic' High Contrast theme in the combo box.

 

Repro Steps:

1. Open given URL https://canvasjs.com/docs/charts/chart-options/axisx/viewport-minimum/ in Edge.

2. Graph page will be open. 

3. Turn on High contrast theme. 

4. Verify that Graphs are not adapting high contrast Aquatic and Desert modes or not. 

 

Actual Behavior:

Graphs are not adapting high contrast Aquatic and Desert modes. They remain same as in normal mode.  

 

Expected Behavior:

 Graphs should adapt high contrast Aquatic and Desert modes as defined. All elements should adapt to respective modes properly. 

Unplanned
Last Updated: 16 Aug 2022 09:17 by ADMIN
the ExternalDropZone component can only drag and drop files, but people usually think it's also clickable. 
Need More Info
Last Updated: 14 Aug 2022 12:07 by ADMIN

Test Environment:

OS: Windows_11
Version: 21H2
OS Build: 22000.795
Browser: Version 103.0.1264.71 (Official Build) (64-bit)

URL: https://agentcalendardevone.azurewebsites.net/SMBEntryForm.aspx?trg=testteam&campaign=Microsoft%20Internal%20Test%20Camapign

Screen Reader: NVDA (2021.3)

Repro Steps:

1. Open URL: SMB Scheduler (agentcalendardevone.azurewebsites.net) page in Edge Browser.

2. Provide valid 'Email address' in text field and activate 'Book New Appointment'.
3. Click on view Available Appointments.
4. Open NVDA.
5.Navigate and activate 'Calendar' icon where popup appears.
6.Naviagte to controls.

7. Observe an issue that Incorrect role 'link' is defined on button controls.

Actual Behavior:

Incorrect role 'link' is defined on button controls present on 'Calendar' popup.

Expected Behavior:

In this case, the expected role is {button}. All components need a proper role attribute, ideally with semantics. In rare cases a role attribute should be added to give full context and information to assistive technology. Learn more by reading about when to use an aria role and the html/aria role mappings.


Need More Info
Last Updated: 14 Aug 2022 12:06 by ADMIN
Created by: eDAD
Comments: 1
Type: Bug Report
0

Build Dates & Run Dates range picker don't highlight days

Pre-Requisites (if any)
1. Go to system settings.
2. Navigate to 'Accessibility' and activate it.
3. Navigate to 'Contrast theme' and activate it.
4. Select 'Desert/Aquatic' High Contrast theme in the combo box.

Repro-Steps:

1. Open URL PowerGates Graph in Edge Dev.
2. Navigate to Build Date dropdown button using tab key and activate it.
3. Navigate to the ‘Within range ’calendar picker button and activate it.
4. Observe that issue.

Actual Result:

The Build Dates & Run Dates range picker both don't highlight the currently selected date does not outline the current date, as it does without contrast. Occurs in both Aquatic (High Contrast Black) and Desert (High Contrast White) modes.

Expected Result:
The current selected date should be highlighted, and today's date should be outlined.

User Impact:
If any image, icon, hyperlink, text or visual focus disappear when high contrast mode is enabled, will make the UI confusing and difficult for users with low vision to navigate easily to the desired element.
Need More Info
Last Updated: 14 Aug 2022 12:04 by ADMIN
Created by: eDAD
Comments: 1
Type: Bug Report
0

Incorrect role as link is defined for header controls of 'Branches' table.

Repro-Steps:

1. Open given URL DiskSnapshotDiff Graph in Edge Dev.
2. Enable Narrator using 'Ctrl+ Win + Enter' key.
3. Navigate to header controls present on the 'Branches' table using Tab key.
4. Verify that incorrect role as link is defined for header controls of 'Branches' table or not.
Actual Result:
Incorrect role as link is defined for header controls of 'Branches' table.

It is functioning as a button. On activating the header control filter is activating.

Expected Result:
Correct role as 'Button' is defined for header controls of 'Branches' table.

User Impact:
Screen reader user will be impacted if incorrect role is defined. It will confuse screen reader user for its functionality.
Need More Info
Last Updated: 14 Aug 2022 12:02 by ADMIN
Created by: eDAD
Comments: 1
Type: Bug Report
0

After applying filter or page number, the table content gets changed but the screen reader didn't inform about the same.

Repro-Steps:

  1. Open the WPG - Home URL in browser.
  2. Now, navigate to table in table in scan mode.
  3. Observe the issue.

 

Actual Result:

After performing below action's, the table content gets changed but the narrator didn't announce about the content change:

  • After applying filter (any), if data shown as well as if no content found.
  • After selecting page no.

Expected Result:
The narrator should announce about change in the data table as soon as the filter applied, or page get changed.


User Impact:

Users who rely on screen readers are getting confused if the focus lands on the icon and only announces link without announcing the name of the link.
Need More Info
Last Updated: 14 Aug 2022 12:01 by ADMIN

Environment Details:
OS: Windows11 version 21H2 (OS build 22000.856)
Edge Browser version: 
104.0.1293.47

Repro steps:
1. Open Code Pen: https://codepen.io/m1mrt/pen/VwXjEzJ page in Edge Browser.2. Run Axe dev tools3. Observe an issue that select element has an accessible name.

Actual Result:Select element does not have an accessible name.

Expected Result:
All components need an accessible name, ideally using semantic elements and attributes. In rare cases, aria-label or aria-labelled by may be needed to alter the name.

Screenshot attachment:

Need More Info
Last Updated: 14 Aug 2022 12:00 by ADMIN

Test Environment:

OS: Windows_11
Version: 21H2
OS Build: 22000.795
Browser: Version 103.0.1264.71 (Official Build) (64-bit)

URL: https://agentcalendardevone.azurewebsites.net/SMBEntryForm.aspx?trg=testteam&campaign=Microsoft%20Internal%20Test%20Camapign

Repro Steps:

'Month' control on 'Calendar' popup not accessible using keyboard.
1. Open URL: SMB Scheduler (agentcalendardevone.azurewebsites.netpage in Edge Browser.
 
2. Provide valid 'Email address' in text field and activate 'Book New Appointment'.
3. Select 'Appointment' tab in header.
4. Navigate and activate 'Calendar' icon where popup opens.
5. Try to navigate and activate 'Month' control.

6. Observe an issue that 'Month' control on 'Calendar' popup is not accessible using keyboard.

'Click to book' and header controls are not accessible using keyboard.

1. Open URL: SMB Scheduler (agentcalendardevone.azurewebsites.net) page in Edge Browser.

2. Provide valid 'Email address' in text field and activate 'Book New Appointment'.

3. Select any 'Time Zone' in dropdown and click 'View Available appointments' button.

4. Navigate to the table content.

5. Observe the issue that the controls in the table such as ("<", ">", "Today", calendar widget, "Week", "Click to the book") does not receive keyboard focus.

Actual Behavior:

'Month' Control on 'Calendar' popup is not accessible using keyboard.

Expected Behavior:

Control(s) must be accessible to Bluetooth keyboards and other assistive technology. Common causes of this problem include a) the element does not have a proper role assigned, b) the element needs tab-index="0" attribute to be focusable, or c) the component is not registering key presses.

 

Unplanned
Last Updated: 12 Aug 2022 08:33 by ADMIN

Hello,

I would like this feature https://docs.telerik.com/kendo-ui/knowledge-base/add-event-programatically?_ga=2.240140043.929456162.1660247660-2049658922.1660247660 to be available in KendoReact.

1. I need to be able to open the "create a new appointment dialog" from the scheduler programmatically.
2. Additionally, opening an existing event programmatically would also be a requirement.

The use case for #2 is so I can open an event directly from a link (e.g. use query params with an eventId, load it into the scheduler, and then open the edit dialog; all programmatically).

 

Thanks!

Unplanned
Last Updated: 11 Aug 2022 08:37 by ADMIN
Created by: Ryan
Comments: 1
Type: Feature Request
1
The Filter component does not contain a disabled prop like most other input-related components. I'm trying to disable sections of a form page and I can disable everything, using the existing disabled prop on various input component, except for the Filter component.
Unplanned
Last Updated: 11 Aug 2022 08:18 by ADMIN

Currently when viewing the scheduler timeline view on tablet/mobile, in order to scroll the timeline back and forward you need to drag on an empty part of timeline. If the drag is started on an event then you are unable to scroll.

Would it be possible to make it so that if editing was disabled that dragging an event would scroll the timeline?

Unplanned
Last Updated: 11 Aug 2022 08:14 by ADMIN
Created by: Revanth
Comments: 1
Type: Feature Request
0

scroll pagination is available in ListView but item selection is not there and in other side item selection is available in ListBox but scroll pagination is not availed, 

we have mostly very common and frequent requirement user can select a item from a big data list, where we need pagination to improve component performance.

this only we can achieve only if ListBox supports scroll pagination

Won't Fix
Last Updated: 09 Aug 2022 07:28 by ADMIN

StackBlitz example: https://stackblitz.com/edit/react-vg8pu5?file=app/main.jsx

 

If you have a Form <Field component={Input}> inside an <ExpansionPanel>, if you press space or enter within the input, the expansion panel also receives the key event and will expand/collapse. It seems like these key events should not bubble out of the Field component.

Completed
Last Updated: 08 Aug 2022 10:29 by ADMIN
Created by: Arifullah
Comments: 1
Type: Feature Request
0

Is It Possible to Add Persian Datetime format In Datetime Picker

 

 

Thanks

Won't Fix
Last Updated: 31 Jul 2022 07:23 by ADMIN

In the Checkbox onChange callback, event.nativeEvent.target.checked seems to be set differently depending on whether the input was toggled by mouse click or by pressing space.

After clicking on the Checkbox, event.value and event.nativeEvent.target.checked will have the same value, consistent with the Checkbox's new state.

After pressing space with the Checkbox focused, event.value and event.nativeEvent.target.checked will have different values, with event.value containing the Checkbox's new state and event.nativeEvent.target.checked containing the Checkbox's old state.

I would expect event.nativeEvent.target.checked to be set the same way regardless of whether I am toggling the Checkbox with mouse or keyboard.  Furthermore, I would expect event.value and event.nativeEvent.target.checked to always be equal to each other.

I made a code sandbox to demonstrate the bug here: https://codesandbox.io/s/kendo-react-checkbox-bug-26f7ur

Under Review
Last Updated: 30 Jul 2022 09:08 by ADMIN

We are currently passing a React.Node which contains both text and custom icons to the DropDownButton text property. The automatically generated aria-label of the DropDownButton returns [object Object] instead of any recognizable text.

Steps to Reproduce:

  • Create a DropDownButton with text property set to a React.Node - eg:
<DropDownButton text={<div>test text</div>}>
  • Inspect the DropDownButton aria-label value using the developer console

Expected Result:

aria-label contains the text inside the React.Node

aria-label="test text dropdownbutton"

Actual Result:

aria-label contains [object Object]

aria-label="[object Object] dropdownbutton"

 

Unplanned
Last Updated: 27 Jul 2022 09:30 by ADMIN

The current grouping implementation renders the resources in each parent group, making duplicates.

The request is for providing an option for grouping resources by adding child items to a specific parent item only (without duplicating them in each group). The UI could be something similar to the following (with collapse/expand functionality):

1 2 3 4 5 6