Questions on KendoReact Forum

6 answers

372 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

177 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.3K+ 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.2K+ 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

496 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)}

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

tabindex={0}

/>

General Discussions

answered on 10 Nov 2020

2 answers

177 views

Autocomplete odata filter

Hi there

I am looking for a way that I can use an odata source as the datasource for an autocomplete input and as the user types it queries the remote datasource to return the filtered results.

Looking at the demos and documentation they all seem to be related to local data sources.

Thanks

Nick

General Discussions

answered on 10 Nov 2020

1 answer

347 views

React RadioButton does not have a tooltip property

When I using a radiobutton component, i want to show the hint like the screenshot image, easy to tell the user what the radionbutton's function. here is my code:
<RadioButton
value="2"
name="radio-email2"
onChange={handleDefaultEmail}
title="set as default Email"
/>
the title property works, but there is a error reported:
TS2322: Type '{ value: string; name: string; checked: boolean; onChange: (event: RadioButtonChangeEvent) => void; tabIndex: number; title: string; }' is not assignable to type 'IntrinsicAttributes & RadioButtonProps & RefAttributes<RadioButtonHandle>'.
Property 'title' does not exist on type 'IntrinsicAttributes & RadioButtonProps & RefAttributes<RadioButtonHandle>'.
It works so it's not a problem as I turning the warning off, just a little bit of advice that may be the RadioButton can include this property to support the tooltip showing when the mouse pointer focus on in the future

General Discussions

answered on 09 Nov 2020

1 answer

153 views

Grid Grouping in Firefox

Is there an issue with grouping a grid when using Firefox?

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

The demo works for Safari, Chrome, and Edge but not in Firefox.

General Discussions

answered on 05 Nov 2020

1 answer

4.2K+ views

Put a React Link Element Inside Your Grid Column - How? Example?

Hello,

I need to stick a React Link element inside a column in your React Grid. I have tried setting the widget on the cell prop as your documentation suggests, but cell is not correctly seen. Do you have a quick example of how I can do this or a link to documentation that is current and correct?

I have your Grid populated with data and in the same column in each row I want to clickable Link element that will navigate to a View page to see the details in a nice form of the row on which the Link was clicked.

Thanks,

Jason

General Discussions