Hello,

I'm trying to wrap GridColumn using high order component. I'd like to make reusable columns within our solution that are enhanced towards our needs.

However, I'm not able to get KendoReact Grid to display data when I try this approach.

I've put example of what I'm trying to do here:

https://stackblitz.com/edit/kendoreact-grid-hooks-pvhvv7?file=app/main.jsx

Thanks in advance for help!

Best regards,

Arek

I have the following script error while rendering Kendo react component with SyestemJS. I have attached the script error image below.

system.config.js

// map tells the System loader where to look for things
    map: {
      'react': 'https://unpkg.com/react@16/umd/react.production.min.js',
      'react-dom': 'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',
      'prop-types': 'https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js',
      '@progress/kendo-date-math': 'https://unpkg.com/@progress/kendo-date-math@dev/dist/cdn/js/kendo-date-math.js',
      '@progress/kendo-drawing': 'https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js',
      '@progress/kendo-react-intl': 'https://unpkg.com/@progress/kendo-react-intl@latest/dist/cdn/js/kendo-react-intl.js',
      '@progress/kendo-react-buttons': 'https://unpkg.com/@progress/kendo-react-buttons@3.14.0/dist/cdn/js/kendo-react-buttons.js'
    }

I have also attached a sample for your reference. Please help me react component using CDN links and SystemJS. Without kendo components, this project works fine. 

HI, 

I am working with the spreadsheet wrapper component. I found an issue where I was not able to insert a new row into s sheet.

I created a sheet with some data in it using a spreadsheet component, downloaded it and uploaded it into another spreadsheet component. Now after uploading it into the second component I am not able to insert a new row to that sheet.

I don't have data in the last row, but still it is throwing me an error saying "Cannot insert cells due to data loss possibility. Select another insert location or delete the data from the end of your worksheet."

Also to make it work, I have to delete rows from bottom of my sheet and then I can insert the same amount of rows anywhere in the sheet.

Please let me know if this is the expected behaviour or it's an actual issue.

If it's the expected behaviour is there a possible way so I don't have to remove all the rows from the bottom of the sheet and I can insert rows?

Thank you.

Hi,

Does the GridColumnMenuCheckboxFilter have virtual scrolling? Or is there a way to enable or add it?  Thanks.

https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnMenuCheckboxFilterProps/

Thanks.

Hi Stefan,

Onclick event (when the user clicks on a date picker Icon) is not firing in DatePicker and DateTimePicker. i.e <DatePicker onClick={onClick} onChange={onChange} />

Hi,

I have a grid where column A takes the size of an array and, depending on if the status in column B is right, outputs the array's length. If the status is not right, the output is a -. When I sort, the underlying value from the field is sorted, whereas I want the cell's value to be sorted. The column may look like this:

5

3

-

6

-

4

and I would want it to sort to 

6

5

4

3

-

-

Currently it sorts to because the underlying value of the - is 6 and 4

6

-

5

4

-

3

Is there any way to sort by the cell and not the field? 

Hi,

I would like to ask about one thing on which I could not find exact answer. According to documentation, one of requirements for virutal scrolling is to set height property on grid. What about a case when I'd like to have dynamic height - take all space left(e.g. by flex: 1). From what I checked still height is needed(but can be set just to 100%, then flex can take care about filling remaining space). From what I checked with adjusting example from documentation it seems to work: 
https://stackblitz.com/edit/react-kgfbgg-risfhh?file=app%2Fmain.jsx

I would like to use this approach as base for all grids in application - is it correct way to go?

As I go through and implement + style the KendoReact controls for use in our dynamic forms, would you like me to report any "bugs" I may find in the forum or is there a better place?

What I found today was a styling issue. I noticed that the NumericTextBox didn't look the same as the other inputs when focused. At first, I figured it was because of some kind of SCSS shenanigans that I've been fighting, but then I realized that .k-state-focused wasn't applied.  As soon as I manually did it via Chrome DevTools, it looked exactly as expected.

Here's an example: https://stackblitz.com/edit/react-s8ugrr-vnxuc1?file=app/main.jsx

As you tab thru, you'll see that all controls except the NumericTextBox apply the box shadow.

Thanks again,
Kyle

When setting the initialValues of the Form component, it seems to work for everything I've used so far, except for a Switch. If I use a CheckBox instead, it seems to work fine.

I've created a StackBlitz using snippets from your own docs: https://stackblitz.com/edit/react-s8ugrr-c3bw3k?file=app/main.jsx

If you change FormSwitch to FormCheckbox on line 117, you can see what I mean.

I'm setting the initialValues object to be in the following format:

{ mySwitchControlName: true }

After two days of trying to get the Form component to work for my needs, I've hit a pretty major roadblock for our product.

Use Case: Admin creates a template with dynamic fields. End user consumes the template, but has multiple instances of it in a single page. End user shouldn't need to go thru each instance of the template. They should be able to click "Submit" and all template instances are validated. First invalid instance is displayed.

In Kendo UI, this was easy.  You iterate all the <form> elements and run .validate() on it.

Now, I realize KendoReact is NOT Kendo UI, and that React is a totally different thought process than good ol' jQuery. However, I need something similar.

The problem I keep running into is that everything that I need is in FormRenderProps. Your Form control expects you to hit a Submit button inside of the Form's render function. Originally, I didn't want this, but I was able to wrap my entire UX in the form to make it work (not too pleased that I had to, though). So when the Submit button is clicked, it uses formRenderProps.onSubmit, which does some blackbox magic and raises the Form's onSubmitClick/onSubmit events. Things were going fine until I realized I can't do this purely linearly.

I've forked your Multi-Step Form example and quickly tweaked it to be similar to my team's needs. We're using a Stepper to mimic the tabs that we use (though the actual UX control we use is more similar to your TabStrip): https://stackblitz.com/edit/react-vqk7ya?file=app/data.jsx

The idea is that the end user should be able to either click "Submit" and have the validation code run for each Stepper step/TabStripTab or they can jump around as they wish by clicking the actual Stepper step/TabStripTab. For our needs, validation only needs to occur on Submit (but each step must be validated on Submit click).