Questions on KendoReact Forum

1 answer

94 views

HTML5 validations keep showing on select controls (DropDown, ComboBox, MultiSelect, etc) controls

Hi Team,

When we are setting required property to true for Select type controls (for eg ComboBox) and then click Submit button, the mandatory validation appears. When I select the value on ComboBox control, the validation message still appears overlays on the options of ComboBox. This issue is coming in both chrome and Edge.

I validated this case in the demo provided in below URL:

https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/forms/#toc-setting-validation-requirements

I have attached the image for reference.

Regards,

Sanjay

General Discussions

answered on 24 Apr 2020

1 answer

1.2K+ views

Export to CSV support on Kendo React Grid

Hi,

Does Kendo React grid support export to CSV file format? Does Kendo Grid gives out of the box feature like Export to Excel or do i need to do some custom development regarding the ?

Please let me know

Thanks in Advance

General Discussions

answered on 23 Apr 2020

1 answer

365 views

Exporting Editor Contents to PDF using PDFExport Component

Trying to export the contents of an Editor to a PDF and right now I am only able to export the editor itself, literally an image of the component without content. I am thinking I need to capture the View of the editor and export that but I haven't seen or found any examples that detail how to accomplish that. Here is the code we are using, any assistance would be greatly appreciated.

import React, { Component, Fragment } from 'react';

import ReactDom from 'react-dom';

import { Editor, EditorTools, EditorUtils } from '@progress/kendo-react-editor';

import { PDFExport, savePDF } from "@progress/kendo-react-pdf";

const {

Bold, Italic, Underline, Strikethrough, Subscript, Superscript,

AlignLeft, AlignCenter, AlignRight, AlignJustify,

Indent, Outdent, OrderedList, UnorderedList,

Undo, Redo, FontSize, FontName, FormatBlock,

Link, Unlink, InsertImage, ViewHtml,

InsertTable,

AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter,

DeleteRow, DeleteColumn, DeleteTable,

MergeCells, SplitCell

} = EditorTools;

export class Home extends Component {

displayName = Home.name

editor = null;

constructor(props) {

super(props);

this.state = {

Matters: {}, id: null, data: '', loading: true

};

this.handleChange = this.handleChange.bind(this);

}

render() {

return (

<React.Fragment>

<div className="row">

<label>

Matter:

<input type="text" name="matterid" onChange={this.handleChange} />

</label>

<button

className="k-button k-button-icontext"

onClick={this.setHtml}>

<span className="k-icon k-i-arrow-60-up" /> Fetch data

</button>

<button

className="k-button k-button-icontext"

onClick={this.getdata}>

<span className="k-icon k-i-arrow-60-down" /> Save data

</button>

</div>

<div className="row">

<PDFExport

ref={component => (this.pdfExportComponent = component)}

paperSize="auto"

margin={40}

fileName={`Report for ${new Date().getFullYear()}`}

author="KendoReact Team"

>

<div ref={container => (this.container = container)}>

<Editor

tools={[

[Bold, Italic, Underline, Strikethrough],

[Subscript, Superscript],

[AlignLeft, AlignCenter, AlignRight, AlignJustify],

[Indent, Outdent],

[OrderedList, UnorderedList],

FontSize, FontName, FormatBlock,

[Undo, Redo],

[Link, Unlink, InsertImage, ViewHtml],

[InsertTable],

[AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter],

[DeleteRow, DeleteColumn, DeleteTable],

[MergeCells, SplitCell]

]}

contentStyle={{ height: 600 }}

ref={editor => this.editor = editor}

/>

</div>

</PDFExport>

</div>

<div className="row">

<button className="k-button" onClick={this.exportPDFWithComponent}>

Export with component

</button>

<button className="k-button" onClick={this.exportPDFWithMethod}>

Export with method

</button>

</div>

</React.Fragment>

);

}

exportPDFWithComponent = () => {

this.pdfExportComponent.save();

};

}

I have removed some code that is sensitive to data but nothing that should affect export.

Thank you!

General Discussions

answered on 23 Apr 2020

1 answer

519 views

Reducing overall size of Input components

Hi,

I am currently building a very large form with multiple different input components. The overall size of the components are taking up too much space. I've tried overwriting the css on these components but with no luck. I would like to decrease the padding of the text from the label and line below and shortening the line.

Thanks

General Discussions

answered on 22 Apr 2020

3 answers

3.0K+ views

how to determine necessary packages to install

I want to add Kendo Grid to my repo, but I noticed Grid is broken down into several smaller packages. Is there some tooling or some cheat-sheet for understanding package dependencies in Kendo React? Or do I just need to install packages one by one as I get errors like these in my build

ERROR in ./node_modules/@progress/kendo-react-grid/dist/es/Grid.js

Module not found: Error: Can't resolve '@progress/kendo-react-data-tools' in '/Users/...../node_modules/@progress/kendo-react-grid/dist/es'

@ ./node_modules/@progress/kendo-react-grid/dist/es/Grid.js 62:0-97 491:13-39 643:59-64 923:23-33

@ ./node_modules/@progress/kendo-react-grid/dist/es/main.js

@ ./libs/grid/src/lib/Grid.jsx

General Discussions

answered on 22 Apr 2020

1 answer

489 views

what is Kendo UI Wrappers for React vs just Kendo React?

Just curious on the details behind why the forum is divided into KendoReact and Kendo UI Wrappers for React. Is the "Wrappers for React" legacy code?

Wrappers for React

answered on 21 Apr 2020

4 answers

1.2K+ views

How to freeze/lock columns

How to freeze/lock columns in React Kendo Grid ? I was thinking of creating two grids and render locked columns in first and rest in second grid, but we would have to rewrite pagination component and bind scroll events in between etc... What is the best way to implement this ?

Offtopic: Can i have pagination component decoupled from Grid ?

General Discussions

answered on 21 Apr 2020

15 answers

1.3K+ views

Filter kendo-ui TreeView with input filter and category

Hi,

I'm trying to filter a kendo-ui treeView by text and with button to display or not some root in my tree.

I already use this to filter the tree view with input and it work perfectly, and on top of that i want to filter the root node.

I use treeview react component

When i click some button, I set the hidden attribute to the root node and I re-filter it.

public handleClick() {

const dataSource: kendo.data.DataSource = $("[data-role='treeview']").data("kendoTreeView").dataSource;

const data = dataSource instanceof kendo.data.HierarchicalDataSource && dataSource.data();

_.forEach(data as kendo.data.ObservableArray, (item) => {

if (item.type === this.props.controlNode) {

item.hidden = this.props.filter;

}

});

dataSource.filter({ field: "hidden", operator: "neq", value: true });

dataSource.filter().logic = "and";

}

My buttons have a `controlNode` attribute to compare to the type attribute inside my dataSource. I iterate through the first child of my dataSource and if the type match I set the hidden attribute true or false depending on the filter state.

So my problem is, `dataSource.filter({ field: "hidden", operator: "neq", value: true });` don't filter the dataSource. but if i use the operator `eq` instead of `neq` I have the opposite behavior, but it's working...

I don't know if I'm doing something wrong.

Wrappers for React

answered on 20 Apr 2020

1 answer

138 views

Splitter with routing

Hi,

Do you have maybe a demo or sample somewhere using Kendo React Splitter with Routing?

We want to make the main screen in central pane, and then open sub pages in splitter other pane to the right, but via routing.

A good example would be list page which is main, and then edit or details pages which open via route in the pane to the right not to leave the current list context.

Thank you!

Sanja

General Discussions

answered on 16 Apr 2020

1 answer

581 views

DatePicker Icon Tooltip

Hi,

We use the DatePicker component and ReactTooltip (https://www.npmjs.com/package/react-tooltip) for tooltips.
For the DatePicker icon has the title "Toggle calendar" is there a way to remove it?

https://stackblitz.com/run/?file=app%2Fmain.jsx

General Discussions

answered on 15 Apr 2020