Questions on KendoReact Forum

1 answer

161 views

Font/Size dropdown display problems in Editor

Hi Sir/Madam,

I try to use Kendo UI Editor for React, and it works fine generally. But there is one problem: when I select the font as Arial, and then try to select another one from the drop down, the dropdown list appear in the left top page. It seems that same problem appears for all dropdown on the editor toolbar (e.g. font, font size, format, ...).

What may cause this problem?

Wrappers for React

answered on 30 Jul 2018

4 answers

239 views

Returning selected items from a MultiSelect

I'm trying to utilise the MultiSelect wrapper inside the Kendo Dialog component. I've been following the demos and reading the documentation and have set up a MultiSelect that gets data from an external source and displays it correctly. I now want to be able to pass the values that the user has selected back to the parent (Dialog) component and I'm not sure how to do so. I've read that there is a dataItems method that would retrieve what I need but I'm not sure how to access this in react, I can't find any examples to help.
Here is my component code:

class ChildQuestions extends React.Component {

constructor(props) {

super(props);

this.dataSource = new kendo.data.DataSource({

data: props.data

})

this.values= props.value

this.placeholder = "Enter a question text..."

}

render() {

return (

<div className="row">

<div className="col-xs-12 col-sm-6 example-col">

<MultiSelect

dataSource={this.dataSource}

placeholder={this.placeholder}

dataTextField={"Text"}

dataValueField={"id"}

value={this.values}

/>

</div>

);

}

export default ChildQuestions;

If you could provide some example code or any guidance that would be greatly appreciated!

Wrappers for React

answered on 26 Jul 2018

2 answers

82 views

Using a popup in grid cell and forceUpdate loses position

I want to show a grid for my custom editor with sorting functionality. I'm able to use Popup and reference the grid row td. Since GridCell isn't generic I can't define my own state so I've resorted to using class properties to store the data & sort order instead. This works but the grid isn't re-rendered on sort unless i .forceUpdate(). When I do that I lose my reference to my anchor point.

Do you think in the future GridCell extends could define their own state? Do you think allowing them to be generic might make sense?

Is there a way to prevent my Popup from losing its positioning?

Working example: https://next.plnkr.co/edit/AynMBNvtloQ881qt

Thanks!

General Discussions

answered on 19 Jul 2018

1 answer

208 views

Custom editor that works with example pattern for onClick renders edit

I put together this plunkr to demonstrator my problem. I want to have a custom editor, but I also want to be able to switch the cell to edit mode onclick. The problem is with how editors are defined I can't pass in arguments to a constructor that could reference the enterEdit method like is shown with renderers.jsx. Columns that have cell defined skip the cellRender routine. I don't see any way to bind my custom editor cell to support an onClick method similar to how non-custom cells can. Help appreciated

https://next.plnkr.co/edit/JK1J5RxG2C6uBqrr

General Discussions

answered on 18 Jul 2018

2 answers

379 views

How to set a initial value for an Editor component

Hi,

I am using the "kendo-editor-react-wrapper" in my project, and I want to set a initial value for the Editor component. But I cannot find any helpful thing in EditorOption (including change, keyup, keydown, tools, …, etc.)

I know that I can use Editor.value() to set a value for an editor object, but how can I do this in React?

I found someone wrote like <Editor value={the_value} /> : https://stackoverflow.com/questions/48704782/kendo-editor-react-wrapper-display-an-error

But when I try to write like this, I got an error: " TS2339: [31mProperty 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Editor> & Readonly<{ children?: ReactNode; }> & Re...'.[39m"

ReactJS 15.6.1 and Typescript 2.4.1 are used in my project.

Maybe I have made some stupid mistakes, but I would be grateful if you could provide a solution or suggestion.

Wrappers for React

answered on 17 Jul 2018

2 answers

408 views

TabStrip scrollable.

Hello,

I'm trying make a TabStip scrollable with the React component.
By default the scrollable propertie is false, How can I set it to true using the React Component ?

I checked this, but this is using Jquery.

I tried :

public componentDidUpdate() {

$(".k-tabstrip").kendoTabStrip({

scrollable: true,

});

}

But using this each time my component is update, is not really good...

And some weird bugs show up. (here)

This occurs when there is enought space to display all the tabs. When the last one is closed.

So 2 questions :
- How to make a scrollable TabStrip using the React component ?
- And if it's not possible, What viable alternative have we ?

Regards,
Vincent.

Wrappers for React

answered on 17 Jul 2018

5 answers

94 views

Bad generated header in grid

Hello,

I use your grid, but in Firefox (61), Edge is bad generated headers with filter (not created scroll part in header and filter row). Chrome rendering is OK.

Thanks Pavel

Wrappers for React

answered on 16 Jul 2018

1 answer

2.2K+ views

Kendo Grid Horizontal Scroll

Hi All,

I have a table with 14 columns, and it obviously does not fit well on small screens. In Kendo UI for jQuery I would normally solve this with frozen column and horizontal scroll. However, frozen columns might not be available untill September. So is it possible to achieve horizontal scrolling on small screens without frozen column?

General Discussions

answered on 12 Jul 2018

3 answers

397 views

DropdownList - binding textField attribute to inner value of json object

I have problem with textField binding to value. My JSON looks like this and I need to bind name.value to textField attribute, but as it is shown below, its not working. How I can manage that?

{
"id":"some_Id",

"code":"some_code",
"name":{
"value": "Czech republic",
"translations": []
},
etc....
}

<DropDownList

data={this.props.headerData}

textField={"name.value"}

valueField={"id"}

value={this.props.selectedImporter.id}

className="dd-header"

onChange={this.importerContextChanged} />

);

General Discussions