I have an arbitrary number of Cards being returned from a database query. I would like these cards to layout horizontally and automatically line wrap. I've tried the ListView, but I can't find a way to make it horizontal. I also tried the GridLayout, but it doesn't seem to work if you don't specify the row and column explicitly. And the StackLayout just puts them all on the same row, no matter how many of the Cards there are.

Do I have to manually divide them up into rows myself? So if I want 4 cards per row, and I have 20 cards, I programmatically create the 5 rows? Is there a better option?

Thanks!

Tye

Hi,

Implementing radio buttons in the grid - where the user can only select one row at a time - probably entails a custom cell with a radio button in each row - where the 'name' property is the same for all the rows. A search in the grid forums for the keyword 'radio' did not yield a result. Since this could be a fairly common scenario was checking to see if there is a sample for this that has already been created.

Thanks and regards,

Amit

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.

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

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

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.

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

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

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