Hi,

I am using kendo react grid using sample available here.

https://www.telerik.com/kendo-react-ui/components/grid/selection/  "Section" : Customizing the Selection, where using checkbox to read all the selected rows.

Using the above sample , i have created grid with checkbox only on rows NOT on header checkbox as single selectable row. since my grid data will be changed frequently by adding or removing rows, i am maintaining data in react hooks useState and update this state will reflect in grid. all works as expected, but, i have below issue.

I am writing onSelectionChange event where i wanted to check/uncheck based on user selection and update my state based on this selection, when i try to update state object by reading all rows in grid using event.dataitems, i get rows only on specific page where pagination is enabled.

For ex, i have two pages with 10 in each, if i am in 2nd page and read all dataitems, i get only 10 rows in 2nd page. so i wanted to know how to read all the rows in grid irrespective of pagination. is there way to get it?  the reason i'm asking is useState is not updating state immediately and i am getting previous state data and i am loosing the changes made by other events(delete/add).

here is the  onSelectionChange event.

I'm currently implementing frontend and backend validation.  I want validate the posted data on the server-side, so when the validation fails, it should highlight the Inputbox and display the error below it. The error is highly likely not the same as the validator error message.

Is there any demo for this? Also,  is there a documentation on how to interact with form, like triggering validation programmatically?

Regarding the code, I've copy pasted the from from the documentation https://www.telerik.com/kendo-react-ui/components/form

Thanks in advance!

We have 3 filtered dropdowns at the top of our scheduler, below our header.

If you scroll down to where the dropdowns are at the top of the viewport and you click on one of the dropdowns, it scrolls back to the very top of the page. Is there a way to disable this behavior?

Kendo shifts lines with later start dates to the beginning (yellow line should not start until 12/31/1999):

Hi,

I have a reusable component that contains a grid but I would like to be able to pass additional <GridColumn /> definitions from consuming components to the reusable component. I'm not sure of the correct way to do this in Typescript. The best way I've come up with so far is to define props for column(s) before and after the fixed content as follows:

preColumns?: React.ReactNode | undefined;
postColumns?: React.ReactNode | undefined;

however in order for this to work properly the consuming component has to pass an array of <GridColumn /> and set a key on each of them e.g.

postColumns={[
    <GridColumn key="information" title="Information" width={160} cell={cellHelper.getInformationCell} />,
    <GridColumn key="lastUpdatedBy" field="lastUpdatedBy" title="Updated By" width={200} />,
    <GridColumn key="lastUpdatedDatetime" field="lastUpdatedDatetime" title="Updated Date" width={250} format={GlobalHelpers.DatetimeFormatForKendo} />,
]}

The disadvantage of this is having to define a key and also that I can't specify a prop for a single column only. Is there a recommended approach in order to achieve this?

Kind regards,

David

Hey there,

I wanted to see if Kendo allows for any colgroups to be used in the grid? I'd like to visually group together four columns but not actually group their values together in new buckets (if that makes sense) - any ideas other than custom-render each cell and headerCell for the columns I want to visually group together?

Thank you in advance!

Hi,

If you set a Grid as both navigatable and scrollable="none" then it results in an error: "Cannot read properties of undefined (reading '0')". This can be demonstrated by adding these properties to any of the examples on the kendo site e.g. https://www.telerik.com/kendo-react-ui/components/grid/get-started/ 

Kind regards,

David

hi,

So, I have a question in regards to in-cell editing of kendo grid. Is it possible to introduce custom components like textfield when you are editing a cell.

Setting a width on a Input component doesn't seem to work:

<Input label="Something" width={1} />

Renders to:

The code in the DOM looks like:

All the other input components (like "NumericTextBox") have the width property applied on the containing <span>, but for an Input, the containing span has always a width of 200.

Any suggestions on how to set the width of an Input properly?

Working with kendo bootstrap 4.35.1, I'm having an issue with expand row not returning k-i-plus icons, and getting k-plus icons (which either don't exist or don't render correctly. In the top picture the plus icon should be to the left of the checkbox. When clicked, the icon class name does change from k-plus to k-minus, but I can't seem to get it to render k-i-plus.