Questions on KendoReact Forum

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

387 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

541 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

516 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.3K+ 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.4K+ views

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

153 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

598 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

1 answer

3.8K+ views

How do I send adaptive card submit action value to bot

We are trying to integrate Kendo for Microsoft Bot framework. But we are facing issue when we are using Adaptive card to fetch values from user. Once the user clicks on submit button, the values are not getting passed to bot.

Kindly help us in solving this issue.

General Discussions

answered on 14 Apr 2020