I'm trying to integrate Typescript into my current project, but I'm unable to use Grid with it.

Here's the sample code:

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

export default function App(){
    const data = [{id: 1}];
    
    return <div className="App">
        <Grid data={data}>
            <GridColumn field="id"/>
        </Grid>
    </div>
}

Here's the error:
TS2322: Type '{ children: Element; data: { id: number; }[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Grid> & Pick<Pick<Readonly<GridProps>, keyof GridProps> & Pick<...> & Pick<...>, keyof GridProps> & InexactPartial<...> & InexactPartial<...>'.   
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Grid> & Pick<Pick<Readonly<GridProps>, keyof GridProps> & Pick<...> & Pick<...>, keyof GridProps> & InexactPartial<...> & InexactPartial<...>'.

This error shows for any Grid's prop, not only data, but if there won't be any Grid's prop set, but only a child - Typescript compiles the code.

Is it only happening on my side? 
Thank you for any help. 

Hi folks,

I've got a question about the Drawing utilities in Kendo React. Specifically, I'm drawing some Text on the Surface and would like that Text to scale to fit within a particular "bounding box".

When creating the Text object, I do not see any option or concept of a bounding box. I only see the ability to set the starting point to draw the Text at and then a way to set the Text's CSS Font properties.

While I could try to come up with some code to calculate a font size that would scale that Text up given a bounding box dimension, I was curious if Kendo React had any support or concept of this already built in? Or perhaps a suggestion on how to do this?

Attached is a screen shot of the Text that I am drawing and then an additionally-drawn bounding box. The box and Text have no relation - they're just two things I'm drawing right now. This shows the box in which I'd like the Text to scale up to fit into, though.

Any ideas? Thanks.

I want to customize the EditorTools message.

Something like EditorTools.Bold.message = 'blah';

Any idea how I can do this for all the messages?

If one column has an array with multiple options in a way as ["item1', "item2", "item3"]. 

I can see that yes if a column has one-to-one it works, but if its one-to-many, how can I make the filter just show unique items and filter by such items, for instance I want to have item1, item2, and item 3 show as different selectable options in the filter and also filter by such.

In my example I have the mas 18.0000, 17.000, 18, 19

https://stackblitz.com/edit/react-spxx7p?file=app%2Fmain.jsx

Hello, I wonder if there is a possibility to make filters from this example

https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-column-menu-filter

but as links or single select items, not checkboxes. Attaching a screenshot of what I'm looking for.

In this example https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-custom-filter-cells there is a CategoryFilterCell which would be the most similar, but I wonder if there is a way to add it as a column filter like on my screenshot?

Thank you

When saving the pdf with the options forceProxy in true it redirects to the proxyURL you especified.

I want to avoid that and just call it like a request to my back-end server, there I process the pdf recieved by the request and I upload it.

It's there anyway to avoid the redirect of the url and still doing the request with the data of the file while using pdfSave?

I was wondering if it was possible to override the locale used when using formatNumber with the IntlProvider. In the kendo-intl repo it seems you are able to do the below:

formatNumber(1234.5678, "n2", "de"); 

Can anyone offer any advice on whether this is possible?

I've been practicing the donut chart documentation but I'm having problems with custom ChartSeriesLabel and Custom ChartLegend, can you provide an example of the sample code I mean.

Hi,

When using the grid, you can single click rows, shift click a range and ctrl click. These all work fine. I'm creating a wrapper around the grid to return the clicked rows, so this is the code I use to do this:

    const onSelectionChange = event => {
        const newSelectedState = getSelectedState({
            event,
            selectedState: selectedState,
            dataItemKey: DATA_ITEM_KEY,
        });
        const selectedRows = Object.keys(newSelectedState).map(x => data.find(d => d[DATA_ITEM_KEY].toString() === x.toString()));
        props.onSelected(selectedRows);
        setSelectedState(newSelectedState);
    };

So I loop the data keys returned from the getSelectedState method on my data collection. Great, works fine.

However, when shift selecting a range and then deselecting a single row holding control, the row still remains as selected using getSelectedState (visibly it's unclicked, but not the state object). This is not the case with shift. Shift correctly unselects the rows. I see the event returns a ctrlKey property, so I could probably add my own code around this issue - but it looks like a bug to me? I am using the newest versions of the grid and data tools (kendo-data-tools: 5.2.0 and kendo-react-grid: 5.2.0).

I'm looking for an approach to drag an image that is clipped within a rectangle that is smaller than the image size.  Essentially achieve what is shown in this example https://codepen.io/jonathan/pen/abNGbE.  

I investigated using the Draggable utility in Kendo React, trying out the StackBlitz example, but can't quite get it right.  I tried setting the HTMLDivElement as the React.useRef

const myimage = React.useRef<HTMLDivElement | null>(null);

and then returning a div component instead of the Button in the example.

return (
      <div style={{overflow:'hidden',height:'100px',width:'100px'}} ref={myimage}>
        <div style={{position:'relative'}}>
        <img
            src="https://lh4.googleusercontent.com/-8tqTFxi2ebU/Ufo4j_thf7I/AAAAAAAADFM/_ZBQctm9e8E/w270-h203-no/flower.jpg"
            style={{position:'absolute',top:0,left:0,border:0}}
        />
        </div>
      </div>
  );

How can I achieve this effect using a Kendo component?