Questions on KendoReact Forum

1 answer

1.0K+ views

NumericTextBox prevent default key up down

Hi All

I am trying to disable the default keyboard inputs of up/down in the NumericTextBox. I cannot see any options from the api

General Discussions

answered on 18 Nov 2020

6 answers

1.0K+ views

Grid Custom Filter cell set focus

Hi All

I am trying to set focus on a filter cell in a grid.

I have followed and successfully created a custom filter cell as per the following link:

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

I am not sure however, how I can set focus on this cell, any assistance would be great, thanks.

General Discussions

answered on 17 Nov 2020

5 answers

4.7K+ views

How to ensure that license is valid during build?

We recently upgraded to Kendo React 4.0.0 and introduced kendo-ui-licence.

I want to make sure that future developers do not deploy a release with an invalid license. Console outputs on the deployed application will not get noticed.

What is the best practice to do that?

I would say the build has to fail if there is an invalid license. The documentation says: "A post-install script in @progress/kendo-licensing will automatically activate the license during installation." What does "post-install script" mean? Is this automatically triggered when I run `npm install` on my project? And will it fail if the license became invalid? And what's the impact of having some kind of npm caching mechanism (i.e. https://samiprogramming.medium.com/cache-your-npm-install-on-azure-devops-b45ead758c00)? Would it make sense to call `npx kendo-ui-license activate` explicitly so that it fails when the license is no longer valid?

General Discussions

answered on 17 Nov 2020

1 answer

414 views

Testing NumericTextBox with Enzyme and Jest

Hello,

We are using KendoReact 3.17.

I've tried to write a test using Jest and Enzyme to check if NumericTextBox will fire onChange callback when I'll change input.

Unfortunately, I'm not able to fire onChange callback within test.

I've created sandbox environment with test here:

https://codesandbox.io/s/react-enzyme-sandbox-forked-mtiuz?file=/src/components/Hello.test.js

Maybe there is other way I can test NumericTextBox to achieve same result?

Best regards,

Arek

General Discussions

answered on 16 Nov 2020

1 answer

76 views

How to edit column name by double click on the column name?

I am having one scenario where I need to update/edit column name by double clicking in the column name in the Grid then I can save the updated column name with its data types and icon itself, please find attachments for reference Please let me know how to implement this type of scenario with Kendo-react ?

General Discussions

answered on 16 Nov 2020

6 answers

285 views

GridColumnMenuCheckboxFilter for enum-like field

Currently trying to use KendoReact v4.0.0 and creating a Grid. Everything is going decently well except for this one small bump.

My data comes from a Web API controller in .NET Core 3.1. One of the properties is an enum, so it returns an integer, but needs to display to the user as a string.

Therefore, one of my columns needs to mimic that. I'm using a cell property to convert the integer to the string. I was also able to find a way to render the GridColumnMenuCheckboxFilter using only text. But I cannot find a way to convert the text back to an integer so that we can send it to the Web API for server-side filtering.

I was hoping to hook into onFilterChange, but that doesn't seem like that will work.

Is there any way to do this yet?

General Discussions

answered on 13 Nov 2020

2 answers

149 views

In-cell grid editing with Upload component

Hello,

we are trying to implement in-cell editing in grid following your example as shown here, but we are using functional components instead of classes. One of our requirements is making a column for files, i.e. making a cell that will display the file's name when in view mode and display your Upload component when in edit mode. We are having a a few problems in making that custom cell.

Our first problem is that there seems to be no way to exit edit mode for that file field when clicking away (except when clicking on another cell) because focus and blur events are not firing. The second problem is that after clicking on "Select files..." in the Upload and choosing a file, nothing happens (Upload's onAdd event is not firing). Choosing a file using drag and drop functionality works.

Do you maybe have an example or a proposed solution for this scenario?

Thank you and kind regards,
Sanja

General Discussions

answered on 13 Nov 2020

2 answers

1.1K+ views

Limit characters in grid cell input

I would like to limit a grid text field to 255 characters. I've looked over events and don't see anything that would help with this. Has anyone accomplished this with the Kendo React Grid? Thank you

General Discussions

answered on 12 Nov 2020

3 answers

1.1K+ views

DateTimePicker container does not adapt to font-size

Hi,

I have the $font-size: .825rem set through my app but then the DateTimePicker looks shrinked. Seems like the calendar/time container-wrappers is not adapting to my font-size. When i change the $font-size to 1rem then it looks like i should as in your examples.

This is for bootstrap theme.

General Discussions

answered on 10 Nov 2020

1 answer

434 views

tabindex in React Upload Component

The Upload <li class="k-file"> gets a tabindex="-1" inserted

and the Upload button also:

<button type="button" tabindex="-1" class="k-button k-button-icon k-flat k-upload-action"><span aria-label="Remove" title="Remove" class="k-icon k-delete k-i-x"></span></button>

I've tried overriding this by adding tabindex={0}, but this is not working.

I need to be able to tab to the Upload li (or it's div parent) and button?

How can I override the insertion of tabindex="-1"?

<Upload

autoUpload={false}

showActionButtons={false}

batch={false}

multiple={false}

files={props.files}

onAdd={e => props.onAdd(e)}

onRemove={e => props.onRemove(e)}

onProgress={e => props.onProgress(e)}