Questions on KendoReact Forum

1 answer

806 views

Selecting multiple rows with checkboxes and shift key

I need a feature for react grid like the url below. Is it possible?

I need to select multiple rows with shift button. I need to able to select row range with shift button.

https://www.telerik.com/forums/selecting-multiple-rows-with-checkboxes-and-shift-key

General Discussions

answered on 28 Apr 2020

1 answer

1.1K+ views

Customize the File upload in Kendo React

Hi,

I am using Upload functionality kendo react. Is there any possibility to customize the select file button and upload button. Here I attached the sample design.

General Discussions

answered on 28 Apr 2020

1 answer

615 views

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

521 views

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

112 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

67 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.0K+ 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

299 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

453 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

2.9K+ 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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools