Questions on KendoReact Forum

2 answers

1.4K+ views

[Solved] 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

546 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

228 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

397 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

191 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.4K+ 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

answered on 02 Nov 2020

6 answers

2.1K+ views

React Rich Text Editor Features: How to add math equations to text editor

We are going to telerik rich text editor.

we want add add math and science equations to text editor.

So is there any plugin for that?

General Discussions

answered on 31 Oct 2020

1 answer

465 views

React - Folder upload

Hello.
Is there any way to use the React 'Upload' component to upload a folder with its files?

Well thank you.

General Discussions

answered on 29 Oct 2020

1 answer

122 views

How can i sync the time frame of two charts

Hi,

I just want to know if it's possible to show the same time frame in two charts, this means that if the time frame of one chart is changed the second one update automatically.

I'll post here my code

const GraficoWFP = () => {

return (

<div style={{ paddingLeft: "12,5%", paddingRight: "12,5%" }}>

<div style={{ display: "inline-block", padding: "5px" }}>

<div className="col-6">

<div className="k-card">

<Chart

style={{

height: 450,

width: 500,

cursor: "ew-resize"

}}

pannable={{ lock: "y" }}

>

<ChartTitle text="Afghanistan" />

<ChartLegend position="bottom" orientation="horizontal" />

<ChartTooltip shared={true} render={sharedTooltipRender} />

<ChartValueAxis>

<ChartValueAxisItem title={{ text: "Rainfall (mm)" }} />

</ChartValueAxis>

<ChartCategoryAxis>

<ChartCategoryAxisItem

categories={cat}

crosshair={crosshair}

axisCrossingValue={0 && cat.length}

min={36}

max={72}

justified={!0}

labels={{ content: (item) => { return labels[item.value] } }}

/>

<ChartCategoryAxisItem

categories={totalMonths}

justified={!1}

min={12}

max={24}

/>

</ChartCategoryAxis>

<ChartSeries>

{seriesBar.map((item, idx) => (

<ChartSeriesItem

key={idx}

type="column"

tooltip={{ visible: true }}

data={item.data}

name={item.name}

color={item.color}

/>

))}

</ChartSeries>

</Chart>

</div>

<div style={{ display: "inline-block", padding: "5px" }}>

<div className="col-6">

<div className="k-card">

<Chart

style={{

height: 450,

width: 500,

cursor: "ew-resize"

}}

pannable={{ lock: "y" }}

>

<ChartTitle text="Afghanistan" />

<ChartLegend position="bottom" orientation="horizontal" />

<ChartTooltip shared={true} render={sharedTooltipRender} />

<ChartValueAxis>

<ChartValueAxisItem title={{ text: "Variation from Average" }} />

</ChartValueAxis>

<ChartCategoryAxis >

<ChartCategoryAxisItem

categories={cat}

crosshair={crosshair}

axisCrossingValue={0 && cat.length}

min={36}

max={72}

justified={!0}

labels={{ content: (item) => { return labels[item.value] } }}

/>

<ChartCategoryAxisItem

categories={totalMonths}

justified={!1}

min={12}

max={24}

/>

</ChartCategoryAxis>

<ChartSeries>

{seriesLine.map((item, idx) => (

<ChartSeriesItem

key={idx}

type="line"

tooltip={{ visible: true }}

data={item.data}

name={item.name}

color={item.color}

markers={{ size: 2 }}

/>

))}

</ChartSeries>

</Chart>

</div>

)

}

General Discussions

answered on 28 Oct 2020