Telerik Forums
KendoReact Forum
0 answers
1 view

Doesn't seem to work here - https://stackblitz.com/edit/react-m59yg9?file=app%2Fmain.jsx

I want the input text to be formatted as such: $2.22, but the input allows 3 decimal places and shows no currency symbol. I have added the formatting to the column and to the editCell component, but neither seem to do the trick. If I've done it incorrectly, can you show me the correct way to achieve what the NumericTextBox input here does with its currency example? Thank you!

Janki
Top achievements
Rank 2
Iron
Iron
Iron
 asked on 24 Jun 2022
1 answer
2 views

Hi, I need to build a grid with single selection.

I started by the example on https://www.telerik.com/kendo-react-ui/components/grid/selection/

So, I noticed that if the grid has the single selection mode, when a row is selected I cannot unselect it: I can only select another row.

I would like to obtain this: when I click on a row it will be selected if is unselected, and it will be unselected if is selected.

 

This is my custom solution:

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

 

So, is there a better way to obtain the same?

Thank you

Vessy
Telerik team
 answered on 24 Jun 2022
1 answer
2 views

I have a requirement to add dynamic KendReact grid column  from a json file in an existing grid of one default column, say - ItemCode , on load the the grid should fill the below columns from json.

 

eg: - >

[
  {
    "wbsname": "A1",
  },
  {
    "wbsname": "A2",
  },
  {
    "wbsname": "A3",
  },
  {
    "wbsname": "A4",
  },
  {
    "wbsname": "A5",
  }
]
Konstantin Dikov
Telerik team
 answered on 24 Jun 2022
1 answer
2 views
Hi Team,

We are using the kendoreact library in our react code. There is an issue while using workbookOptions(). 
It fails to recognize date format in dd.mm.yyyy format. Its working fine with dd/mm/yyyy and dd-mm-yyyy format. 
So we end up with excel sheets without data.
Are you ( kendo team) aware of this issue. If so, what is the fix for this?

Regards,

Pratap
Konstantin Dikov
Telerik team
 answered on 24 Jun 2022
1 answer
2 views

hey ive tried to disable the horizontal grid lines but couldnt make it work, also i couldnt find any place talking about how to round the lines of data, is it possible? (something like border-radius)

this is my chart code:

this is how it looks: ( i want to disable the vertical lines on the background)

wanted result: (with rounded edges)

Vessy
Telerik team
 answered on 23 Jun 2022
1 answer
2 views
Hello,

Currently we are using Kendo-rect-pdf to generate PDF of react js application. This PDF generation happens on client side. Is there any way, that i can do this PDF generation on server side? I want to take advantage of all the react components and generate PDF using Kendo-Rect-Pdf on server side. Is it possible to do that?

Thank you
Vessy
Telerik team
 answered on 23 Jun 2022
1 answer
3 views

I'm sorry for not being good at English.

Using the KendoUI React demo, I've encountered a weird issue with the bar charts. I gave each chart an interval of 3, 5, or 10 seconds, intending that each one refreshes by 3 seconds, 5 seconds, and 10 seconds. But when I turn on the dev mode and confirm it, the charts refresh together every second the other chart does.

FYI, This code is to be child components into a map of the parent component, so I cannot divide that component by each page. I hope to get a good answer to this situation.

 

pages/disk-index


import { Chart, ChartTooltip, ChartSeries, ChartSeriesItem } from '@progress/kendo-react-charts';
import { useState, useEffect, useRef } from 'react';
import Disk from './disk';

export default function Home() {
    const intervalDisk = useRef(null);

    const diskData1 = [{ categoryField: 'root', value: 40, color: 'blue' }];

    const [diskData1State, setDiskData1State] = useState(diskData1);

    const isClient = typeof window === 'object';

    useEffect(() => {
        if (isClient) {
            intervalDisk.current = setInterval(() => {
                diskData1[0].value = Math.floor(Math.random() * 100);
                // console.log(new Date() + ', ' + diskData1[0].value);
                setDiskData1State(JSON.parse(JSON.stringify(diskData1)));
            }, 10000);
            return () => clearInterval(intervalDisk.current);
        }
    }, []);

    return (
        <>
            <Disk diskId="1" interval="3000" />
            <Disk diskId="2" interval="5000" />
            <div id="diskDataId2">
                <Chart
                    style={{
                        width: '90%',
                        height: '85%',
                        position: 'center center',
                    }}
                >
                    <ChartTooltip />
                    <ChartSeries>
                        <ChartSeriesItem
                            type="bar"
                            stack={{
                                type: 'normal',
                            }}
                            gap={2}
                            spacing={0.35}
                            categoryField="categoryField"
                            colorField="color"
                            data={diskData1}
                            tooltip={true}
                        />
                    </ChartSeries>
                </Chart>
            </div>
        </>
    );
}

pages/disk


import { Chart, ChartTooltip, ChartSeries, ChartSeriesItem } from '@progress/kendo-react-charts';
import { useState, useEffect, useRef } from 'react';

export default function Disk(props) {
    console.log(JSON.stringify(props));

    const intervalDisk = useRef(null);

    const diskData1 = [{ categoryField: 'root', value: 40, color: 'red' }];

    const [diskData1State, setDiskData1State] = useState(diskData1);

    useEffect(() => {
        intervalDisk.current = setInterval(() => {
            diskData1[0].value = Math.floor(Math.random() * 100);
            // console.log(new Date() + ', ' + diskData1[0].value);
            setDiskData1State(JSON.parse(JSON.stringify(diskData1)));
        }, Number(props.interval));
        return () => clearInterval(intervalDisk.current);
    }, [diskData1State]);

    return (
        <>
            <div id={'diskData' + props.diskId}>
                <Chart
                    style={{
                        width: '90%',
                        height: '85%',
                        position: 'center center',
                    }}
                >
                    <ChartTooltip />
  

Konstantin Dikov
Telerik team
 answered on 21 Jun 2022
1 answer
13 views

Is it possible to use a custom border radius for individual bars of a stacked bar chart?

 

According to the Docs, it looks like we are limited to: color, dashType and width but was wondering if I am missing something or there is another way?

https://www.telerik.com/kendo-react-ui/components/charts/api/Border/

 

Thank you!

Vessy
Telerik team
 updated answer on 16 Jun 2022
1 answer
6 views

Is this a bug? https://www.telerik.com/kendo-react-ui/components/grid/rows/row-reordering/#toc-kendoreact-dragdrop

If you try to drag item 4 between 1 and 2, it takes position #1 (not as expected, it should take position #2). This only happens when dragging between #1 and #2 - if you drag above #1, the row becomes #1 (as expected).

Vessy
Telerik team
 answered on 16 Jun 2022
1 answer
7 views

Hello all,

I'm trying to implement a functionality which relies on Kendo Grid (React + Typescript) with selectable rows (with checkbox) as in the second example in the docs:

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

Is there any way (based on that example) to make the rows conditionally disabled? Say I click one of the rows which does two things:

  • sets some filtering state (not a problem),
  • based on this state I make it impossible to select another row. They should become disabled, and greyed out (struggling to achieve this)

What I tried to do was removing pointerEvents by setting them to none, but this one unfortunately also removed the tooltip that should be attached to each row explaining why it's been disabled.

I also tried to override Grid's onRowClick event by:

onRowClick={()=>{}}
but this didn't prevent the row from being selectable.

 

Any help much appreciated,

Krzysztof

Konstantin Dikov
Telerik team
 answered on 16 Jun 2022
Top users last month
sun
Top achievements
Rank 2
Iron
Iron
Iron
Alan
Top achievements
Rank 2
Iron
Iron
Paul
Top achievements
Rank 2
Iron
Veteran
Iron
Ohad
Top achievements
Rank 2
Iron
Iron
Iron
arkan
Top achievements
Rank 2
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?