My grid is populated from state after an API call. The piece of state is called data.

const [data, setData] = useState([])

let allSelected = data.filter((item) => item.selected)

Objects in allSelected have the shape: 

[{
  _id: 1234
  selected: true,
  name: "Joe",
},
{
  _id: 1235
  selected: true,
  name: "Jim",
}]

After I perform an operation update on the selected rows, what's the best way to hide those rows?

• Is there a method to get the _IDs of the selected rows?
• Is there a method to hide a given row by _ID?

I'm looking for some way to filter selected rows from data then update state. Something akin to:

      const filtered = data.filter((item) => !allSelected.includes(item._id))
      setData(filtered)

Thanks!

I have added a TabStrip on a Dialog inside a form and if I don't set the animation parameter for the TabStrip to false I get the attached error in the browser console. Here is the part of my code so you can see what I do:

        <Dialog
            title={t(`channel:${getDialogHeadline(props.mode)}`)}
            onClose={props.cancelForm}
            width={'60%'}
        >
            <Form
                onSubmit={onFormSubmit}
                initialValues={formState}
                render={(formRenderProps: FormRenderProps) => (
                    <div className="k-d-flex-col">
                        <FormElement style={{ width: '90%' }}>
                            <div>
                                <TabStrip
                                    selected={selected}
                                    onSelect={handleSelect}
                                    animation={false}
                                >
                                    {tabPages.map((item, index) => {
                                        return (
                                            <TabStripTab
                                                disabled={item.disabled}
                                                title={item.label}
                                                key={index}
                                            >
                                                {item.content}
                                            </TabStripTab>
                                        );
                                    })}
                                </TabStrip>
                            </div>
...

And here are the kendo packages that I use:

        "@progress/kendo-data-query": "^1.5.5",
        "@progress/kendo-drawing": "^1.16.0",
        "@progress/kendo-licensing": "^1.2.1",
        "@progress/kendo-react-animation": "^4.13.0",
        "@progress/kendo-react-buttons": "^4.13.0",
        "@progress/kendo-react-data-tools": "^4.13.0",
        "@progress/kendo-react-dateinputs": "^4.13.0",
        "@progress/kendo-react-dialogs": "^4.13.0",
        "@progress/kendo-react-dropdowns": "^4.13.0",
        "@progress/kendo-react-form": "^4.13.0",
        "@progress/kendo-react-grid": "^4.13.0",
        "@progress/kendo-react-indicators": "^4.13.0",
        "@progress/kendo-react-inputs": "^4.13.0",
        "@progress/kendo-react-intl": "^4.13.0",
        "@progress/kendo-react-layout": "^4.13.0",
        "@progress/kendo-react-notification": "^4.13.0",
        "@progress/kendo-react-progressbars": "^4.13.0",
        "@progress/kendo-react-tooltip": "^4.13.0",
        "@progress/kendo-react-treeview": "^4.13.0",
        "@progress/kendo-react-upload": "^4.13.0",
        "@progress/kendo-theme-material": "^4.43.0",

I already experienced a similar issue with the TreeView component and got the answer from you that this has been an issue. See https://github.com/telerik/kendo-react/issues/723

Just thought, I'd bring this to your attention that there is the same problem with the TabStrip.

I have a range slider within my own functional component, and want to test the user setting the slider values from Jest.

I have tried:

but it errors with "The given element does not have a value setter"

I could be setting the wrong element of course, maybe I should set the slider role elements.  But I've tried those as well, to no avail.

How do I find out what setters or events are supported for an element?

interestingly, using:

does modify the component

but doesnt seem to cause any re-render!

I copied the sample code at Customizing the Selection to build my first multi-select grid with checkboxes. After I added a button with a handler to log selectedState I see that it contains an object:

Apologies for the naive question, but how does this help me process the selected rows? Are there JS techniques for putting this content in an array? Is there some way to filter an object?

I need to get an array of selected rows to move my project forward. I'm just not clear how to take the default state and use it.

Is it possible to disable a certain keyboard-navigation event?  

I don't want the user to automatically select the first suggestion when pressing enter.

I was looking at the Autocomplete src code and found `onNavigate(state: AutoCompleteInternalState, keyCode: number): void;`. How do i use this?

Is there a way to disable it or maybe a work around to override the "enter" event?

Hi Team,

I have implemented master grid using this example: https://www.telerik.com/kendo-react-ui/components/grid/rows/hierarchy/

all works fine as expected. Now, i wanted achieve functionality of expand and collapse of all rows on click of a button. may i know how to achieve and do you have any specific example?

Regards,
M.Seenuvasan

Hi

when adding this to a Grid, the "sticky" text doesnt dissapear after resizing.
This happens only when trying to resize.

        resizable={true}
        reorderable={true}
        onColumnReorder={(e) => {
          this.setState({
            ...this.state,
            cols: e.columns,
          });
        }}
        onColumnResize={(e) => {
          if (e.end) {
            this.setState({
              ...this.state,
              cols: e.columns,
            });
          }
        }}

As you can see the title "Name" is still there even thou I am done with my resize.
To make it dissapear, I need to click anywhere on the page

This only happens when you are using both onresize and onreorder.

Hello,

I have been working on implementing grid cell selection into some kendo react grids which are currently using custom cells for every cell and I have not been able to figure out how to implement the onSelectionChange event handling for the custom cells. I have looked for examples and forum posts about it, but so far haven't been able to find anything using custom cells (which appear to behave differently and don't want to handle the onSelectionChange event when clicked).

Here is a sample I have put together of what I am trying to do, but so far have had no luck with: https://stackblitz.com/edit/react-ts-gj4rce?file=index.tsx

Any feedback or help with this would be great!

Thanks,

Andrew