Questions on KendoReact Forum

1 answer

744 views

[Solved] custom text for grid filterOperators

https://www.telerik.com/kendo-react-ui/components/grid/api/GridFilterOperators/

I'm trying to understand customizing GridFilterOperators in the Grid's filterOperators prop. Is it possible to override the text field with a custom message than what's provided? How is "grid.filterGtOperator" resolved to "Is Greater Than" in the dropdown for GridColumnMenuFilter?

Thanks.

General Discussions

answered on 28 Apr 2020

1 answer

652 views

[Solved] using enter key for grid's ColumnMenuFilter

I tweaked the code from here https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-column-menu-filter so that ProductName column uses the ColumnMenu. Here is sample app https://stackblitz.com/edit/react-3fufmw?file=app/main.jsx

In this example, why can I press the "enter" key to apply a text filter (e.g. the ProductName column), but for a number filter, the enter key does not apply and I have to click on the filter button?

Is this a bug? How can i make the "enter" key work with number filter?

Steps

click on ProductName hamburger menu, enter "ch", then press "enter" key while focused on text input. The filter is applied

click on ProductID hamburger menu, enter "1", then press "enter" key while focused on text input. The filter is not applied.

Thanks.

General Discussions

answered on 27 Apr 2020

3 answers

192 views

Disable any specific day of the week (Fri/Sat/Sun) in DateTimePicker control

Hi Team,

We are looking for some option in DateTimePicker control, which can disable any specific day of the week (eg Fri/Sat/Sun) in DateTimePicker control.

Regards,

Sanjay

General Discussions

answered on 24 Apr 2020

1 answer

132 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

[Solved] 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

414 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

575 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

[Solved] 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

547 views

[Solved] 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.4K+ 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