So I'm wondering if there is a way to group items with a heading within a combobox or dropdownlist. See attached. A regular html select uses an optgroup element to accomplish something like that.

Thanks!

Hi,

It looks like attachments are always aligned to the left even if they are from the current user https://stackblitz.com/edit/react-ypqn8l?file=app/main.jsx . How to align only user attachments to the right?

Hello, I am using Kendo React Library.

I'm having some issues with the customization of the charts:

  - I have created a donut chart and I need to animate each slice on mouse-over event scaling the slice as shown in the picture attached.

  - I have a bar chart and I need to change the style of the Category Axis Label when the mouse is over a series. I have discovered in the docs that a highlight object exists on the ChartSeriesItem but in the toggle function I do not know how to trigger the change of style for the category label.

Thanks

-- Matteo

     We have a grid that has a multiple sort on it. Icon 1 and the arrow is missing, while we can see icon 2 and the arrow. If we click on the first sort it changes to 3 with an arrow. 

Our sort descriptor is as follows:

const [sorter, setSorter] = React.useState<SortDescriptor[]>([
        { field: "orgDisplay", dir: "asc" },
        { field: "userKey", dir: "asc" }
    ]);

and we have: 

sortable={{ mode: "multiple" }}

to allow multiple sort on the grid.

Is there something that would prevent the 1 and the arrow icon from showing?

Thanks

Hi.

I have a Kendo React grid. data is coming from a fetch API. It works fine, but I have a drop down list that gets filled by another API.

Where do I fetch that data? Does anyone have a working example?

Thanks!!

Hi Kendo UI Community.

My team and I are currently encountering some difficulty with our implementation of the KendoReact Grid component. Particularly in regards to our implementation of the onColumnResize and onColumReorder functions we pass to the Grid.

A little bit of context: we get our columns from a redux store which we populate with data from a proprietary backend. We wish to maintain the array of columns here so that we can use our existing architecture to send these columns to the backend for serialization.

The problem is that for the onColumnResize function we accept "columns" and "index" as parameters. We use this index as an array index for our columns in redux. Everything works as expected when an end user has not manually reordered the columns. However; once the columns are reordered an orderIndex is applied and it is no longer correct, for the onColumnResize function, to use the "index" parameter as an array index.

We want to avoid using any conditional logic in our onColumnResize function to determine whether we should be accessing the column via the array index or the orderIndex. Ideally the orderIndex would always exist or the columns would come back from Kendo in a sorted array.

Does anyone have any suggestions please? 

Thank you in advance for any suggestions, guidance or advice!

Hi,

https://stackblitz.com/edit/react-gmfcy6-5rknaj

In above example I'm using grouping and row selection as well.
Issue is: row selection is not working when grouped. IF you remove grouping `unit in stock` and click on any row it will immediately highlight selected row.

Thanks
Vikram E.

I've category column (contains unique guid) in my data[].
While showing category column in grid, somehow I've managed to show respective category_name instead of category_id at clientside.

I'm using GridColumnMenuCheckboxFilter to show checkbox filter with all possible filterable values.
But all checkboxes in category filter popup shows category_id (which is default behavior), this is not readable to user.

Can I change labels of checkboxes in category filter popup from category (i.e category_id) to category_name.

Hi.

I am trying to implement a detail row in my grid, as shown in this example:

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

It works great, but how can I make this editable as well? I need to be able to edit all columns, details as well.

Is this possible? whatever I tried didn't work for me.

Thanks!

Hi,

I'm working on a Kendo React Grid in my application and I'm trying to figure out how to navigate each 'td' (cell) of the grid using tab key. I was able to navigate where i have buttons rendered in a cell (using cell option).

I have followed below example which uses rowRender but it was selecting whole row.

https://stackblitz.com/edit/react-njk8q2-qlvomy?file=app/main.jsx

Is there a way to navigate to each cell of the grid when using tab key?