Questions on KendoReact Forum

1 answer

195 views

React Map Control - Google Maps or Bing Maps

Hey,

can i use google maps tile api or bing maps tile api with your https://www.telerik.com/kendo-react-ui/components/map/ ?

we search a good component which works with both (or three if you add openstreetmaps) maps. all customer have another mapsservice (bing, google or openstreet)

Do you have a example? And you dont have maps as tags ;)

Thank you for your reply

Drawer

Drawing

answered on 23 May 2023

1 answer

247 views

Grid is failing accessibility.

Issues reported in GitHub too. Grid is failing accessibility. · Issue #1575 · telerik/kendo-react (github.com)

During accessibility testing, there are 5 violations. The violations are:

aria-required-children in Grid itself.

And when add footerCell to only some of the columns, elements in .k-grid-footer have several violations

aria-allowed-attr in footer cell which column has no footerCell property.
- Path: .k-table-td[aria-colindex="1"][role="columnfooter"]
- Snippet: <td class="k-table-td" role="columnfooter" aria-selected="false" aria-colindex="1"></td>
- How to fix: ARIA attribute is not allowed: aria-selected="false"
aria-allowed-role in colgroup in footer.
- Path: .k-grid-footer-table > colgroup
- Snippet: <colgroup role="presentation">
- How to fix: ARIA role presentation is not allowed for given element
aria-roles in footer cell which column has no footerCell property.
- Path: .k-table-td[aria-colindex="1"][role="columnfooter"]
- Snippet: <td class="k-table-td" role="columnfooter" aria-selected="false" aria-colindex="1"></td>
- How to fix: Role must be one of the valid ARIA roles: columnfooter

In pagination, the pageSize selector also have a violation.

aria-input-field-name: I guess it's because the span element have an input type role, but didn't meet the needs of an input.
- Path: .k-pager-sizes > .k-dropdownlist.k-picker-solid[role="combobox"]
- Snippet: <span class="k-dropdownlist k-picker k-picker-md k-rounded-md k-picker-solid" tabindex="0" role="combobox" aria-required="false" aria-haspopup="listbox" aria-expanded="false" aria-owns="d22e899f-3cc6-49c4-a4d2-d6153e17a2f6" aria-describedby="ea34d15b-a71a-48fa-a95d-d773f6fcb50a">
- How to fix:
  - aria-label attribute does not exist or is empty
  - aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  - Element has no title attribute

Package version: "@progress/kendo-react-grid": "^5.11.0". By the way, I checked the changelog and there is no related update.

Thanks for your help.

Accessibility

Grid

Pager

answered on 23 May 2023

1 answer

70 views

How to set two values top and bottom in a chart

Hello.

It's a picture that I want to make.

I want the chart to show two values and one should be shown above the chart and the other should be shown below.

I tried using the stack chart, but it didn't work out the way I wanted it to.

Can you make it like a picture using Kendo?

Charts

answered on 22 May 2023

0 answers

175 views

GridColumnMenuCheckboxFilter Filter values with spaces

Hello Telerik Support Team,
is it possible to customize the filter values of a GridColumnMenuCheckboxFilter to include spaces in the rendering and then arrive in the backend without it.

Otherwise the assignment to the corresponding member does not work correctly in the backend and the filter then follows the convention "no spaces" in the FE, which leads to not nice display values.

Here is a screenshot of the described scenario:

Thanks in advance

Filter

Grid

updated question on 22 May 2023

0 answers

146 views

How to extend timeout in Kendo React UI for the POST method of saveurl

How to extend timeout for the POST axios method used for saving the file using saveURL in kendo React UI upload

Upload

asked on 19 May 2023

1 answer

151 views

How to add custom filter cell (ex: Dropdown) to a datagrid which contains all the other attributes like paging, sorting and filtering

Hi

I couldn't manage to add a custom filter cell (ex: Dropdown) to the example in the Local Data Operations page on Kendo React Components section which contains all the other table attributes together like paging, sorting and filtering as i need to use it like this.

How can i achive this?

Thanks in advance.

DropDownList

Grid

answered on 18 May 2023

1 answer

141 views

dispatchEvent Errors

I'm having this issue once again. See package.jons inline:

{
  "name": "web-parts-collaboration",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "1.7.1",
    "@microsoft/sp-lodash-subset": "1.7.1",
    "@microsoft/sp-office-ui-fabric-core": "1.7.1",
    "@microsoft/sp-webpart-base": "1.7.1",
    "@progress/kendo-data-query": "^1.5.2",
    "@progress/kendo-react-buttons": "^4.0.0",
    "@progress/kendo-react-dateinputs": "^4.0.0",
    "@progress/kendo-react-dialogs": "^4.1.0",
    "@progress/kendo-react-dropdowns": "^4.1.0",
    "@progress/kendo-react-grid": "^4.1.0",
    "@progress/kendo-react-inputs": "^4.0.0",
    "@progress/kendo-react-intl": "^4.0.0",
    "@progress/kendo-react-layout": "^3.3.0",
    "@progress/kendo-theme-default": "^4.2.0",
    "@types/es6-promise": "0.0.33",
    "@types/react-dom": "16.8.0",
    "@types/webpack-env": "1.13.1",
    "moment": "^2.24.0",
    "react": "^16.8.2",
    "react-dom": "^16.8.0",
    "typescript": "^2.4.1"
  },
  "resolutions": {
    "@types/react": "16.8.2"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "^1.7.1",
    "@microsoft/sp-module-interfaces": "1.7.1",
    "@microsoft/sp-tslint-rules": "1.7.1",
    "@microsoft/sp-webpart-workbench": "^1.7.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1"
  }
}

And here's the errors I'm receiving:

[11:01:07] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,252): error TS1005: ',' expected.
[11:01:07] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,268): error TS1005: '=' expected.
[11:01:07] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,278): error TS1005: ',' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,284): error TS1005: '=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,286): error TS1005: '>' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,295): error TS1005: '=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,303): error TS1005: '>' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,311): error TS1005: '=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,339): error TS1109: Expression expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,293): error TS1005: ',' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,309): error TS1005: '=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,319): error TS1005: ',' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,325): error TS1005: '=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,327): error TS1005: '>' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,336): error TS1005: '=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,344): error TS1005: '>' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,352): error TS1005: '=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,391): error TS1109: Expression expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,293): error TS1005: ',' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,309): error TS1005: '=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,319): error TS1005: ',' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,325): error TS1005: '=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,327): error TS1005: '>' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,336): error TS1005: '=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,344): error TS1005: '>' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,352): error TS1005: '=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,391): error TS1109: Expression expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,293): error TS1005: ',' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,309): error TS1005: '=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,319): error TS1005: ',' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,325): error TS1005: '=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,327): error TS1005: '>' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,336): error TS1005: '=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,344): error TS1005: '>' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,352): error TS1005: '=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,391): error TS1109: Expression expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,293): error TS1005: 
',' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,309): error TS1005: 
'=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,319): error TS1005: 
',' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,325): error TS1005: 
'=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,327): error TS1005: 
'>' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,336): error TS1005: 
'=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,344): error TS1005: 
'>' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,352): error TS1005: 
'=' expected.
[11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,391): error TS1109: 
Expression expected.
[11:01:08] Error - 'tsc' sub task errored after 6.04 s
 exited with code 2

Here is the contents of one of the dispatchEvents.d.ts files:

/// <reference types="react" />
import { BaseEvent } from './BaseEvent';
/**
 * @hidden
 * Dispatches a new event bsed on an event that was already internally dispatched to KendoReact users.
 *
 * @param eventHandler - The public event handler that is assigned by the user.
 * When undefined, the method is not an option.
 * @param dispatchedEvent - The event that was already dispatched internally.
 * @param target - The target component of the new event.
 * @param eventData - The additional data that will be passed through the new event.
 * When the new event has no additional data
 *  other than the `BaseEvent` arguments, pass `undefined`.
 */
export default function dispatchEvent<E extends BaseEvent<React.Component>>(eventHandler: ((event: E) => void) | undefined, dispatchedEvent: React.SyntheticEvent<any>, target: E['target'], eventData: Exclude<keyof E, keyof BaseEvent<React.Component>> extends never ? undefined : Pick<E, Exclude<keyof E, keyof BaseEvent<React.Component>>>): void;
//export declare function dispatchEvent<E extends BaseEvent<React.Component | FCHandle>, FCHandle = object>(eventHandler: ((event: E) => void) | undefined, dispatchedEvent: React.SyntheticEvent<any>, target: E['target'], eventData: Exclude<keyof E, keyof BaseEvent<React.Component | FCHandle>> extends never ? undefined : Pick<E, Exclude<keyof E, keyof BaseEvent<React.Component | FCHandle>>>): void;

I tried both "export" lines to no avail. Please advise as to what you think may be the issue. Thank you

General Discussions

answered on 18 May 2023

1 answer

227 views

Popover as a tooltip for scheduler items

Hi Team,

My goal is to add a popover whenever a user hover on a scheduler item. I was using kendo tooltip until now but now the requirement is to use html tags in the tooltip content plus the content can be large sometimes so obviously I cant put it over title of a parent div to get the content for the tooltip.

I have added a popover after <Scheduler> component and the content of this popover is coming from the <SchedulerItem> children prop. Im creating the content for the popover inside <SchedulerItem> and on onmouseenter Im setting the content of popover in the local state and then that local state is remdered inside the popover . Things are working as expected but the popover is not opening as tooltip, the position of the popover is random. I tried to use the currentTarget’s boundries to calculate the offset from left and top but still unable to make the position look like kendo tooltip. I am new to ref thing so it would be really helpful you can provide the code for class based components.

Note: Im calling the <SchedulerItem> as a function not as a seperate class. A functiom in the same class is returning <SchedulerItem>.

Scheduler

answered on 18 May 2023

1 answer

160 views

Scheduler Kendo React

Hi support team,

I am working Scheduler Kendo React. I am using custom form to insert/update data. I want to use recurrent event feature in my custom form. Current document only write about how to show occurrence event not about insert/update. Could you please guide me how I can add these components to my custom form and how to insert/update recurrent event for both mode(current occurrence / series) ?

Scheduler

answered on 18 May 2023

1 answer

189 views

setting the chart x-axis with date but skipping items that i don't hav

Hi, im a new to this filed, kindly bare my knowledge.

At my work, I am drawing the line chart with x-axis as a date.
But I would like to skip the labels that i do not have.
Is there a way? If so, would you kindly share the docs or samples that can help me?

Charts

updated answer on 18 May 2023