Questions on KendoReact Forum

1 answer

78 views

Conditionally displayed components in PDFExport & extra content with GridPDFExport

Hi,

I have 2 questions concerning the PDF export functionality:

1. Is it possible to somehow display a component only in the PDF but not in the browser?

I tried set the "isExporting" in the click handler that triggers PDF generation, but
the resulting PDF does not include the expected <h1> tag.

const [ isExporting, setIsExporting ] = useState(false);
const exportPdf = () => {
setIsExporting(true);

pdfExportRef.current.save(() => {
setIsExporting(false);
});
}

<PDFExport ...>
{isExporting && <h1>My title</h1>}

<table>..</table>
<Chart>..</Chart>
</PDFExport>

2. Is it possible add extra content into the PDF in case I generate a grid using the GridPDFExport component?

I am able to generate the file OK and the PDF output is as expected. However, I would like to add an extra title (<h1>) and paragraph (<p>) before the grid output (in the PDF). I am using GridPDFExport as I want generate all pages of a grid and remove filters, paging etc.

My code is based on this example: https://www.telerik.com/kendo-react-ui/components/grid/pdf-export/all-pages/

{grid}
<GridPDFExport ref={jobsPdfExportRef}
margin="1cm">
<h1>My title</h1>
<p>my description my descriptionmy descriptionmy descriptionmy descriptionmy description</p>

{grid}
</GridPDFExport>

Thank you

Grid

PDF Processing

answered on 23 Jun 2021

2 answers

112 views

Export Excel - Kendo grid grouped data

Hi,

How to export excel with multiple column grouping and aggregations.

It would be helpful if you given a working example.

Thanks,

Vignesh

Grid

updated answer on 23 Jun 2021

1 answer

158 views

Disabling Conversational UI scroll animation

Is there an easy way to disable the Conversational UI scroll to bottom animation?

Animation

Conversational UI

answered on 22 Jun 2021

1 answer

83 views

Scheduler - After-Hours Appointment Bug?

Here's another one for you. I didn't see any similar bugs listed in GitHub. Did I find a bug?

Repro Steps:

(Updated: Important first step.) Setup:

Run these steps on a laptop running Windows 10.
Set the time zone to CDT aka "Central Daylight Time" aka "America/Chicago".
When testing in Firefox, you must close and re-start the browser after changing time zone.
In Chrome, restarting the browser shouldn't be necessary.
In either browser, open the developer console, click on Console to open a JavaScript console, type "new Date()", and push Enter. Confirm that the result is displayed in Central time (ex: "Mon Jun 21 2021 14:19:38 GMT-0500 (Central Daylight Time)").
This bug is reproducible when the browser is in CDT, and this bug is NOT reproducible when the browser is in MSK.

Run the "KendoReact Scheduler Demo Preview" demo from https://www.telerik.com/kendo-react-ui/components/scheduler/#toc-kendoreact-scheduler-demo-preview . Running it directly from the Telerik site is fine; StackBlitz is not necessary.

Note that the Scheduler starts out in "business hours" mode, with a "Show full day" button visible at the bottom.

Double-click an empty slot to add a new appointment.

Enter a Start Time outside business hours such as 6 PM.

Enter a title, description, end time as necessary and push Save.

The new appointment is not visible. This is expected, as it's outside business hours.

Now push "Show full day".

Result:

The new appointment is NOT visible.

But push the ">" button on the top left, to the right of the "today" button. Then push the "<" button. (This moves forward a week, then moves back.) The appointment is now visible.

Expected:

The new appointment should be visible immediately upon pushing "Show full day".

Scheduler

updated question on 21 Jun 2021

5 answers

138 views

VS2019 Pro + .Net Core 5.0 App + Simple DataGrid no databinding = invalid-hook-call

Hello,

I can't try ReactKendo DataGrid component for my project (Tests before buy)

With others components like PanelBar, Calendar, etc.. :

I tried this code directly on my index.js

import React from 'react';
import ReactDOM from 'react-dom'
  
import { Grid, GridColumn } from "@progress/kendo-react-grid";

ReactDOM.render(
  <div>
        <Grid style={{ height: "400px" }}>
            <GridColumn field="ProductID" title="ID" width="40px" />
            <GridColumn field="ProductName" title="Name" width="250px" />
            <GridColumn field="Category.CategoryName" title="CategoryName" />
            <GridColumn field="UnitPrice" title="Price" />
            <GridColumn field="UnitsInStock" title="In stock" />
        </Grid>
  </div>,
  document.getElementById('my-app'));

my index.html :

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <base href="%PUBLIC_URL%/" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
    <script src="https://unpkg.com/@progress/kendo-date-math@dev/dist/cdn/js/kendo-date-math.js"></script>
    <script src="https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-intl@latest/dist/cdn/js/kendo-react-intl.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-all@latest/dist/cdn/js/kendo-react-all.js"></script>

    <title>MyTest</title>
</head>
<body>
    <div id="my-app">

    </div>
</body>

</html>

For compilation on VS2019 Pro 16.9.3 with node 14.17 (npm 6.14.13) :

I activated trial version of KendoReact for 30 days today via npx command line !

On Chrome and on Firefox browser, I have this error message :

my package.json :

My Packages Nuget list :

Very simple strangely !!!

And I have the same issue on VS Code last version too !!!!

Do you can help me to resolve this issue please ?

I need test this component before my order of ReactKendo !!!!

Thank you

Drawing

Grid

Licensing

answered on 21 Jun 2021

3 answers

174 views

Grid dynamically hiding columns collapsing grid view

Hi,

We are using kendo grid with n number of columns, each column has defined width. When user dynamically hiding the column kendo grid view collapsing [column width & border not aligned with row contents].

I have attached sample image.

Thanks,

Grid

Styling

answered on 18 Jun 2021

1 answer

121 views

GridColumnMenuCheckboxFilter - Filter button aligned incorrectly

Hi,

In kendo react grid we were using both GridColumnMenuFilter and GridColumnMenuCheckboxFilter, the 'Filter' button aligned differently in both the components.

GridColumnMenuFilter - Filter button is aligned right side & GridColumnMenuCheckboxFilter - Filter button is aligned left side

I have attached snapshots, can you please add

Thanks,