Telerik Forums
KendoReact Forum
1 answer
99 views

Hello

Is it possible to have a custom slot in viewItem for example :

i have a program which starts 6:17 and ends 6:32 and another one starts 6:43 and ends 7:02.

best regards.

Stefan
Telerik team
 answered on 19 Oct 2021
1 answer
107 views

I am trying to export kendo react grid using excel as per sample here https://www.telerik.com/kendo-react-ui/components/grid/excel-export/ which is working as expected.


Also I have to export in PDF Format as well. but export pdf code mentioned here(https://www.telerik.com/kendo-react-ui/components/grid/pdf-export/) is totally different than excel. is there way to achieve both excel and pdf in common code? any help will be appreciated

Stefan
Telerik team
 answered on 19 Oct 2021
1 answer
147 views

Hi,

I am working on a grid where i am enabled editable columns, all works fine as expected. my question how to disable only few rows in a grid to not editable

for example, i have 5 rows in grid and only 3 rows can be editable not others. i have column in a row that says can be editable or now

any help will be appreciated

Filip
Telerik team
 answered on 19 Oct 2021
2 answers
109 views

Hi Team,

I am working on the grid with checkbox using the sample provided here https://www.telerik.com/kendo-react-ui/components/grid/selection/

its working as stated in the example, but one question, is there way to avoid row checkbox to not checked when we click on any other column in the grid(other than checkbox column).

for example, in below screen i am clicking on product name(2nd) column and entire row is selected and checkbox is checked. i don't want checkbox to be checked when i click on other columns.

 

Filip
Telerik team
 answered on 18 Oct 2021
1 answer
101 views

Hello, i am using KendoReact Grid component, for one column i use custom component for cell, for some reason OnRowDoubleClick event doesn't fire when i double click on this cell, fot other cells double click is working fine, what am i doing wrong? is there a way to make it work?

 

event doesn't fire when you click on span element(blue on screen), but when you click on cell padding(green on screen) it does fire

it looks like i need to pass the event on span element, but i dont know which one since only event that comes through props is onChange

Andrei
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 18 Oct 2021
1 answer
100 views

I want to turn on the left Y-axis title, similar to what is in the link below, but for a Bubble chart. 

 

https://stackblitz.com/edit/react-xtyhbu?file=app/main.js

 

Thanks

Filip
Telerik team
 answered on 18 Oct 2021
1 answer
247 views

Hi. So I'm building an application where different data would be made available to the user at various times which would cause the spreadsheet they are looking at to update. New columns, rows, data, everything.

My understanding is that because this is a jQuery Kendo Spreadsheet, it's not going to act in a Reactive way. In the most basic and simple way possible, how can I achieve the desired behavior? The documentation for the Kendo Spreadsheet Wrapper tells me next to nothing.

I have a ref called 'this.MySpreadsheet' on the <Spreadsheet> component/wrapper and I'm given a variety of options when I log it and look at the contents. I suspect I can use a method in there to trigger some kind of 'destroy and then recreate', but I'm drawing a lot of red-herrings and in the interest of time, I'd like to be spoon-fed through this process.


render() {
        // let driver = this.MySpreadSheet.current.widgetInstance;
        // console.log('driver', driver);
        let numberOfColumns = this.sheetObject?.numberOfColumns ? this.sheetObject.numberOfColumns : 0;
        let numberOfRows = this.sheetObject?.numberOfRows ? this.sheetObject.numberOfRows : 0;
        let columnWidth = this.sheetObject?.columnWidth ? this.sheetObject.columnWidth : 50;
        console.log('render  method', this.sheetObject);
        return (
            <>
                <button onClick={() => this.changeUpSheet()}>HOKULOSOS</button>
                <div id='spreadsheet'>
                    <Spreadsheet
                        //rows={numberOfRows}
                        ref={this.MySpreadSheet}
                        //columns={numberOfColumns}
                        render={(e) => this.handleRender(e)}
                        toolbar={{
                            home: [
                                // for all available options, see the toolbar items configuration
                                // https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/configuration/items

                                {
                                    type: 'button',
                                    showText: 'both',
                                    icon: 'k-icon k-i-file-config',
                                    click: (e) => this.handleConfiguration()
                                },
                                {
                                    type: 'button',
                                    showText: 'both',
                                    icon: 'k-icon k-i-filter',
                                    click: (e) => this.handleFilter()
                                },
                                {
                                    type: 'button',
                                    showText: 'both',
                                    icon: 'k-icon k-i-filter-clear',
                                    click: (e) => this.handleClearFilter()
                                },
                                {
                                    type: 'button',
                                    showText: 'both',
                                    icon: 'k-icon k-i-download',
                                    click: (e) => this.handleDownload()
                                },
                                {
                                    type: 'button',
                                    showText: 'both',
                                    icon: 'k-icon k-i-upload',
                                    click: (e) => this.handleUpload()
                                },
                                {
                                    type: 'button',
                                    showText: 'both',
                                    icon: 'k-icon k-i-link-horizontal',
                                    click: (e) => this.handleShareLink()
                                },
                                {
                                    type: 'button',
                                    showText: 'both',
                                    icon: 'k-icon k-i-reset',
                                    click: (e) => this.handleResetSheet()
                                }
                            ],
                            insert: false,
                            data: false
                        }}
                        sheets={this.sheetObject.sheet}
                        columnWidth={columnWidth}
                    />
                </div>
            </>

Stefan
Telerik team
 answered on 18 Oct 2021
1 answer
105 views

We really would like to have the possibility to add a class to the tabstriptab.
The reason for that is we have a form over multiple tabs.
When an error occurds on a tab we want to color the background of this tab.

It already supports "contentClassName" but this is for the content container.
Is there a way around this or can this be put on a feature request list?

<TabStrip>
    <TabStripTab className="error" title="Paris">

    Paris form

    </TabStripTab>


    <TabStripTab title="New York City">

    New York City form

    </TabStripTab>

</TabStrip>
Filip
Telerik team
 answered on 15 Oct 2021
1 answer
425 views

Hi.

Is there a way to highlight (entire column, header, icon in the header), or add a css class to the header / column if a grid column filter is used? I used Column Menu Filter. For example, when sorting, it is an automatic functionality (arrow icon and column highlight).

Well thank you.

Vlado.

 

Filip
Telerik team
 answered on 14 Oct 2021
1 answer
74 views

Hello!

I am using area charts in my application that use multiple series in the chart. I want to use the Shared Tooltip to show the data for the day for all the series on the chart.

I got this working by using <ChartTooltip shared={true} />. The problem I am facing is the tooltip renders just to the right of the mouse pointer. This does not allow the user to seamlessly move the mouse to the right and see the progression of the data as the days go on because the mouse pointer moves over the tooltip and stops the sliding on the chart.

I have looked through the docs and I cant find anything on how to render the tooltip to a custom position that will move the tooltip out of the range of the mouse. Is there such a way? or a way to disable the mouseover event on the tooltip?

In the screenshot, the mouse is not captured but it is directly to the right of the tooltip. As you can see if I move the mouse right it will hover over the tooltip and wont show me for the next day.

Thanks!

Nate

  
Stefan
Telerik team
 answered on 14 Oct 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?