Telerik Forums
KendoReact Forum
1 answer
772 views

Hi

I'm using the PDF processing and I'm having trouble with Arabic language all text are not drawing correctly (Please view attached pic) I've tried almost all solutions in the net with no luck .

Please help

Thank You

Monty

Stefan
Telerik team
 answered on 29 Jun 2021
2 answers
160 views

I am using the helper function process, like this example

https://www.telerik.com/kendo-react-ui/components/dataquery/bulk-operations/ 

const data = [
    { "productName": "Chai", "unitPrice": 18, "unitsInStock": 39, "discontinued": false,
      "category": { "categoryName": "Beverages" }
    },
    { "productName": "Chang", "unitPrice": 19, "unitsInStock": 17, "discontinued": false,
      "category": { "categoryName": "Beverages" }
    },
    { "productName": "Aniseed Syrup", "unitPrice": 10, "unitsInStock": 13, "discontinued": false,
      "category": { "categoryName": "Condiments" }
    },
    { "productName": "Cajun Seasoning", "unitPrice": 22, "unitsInStock": 53, "discontinued": false,
      "category": { "categoryName": "Condiments" }
    },
    { "productName": "Gumbo Mix", "unitPrice": 21.35, "unitsInStock": 0, "discontinued": true,
      "category": { "categoryName": "Condiments" }
    }
];

const result = process(data, {
    group: [{
        field: 'category.categoryName',
        aggregates: [
            { aggregate: "sum", field: "unitPrice" },
            { aggregate: "sum", field: "unitsInStock" }
        ]
    }],
    sort: [{ field: 'productName', dir: 'desc' }],
    filter: {
        logic: "or",
        filters: [
            { field: "discontinued", operator: "eq", value: true },
            { field: "unitPrice", operator: "lt", value: 22 }
        ]
    }
});

 

I am expecting the result like the example

{
  "data": [
    { "aggregates": {
        "unitPrice": { "sum": 53.35 },
        "unitsInStock": { "sum": 66 }
      },
      "field": "category.categoryName",
      "items": [
        { "productName": "Gumbo Mix", "unitPrice": 21.35, "unitsInStock": 0, "discontinued": true,
          "category": { "categoryName": "Condiments" }
        },
        { "productName": "Aniseed Syrup", "unitPrice": 10, "unitsInStock": 13, "discontinued": false,
          "category": { "categoryName": "Condiments" }
        }
      ],
      "value": "Condiments"
    },
    {
      "aggregates": {
        "unitPrice": { "sum": 37 },
        "unitsInStock": { "sum": 56 }
      },
      "field": "category.categoryName",
      "items": [
        { "productName": "Chang", "unitPrice": 19, "unitsInStock": 17, "discontinued": false,
          "category": { "categoryName": "Beverages" }
        },
        { "productName": "Chai", "unitPrice": 18, "unitsInStock": 39, "discontinued": false,
          "category": { "categoryName": "Beverages" }
        }
      ],
      "value": "Beverages"
    }
  ],
  "total": 4
}

 

But I actually got this, which is not ordering by the product name, but order by the category name and then product name

{
  data: [
    {
      aggregates: {
        unitPrice: {
          sum: 37,
        },
        unitsInStock: {
          sum: 56,
        },
      },
      field: "category.categoryName",
      items: [
        {
          productName: "Chang",
          unitPrice: 19,
          unitsInStock: 17,
          discontinued: false,
          category: {
            categoryName: "Beverages",
          },
        },
        {
          productName: "Chai",
          unitPrice: 18,
          unitsInStock: 39,
          discontinued: false,
          category: {
            categoryName: "Beverages",
          },
        },
      ],
      value: "Beverages",
    },
    {
      aggregates: {
        unitPrice: {
          sum: 31.35,
        },
        unitsInStock: {
          sum: 13,
        },
      },
      field: "category.categoryName",
      items: [
        {
          productName: "Gumbo Mix",
          unitPrice: 21.35,
          unitsInStock: 0,
          discontinued: true,
          category: {
            categoryName: "Condiments",
          },
        },
        {
          productName: "Aniseed Syrup",
          unitPrice: 10,
          unitsInStock: 13,
          discontinued: false,
          category: {
            categoryName: "Condiments",
          },
        },
      ],
      value: "Condiments",
    },
  ],
  total: 4,
}

 

How can I achieve the result in the example?

SHING SHUN
Top achievements
Rank 1
Iron
 answered on 29 Jun 2021
1 answer
1.0K+ views

Hi, I'm building an update form and the goal is to load the current form data which we get from server in controls.

so I took a piece of code from the samples (here),

and I changed it in order to bind it to a property in state as below:

<Field
    name={"firstName"}
    component={FormInput}
    label={"someLabel"}
    value={this.state.firstName}
    onChange={(e) => this.setState({ firstName: e.target.value })}
/>

and my state is:

state = {
firstName: null
}

and I get some data from server and assign it to the state in componentDidMount method as below:

componentDidMount() {
        axios.get("someURL").then(response => {
            this.setState({ firstName: response.data })
        })
    }

the goal is to get the current value from the server and set it to the control

the problem is i don't see the values of the form when it's rendered.

Thanks

and i also attach the jsx file just in case

Stefan
Telerik team
 answered on 28 Jun 2021
1 answer
113 views
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
Stefan
Telerik team
 answered on 23 Jun 2021
2 answers
163 views

Hi,

How to export excel with multiple column grouping and aggregations.

It would be helpful if you given a working example.

Thanks,

Vignesh

Stefan
Telerik team
 updated answer on 23 Jun 2021
1 answer
203 views
Is there an easy way to disable the Conversational UI scroll to  bottom animation?
Stefan
Telerik team
 answered on 22 Jun 2021
1 answer
109 views

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".

Brent
Top achievements
Rank 1
Iron
 updated question on 21 Jun 2021
5 answers
159 views

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

 

 

Cyril
Top achievements
Rank 1
Iron
 answered on 21 Jun 2021
3 answers
217 views

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,

Stefan
Telerik team
 answered on 18 Jun 2021
1 answer
178 views

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,

 

Stefan
Telerik team
 answered on 17 Jun 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?