Questions on KendoReact Forum

1 answer

242 views

[Solved] Legend with Bubble/Scatter Chart

I am unable to get a legend to show when using the Bubble or Scatter chart types.

I can't see a reason why it would not work, but I do not see any examples of those charts with legends, and I have not had any luck getting it to work.

General Discussions

answered on 17 Dec 2019

3 answers

879 views

Custom rowRender Locked Columns

I'm in need of a grid where each row has cells with a rowspan. So that the final two or three cells are split into two rows.

Here's an example I've done using rowRender.
https://stackblitz.com/edit/react-hwvage?file=app/main.jsx

I've got the layout I want however I lose the ability to sort, lock columns etc. Is there a better way to accomplish what I'm trying to do?

Thanks!

General Discussions

answered on 16 Dec 2019

3 answers

625 views

Table of Contents/page detection on Kendo React PDF Export

I know there has been some talk about generating a table of contents in PDF exports-- has anybody figured out a way where each section can figure out what page it is on and generate a TOC from there? Using with drawDOM.

General Discussions

answered on 12 Dec 2019

1 answer

630 views

Ability to change field when using Grid Column Menu custom filter

Hello,

Is there a way to change the field value that is sent to the filtering logic within a grid when using either firstFilterProps or secondFilterProps .onChange events? I can update the operator and value but can't pass in a custom value or operator object.

So for example this causes an error

const value = {value: e.target.value, field: test.field}

firstFilterProps.onChange({

value,

operator: firstFilterProps.operator,

syntheticEvent: e.syntheticEvent

})

For example, there are two dropdown list components and an input component. The first dropdown list values are the filter operators (contains, is equal to, etc). The second dropdown list values are dynamically driven db fields (test.field, test.anotherfield, etc). The input is the value that the user wants to search.

So is there a way to either pass in that second dropdown list value as another key in the firstFilterProps/secondFilterProps object that goes to filtering OR a way to change the field value.

firstFilterProps.onChange({

value,

operator: firstFilterProps.operator,

syntheticEvent: e.syntheticEvent,

field: test.field

});

General Discussions

answered on 09 Dec 2019

3 answers

195 views

Override input boxes of datetime picker for calendar.

Is there any method to override the default input box of the kendo calendar and replace it by custom input box and open calendar on click of it, other method than defaultInput prop preffered.

Wrappers for React

answered on 05 Dec 2019

1 answer

414 views

Kendo React Dialog Body not showing

https://stackblitz.com/edit/react-tpvpcq

hi..

I had a problem here to accessing the kendo react dialog body from another page. i tried may way to access that think, but unlikely failed :(

I have two pages in my project, one is DialogTriggerPage.js and another one is DialogBodyPage.js, in this case dialog body page working as a parent component and dialog trigger page working as child component. How it's possible?

General Discussions

answered on 05 Dec 2019

6 answers

3.1K+ views

How to change expand/collapse icon on a master row of a grid?

I'm looking at this example: https://www.telerik.com/kendo-react-ui/components/grid/advanced-features/hierarchy that uses "k-plus" and " k-minus" classes to show appropriate state of the row. How possible is it to change those classes to other ones (e.g "k-i-arrow-chevron-right" and "k-i-arrow-chevron-down" respectively)?

Thanks.

Wrappers for React

answered on 04 Dec 2019

18 answers

764 views

spfx kendo react

Just wondering if there are any examples that I can download that have spfx and kendo built in.

I would like to use the kendo react libraries in my sharepoint web part. At the moment I am just using the following example to test the dropdown list.
Data and Value Binding

While its working fine in my local workbench when I go to the hosted workbench it doesn't work. When I click on the dropdown it disappears and I get the following :

Uncaught TypeError: Cannot set property 'getCurrentStack' of undefined at setCurrentDebugStack (react-dom-server.browser.development.js:1794) at ReactDOMServerRenderer.read (react-dom-server.browser.development.js:2304) at Object.renderToStaticMarkup (react-dom-server.browser.development.js:2689) at Popup.calculatePosition (Popup.js:167) at Popup.render (Popup.js:119)

import * as React from 'react';

import styles from './AddNewSample.module.scss';

import { IAddNewContractProps } from './IAddNewSampleProps';

import { escape } from '@microsoft/sp-lodash-subset';

import { AutoComplete, ComboBox, DropDownList, MultiSelect } from '@progress/kendo-react-dropdowns';

import { IntlProvider, load } from '@progress/kendo-react-intl';

import '@progress/kendo-theme-default/dist/all.css';

export default class AddNewSample extends React.Component<IAddNewSampleProps, {}> {

sports = [

{ text: 'Basketball', id: 1 },

{ text: 'Football', id: 2 },

{ text: 'Tennis', id: 3 },

{ text: 'Volleyball', id: 4 }

];

state = {

value: { text: 'Football', id: 2 }

};

handleChange = (event) => {

this.setState({

value: event.target.value

});

}

public render(): React.ReactElement<IAddNewSampleProps> {

return (

<div >

<div className="example-config">

Selected Value: {JSON.stringify(this.state.value)}

</div>

<DropDownList

data={this.sports}

textField="text"

dataItemKey="id"

value={this.state.value}

onChange={this.handleChange}

/>

</div>

);

}

Package Versions

{

"name": "add-Sample",

"version": "0.0.1",

"private": true,

"engines": {

"node": ">=0.10.0"

},

"scripts": {

"build": "gulp bundle",

"clean": "gulp clean",

"test": "gulp test"

},

"dependencies": {

"@progress/kendo-react-dropdowns": "^2.6.1",

"@progress/kendo-react-intl": "^2.6.1",

"@progress/kendo-theme-default": "^3.3.1",

"@microsoft/loader-set-webpack-public-path": "^3.2.102",

"@microsoft/sp-core-library": "1.7.0",

"@microsoft/sp-lodash-subset": "1.7.0",

"@microsoft/sp-office-ui-fabric-core": "1.7.0",

"@microsoft/sp-webpart-base": "1.7.0",

"@pnp/common": "^1.2.5",

"@pnp/graph": "^1.2.5",

"@pnp/logging": "^1.2.5",

"@pnp/odata": "^1.2.5",

"@pnp/sp": "^1.2.5",

"@pnp/spfx-controls-react": "1.10.0",

"@pnp/spfx-property-controls": "1.12.0",

"@types/es6-promise": "0.0.33",

"@types/react": "16.4.2",

"@types/react-dom": "16.0.5",

"@types/webpack-env": "1.13.1",

"moment": "^2.22.2",

"react": "16.3.2",

"react-dom": "16.3.2"

},

"resolutions": {

"@types/react": "16.4.2"

},

"devDependencies": {

"@microsoft/set-webpack-public-path-plugin": "^2.1.58",

"@microsoft/sp-build-web": "1.7.0",

"@microsoft/sp-module-interfaces": "1.7.0",

"@microsoft/sp-tslint-rules": "1.7.0",

"@microsoft/sp-webpart-workbench": "1.7.0",

"@types/chai": "3.4.34",

"@types/mocha": "2.2.38",

"ajv": "~5.2.2",

"gulp": "~3.9.1"

}

General Discussions

answered on 03 Dec 2019

2 answers

789 views

[Solved] Kendo React TreeView Expand not Working

https://stackblitz.com/edit/kendotreeviewedit?file=index.js

i had a problem about expanding and collapsing the data on my treeview, am sharing my code with this discussion. The problem is i have child data in my treeview that not collapsing, only the parent data was working correctly. On that project Item2 is my parent data and item2.1 and item2.1.1 are my child data, that child data's expand are not working. how can i solve that issue

General Discussions

answered on 03 Dec 2019

1 answer

1.1K+ views

DatePicker onBlur

I am using a DatePicker control and need to handle the onBlur event, to run some logic when the user finishes changing the value (eg manually typing in a new date). The onChange event fires with every keystroke, so it isn't suitable for my requirement. The onBlur however doesn't seem to be firing correctly. Is this the expected behaviour? If so, what work around can one use?

General Discussions

answered on 03 Dec 2019