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?
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"
}
}
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
We are attempting to create automated Selenium web driver based tests of our KendoReact based web application. Our tester is attempting to find one of the options to select using Selenium, and there does not seem to be any <option> entries available to select from in the DOM. How can we accomplish this, and via which element selector can we use?
Thanks,
Jim
SKF USA, Inc.
Hello guys,
Our company want to buy your library a KendoReact. We had investigated all functionalities which we planning to use and found one problem when we add a grouping and frozen columns to one grid. Unfortunally I didn't find possibility to freeze grouping headers before first freeze column. For fully understandable I attached two files.
Please provide information - How can we do it?
hi
I have an Hierarchy Data Sructure in my API, I'm using that API with Kendo react react treelist , now the tree list is working fine but i can't get the data from last index position, now I'm able to only get the index position, how can i get the data from my API.
Example below:
- Item 1
- Sub Item
+ Inner Sub Item
+ Item 2
+ Item 3
+ item 4
my question is how can i get the Inner Sub Item from the Treelist :)
Hi,
I am using AutoComplete with the below code:
<AutoComplete
data={this.state.DataSet2.map(item => item.name)}
/>
It is working and I need to pass id of the selected text to backend, where Dataset2 contains both id and name. But here just getting the text.
Regards
Hii,
I'm using kendo inline editing feature in our grid.
This is the code for enabling the inline editing in a particular row
enterEdit = (dataItem) => {
this.setState({
data: this.state.data.map(item =>
item.ProductID === dataItem.ProductID ?
{ ...item, inEdit: true } : item
)
});
}
In this code actually we are looping the entire records right?? So my question is if i have 10000 records will i face a performance issue?