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

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?

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

Hi,

How to export excel with multiple column grouping and aggregations.

It would be helpful if you given a working example.

Thanks,

Vignesh

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

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

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,