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>
            </>

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>

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.

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

how do I get the selected item ID when clicking the suggested item? 

below is my data structure. how do i get the ID instead of label?

[

{ id: 1, label: 'Label 1'},

{ id: 2, label: 'Label 2'}

{ id: 3, label: 'Label 3}

]
 
This is my component.
<AutoComplete
            data={results}
            textField="label"
            onChange={onChange}
            onBlur={onClose}
            placeholder="Search "
            value={keyword}
        />

Hi,

I am implementing grid with hierarchy view, using example below

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

but i added checkbox in the child grid where we need to select on header all the child checkbox should be selected. all works fine, but when i expand multiple childs, other child's checkbox is unchecking.

for example. i have grid with 5 rows. each rows has expand button(+) when i expand first row and check on header checkbox all child in 1st row is selected. when i expand 2nd row and do header checkbox, all the 1'st rows child is getting uncheck.

not sure how to handle this. is there any specific example or guidence?

Per the subject, I want to remove the vertical gridlines.  It isn't obvious to me from any of the documentation how to do so.

Thanks

Hi,

I am using kendo react grid column with numeric editor where it is currently allowing negative numbers as well, is there way to restrict only positive numbers?

sample used:

https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/

Hello,

I have a form that is submitted manually from two buttons, so I am not using the submit button.

I am following this tutorial for the validation in a form: https://www.telerik.com/kendo-react-ui/components/form/validation/

looking at the last example it looks like I have to submit the form in order to get the validation working, is there a work around this so I can trigger the validation after my buttons are clicked? 

Thanks,