Telerik Forums
KendoReact Forum
7 answers
196 views

Hello,

I'm building my TreeView using the redux store.

//in constructor
this.state = {
    data: createDataSource(
        //some store props
    );
}
// in render
<TreeView
    dataSource={this.state.data}
/>

 

When I add content in the store that have to be used by the TreeView componenent. It doesn't update.

At first, I throught it was because I init data in the constructor.

Do I did this : 

<TreeView
   dataSource={createDataSource(
    // store props
  )}
/>

 

Still no update, when I update my store.

Why the compomonent don't update ? 

Thanks
Regard,

 

 

Vincent
Top achievements
Rank 1
 answered on 02 Aug 2018
1 answer
242 views

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?


Stefan
Telerik team
 answered on 30 Jul 2018
4 answers
356 views

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>
            </div>
        );
    }
}
export default ChildQuestions;


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

Rach
Top achievements
Rank 1
 answered on 26 Jul 2018
2 answers
163 views

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!

Stefan
Telerik team
 answered on 19 Jul 2018
1 answer
283 views

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

Stefan
Telerik team
 answered on 18 Jul 2018
2 answers
477 views

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: Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Editor> & Readonly<{ children?: ReactNode; }> & Re...'."

 

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.

Dongsheng
Top achievements
Rank 1
 answered on 17 Jul 2018
2 answers
481 views

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.

Vincent
Top achievements
Rank 1
 answered on 17 Jul 2018
5 answers
149 views

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

TREXIMA spol. s r.o.
Top achievements
Rank 1
 answered on 16 Jul 2018
1 answer
2.5K+ views

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?

Stefan
Telerik team
 answered on 12 Jul 2018
3 answers
463 views

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} />
);
Stefan
Telerik team
 answered on 11 Jul 2018
Narrow your results
Selected tags
Tags
General Discussions
Grid
Wrappers for React
Charts
Scheduler
Filter 
DropDownList
Form
Styling / Themes
DatePicker
Editor
TreeList
Styling
PDF Processing
ComboBox
Excel Export
Dialog
Input
TreeView
Upload
Drawer
Button
Drag and Drop
MultiSelect
Tooltip
Accessibility
NumericTextBox
Checkbox
Menu
Gantt
DateTimePicker
PDF Viewer
Popup
Window
AutoComplete
DateInput
Sortable
Data Query
Licensing
TabStrip
Drawing
Calendar
Pager 
Labels 
Localization
TimePicker
GridLayout
FontIcon
Animation
PanelBar
TaskBoard
PivotGrid
Card
DropDownButton
Conversational UI 
DateRangePicker
Splitter
Badge 
Security
Slider
Spreadsheet
ContextMenu
MultiViewCalendar
Stepper
MultiColumnComboBox
MultiSelectTree
TextBox
AppBar
File Saver
ListView
MaskedTextBox
RadioButton
Switch
TextArea
Toolbar
DropDownTree
TileLayout
Map
Avatar
Date Math
Gauge
RadioGroup
RangeSlider
Rating
Loader
ExpansionPanel
SvgIcon
Typography
ProgressBar
ScrollView
Popover
StockChart
RadialGauge
Server Components
AIPrompt
Page Templates / Building Blocks
AI Coding Assistant
Chat
ColorGradient
ColorPalette
ColorPicker
Notification
Ripple
Skeleton
ButtonGroup
Chip
ChipList
FloatingActionButton
SplitButton
ActionSheet
Barcode
QR Code
FlatColorPicker
Signature
BottomNavigation
BreadCrumb
StackLayout
Timeline
ListBox
ChunkProgressBar
Sparkline
FileManager
ArcGauge
CircularGauge
LinearGauge
ExternalDropZone
OrgChart
Sankey
VS Code Extension
InlineAIPrompt
SpeechToTextButton
Chart Wizard
Agentic UI Generator
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?