Hello,

i am new to React and Kendo React UI.

I am reading the documentation for Gantt, and if i understand it correctly i can customize header column (headerCell?), but I dont know how. Is there any examle ?

I wound like to customize the column with dates.

Thank you, Matjaz Reberc

Hi Team, 

###Current Behavior

When displaying checkboxes, they are not aligned for nodes with children vs. nodes without children

### Example

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

### Expected Behaviour

Nodes checkboxes should be aligned the same regardless of if they have children.

###Version

4.8.0

Thanks and Kind Regards,
Grant

Looking at the JSDoc for for `toDataSourceRequestString` and `toDataSourceRequest`, they both appear to have JSDoc above them, showing the parameter as:

 * @param {DataRequestState} state - The state that will be serialized.

Should this actually have `@param {DataSourceRequestState}`?

Given the simple example:

const RatingContainer = () => {
  const [ratingValue, setRatingValue] = useState(0);

  const clearRating = () => {
    setRatingValue(0);
  }

  const onRatingChange = (event) => {
    setRatingValue(event.value);
  }

  return <div>
    <Rating 
      value={ratingValue}
      onChange={onRatingChange}
    />
    <Button
      onClick={clearRating}
    >
      Clear
    </Button>
  </div>
}

export default RatingContainer;

The Rating component behaves as expected when updating `ratingValue` through the Rating component. However, when I want to clear the rating value with the 'Clear' button to update the `ratingValue`, the number of stars displayed doesn't update reflect the value of `ratingValue`.

Here is a subsection of my package.json file.

   "@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.17.5",
    "@progress/kendo-licensing": "^1.3.0",
    "@progress/kendo-react-animation": "^5.13.0",
    "@progress/kendo-react-buttons": "^5.13.0",
    "@progress/kendo-react-charts": "^5.13.0",
    "@progress/kendo-react-common": "^5.13.0",
    "@progress/kendo-react-data-tools": "^5.13.0",
    "@progress/kendo-react-dateinputs": "^5.13.0",
    "@progress/kendo-react-dialogs": "^5.13.0",
    "@progress/kendo-react-dropdowns": "^5.13.0",
    "@progress/kendo-react-editor": "^5.13.0",
    "@progress/kendo-react-excel-export": "^5.13.0",
    "@progress/kendo-react-form": "^5.13.0",
    "@progress/kendo-react-grid": "^5.13.0",
    "@progress/kendo-react-indicators": "^5.13.0",
    "@progress/kendo-react-inputs": "^5.13.0",
    "@progress/kendo-react-intl": "^5.13.0",
    "@progress/kendo-react-labels": "^5.13.0",
    "@progress/kendo-react-layout": "^5.13.0",
    "@progress/kendo-react-listview": "^5.13.0",
    "@progress/kendo-react-notification": "^5.13.0",
    "@progress/kendo-react-pdf": "^5.13.0",
    "@progress/kendo-react-progressbars": "^5.13.0",
    "@progress/kendo-react-tooltip": "^5.13.0",
    "@progress/kendo-react-treelist": "^5.13.0",
    "@progress/kendo-react-treeview": "^5.13.0",
    "@progress/kendo-react-upload": "^5.13.0",
    "@progress/kendo-svg-icons": "1.4.2",
    "@progress/kendo-theme-bootstrap": "^5.2.0",

Issue #1

Given:

Controlled TextaArea componenet with autoSize and rows properties.

const App = () => {
  const [state, setState] = useState();

  return (
    <TextArea
      value={state}
      onChange={(e) => setState(e.value)}
      autoSize={true}
      rows={2}
    />
  );
};

When:

Add couple text lines to extend TextArea size and remove these empty lines in any way

Then:

Content from TextArea field is removed but TextArea height stays the same, doesn't come back to it's initial value. It's different comparing to example from your docs where example contains uncontrolled component.

Issue #2

Given:

Controlled TextaArea componenet with autoSize and rows properties.

const App = () => {
  const [state, setState] = useState();

  return (
    <TextArea
      value={state}
      onChange={(e) => setState(e.value)}
      autoSize={true}
      rows={4}
    />
  );
};

and styles like these

.k-textarea textarea {
  border: 1px solid blue;
}

When:

Start typing anything

Then:

Height of textarea component is decreasing

Hi team, 

Im my example (see here), I've added a 'name' attribute to the 'Persons' resource data, and changed the textField mapping to use the 'name' field, however the scheduler is still displaying the results of the 'text' attribute. 

Leading me to think that the scheduler is hardcoded to only look for the text attribute, because if its changed/removed, the scheudler does not display anything, regardless of what the 'textField' value is.

Please advise.

Thanks,
Grant

Hi,

I would like to be able to specify a Grid Column template for the data without having to replicate the entire cell and its properties. Please see below for justification:

Consider the following example of KendoReact Grid Cell customisation: https://www.telerik.com/kendo-react-ui/components/grid/styling/#toc-adding-custom-cells

Following this approach results in the loss of a lot of properties from the grid cell compared with 'default' cells e.g.

<td colspan="1" class="" role="gridcell" aria-colindex="1" aria-selected="false" data-grid-col-index="0">Chai</td>
<td style="background-color: rgba(55, 180, 0, 0.32);">18 <span class="k-icon k-i-sort-asc-sm"></span></td>

These properties are important for many reasons including accessibility. There is another example of KendoReact Grid Cell customisation that preserves these properties here: https://www.telerik.com/kendo-react-ui/components/grid/cells/#toc-customization

e.g.

<td colspan="1" class="" role="gridcell" aria-colindex="4" aria-selected="false" data-grid-col-index="3">39</td>
<td colspan="1" role="gridcell" aria-colindex="5" aria-selected="false" data-grid-col-index="4" style="color: red;">false</td>

However, there is a considerable amount of code required to achieve this:

const CustomCell = (props) => {
  const field = props.field || "";
  const value = props.dataItem[field];
  const navigationAttributes = useTableKeyboardNavigation(props.id);
  return (
    <td
      style={{
        color: value ? props.myProp[0].color : props.myProp[1].color,
      }}
      colSpan={props.colSpan}
      role={"gridcell"}
      aria-colindex={props.ariaColumnIndex}
      aria-selected={props.isSelected}
      {...{
        [GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex,
      }}
      {...navigationAttributes}
    >
      {value === null ? "" : props.dataItem[field].toString()}
    </td>
  );
};

I would like to be able to define a template for a cell without having to specify these properties every time.

Kind regards,

David

Hello,

We are encountering an issue with duplicate entries in our Kendo Grid with drag & drop functionality. When the grid is scrolled, clicking on any of the header cells multiple times results in the first entry being duplicated. This problem occurs on the example provided on your website as well: Kendo React Grid Row Reordering

Reproduction Steps:

1. Scroll down within the grid.
2. Click on any header cell multiple times.
3. Scroll back to the top of the grid.

You will notice that the first entry is duplicated multiple times. It appears that the reorder logic is being triggered when a header cell is pressed.

We are using version 6.1.0. Please refer to the attached video for a visual representation of the issue.

Thank you for your assistance.

This is a bug on your documentation website.

Go to https://www.telerik.com/kendo-react-ui/components/grid/ for example to see that the side panel on the left is empty in an Edge browser. It flickers then it disappears.

It works fin in Chrome and Firefox. 

Hi Support, 

Is there any org chat component or similar components in Kendo React that is similar to the Org Chart in this link https://demos.telerik.com/aspnet-ajax/orgchart/examples/overview/defaultcs.aspx?

Thanks & Regards,

Eason

On this page: https://www.telerik.com/kendo-react-ui/getting-started/

There's a syntax mismatch in end-of-line semicolons.

This line ends with a semicolon:

```js
import '@progress/kendo-theme-default/dist/all.css';
```

This line does not end with a semicolon:

```js
import { Calendar } from '@progress/kendo-react-dateinputs'
```

All teams that I know of consider it to be an error to do both ways in the same file.

The solution is to pick one way then be consistent. The broader solution is to use a linter, such as ESLint, that can process the code to ensure you're using your expected syntax and formatting.

According to https://www.telerik.com/kendo-react-ui/components/installation/source-code/#toc-source-repository the repo should be updated nightly. However it does not seem to be.

~/Projects/kendo-react-private (master)   git remote -v
origin https://kendo.git.progress.com/kendo-react-private.git (fetch)
origin https://kendo.git.progress.com/kendo-react-private.git (push)

~/Projects/kendo-react-private (master)   git fetch --tags

~/Projects/kendo-react-private (master)   git pull origin master
From https://kendo.git.progress.com/kendo-react-private
 * branch                master     -> FETCH_HEAD
Already up to date.

~/Projects/kendo-react-private (master)   git tag | grep v5
v5.0.0
v5.0.0-dev.202201182040
 
~/Projects/kendo-react-private (master)   git log
commit 4bf2535e414ba2f342ddbef8daac9ec052f04cc2 (HEAD -> master, tag: v5.0.0, origin/master, origin/HEAD)
Author: kendo-bot <kendouiteam@progress.com>
Date:   Tue Jan 18 22:41:34 2022 +0200

    chore(release): publish 5.0.0-dev.202201182040

v5.0.0 seems to be the latest tag. Could someone verify that the github repo is actually being updated?

Thanks for any help!

Currently there is no Autoscroll feature for the treelist...so when I want to drag and drop an item somewhere outside of the viewed area its klunky have to drop then scrool then drag and drop again etc.

Would really like to be able to autoscroll through the treelist

I know there you gave me an example of how to do this with custom code - is there a reason this can't be built in?   It's important and is a pain to custom implement when using custom editors for the cells

Thanks

Michael

toODataString throw exception on text filter changed from is null to contains. 

https://stackblitz.com/edit/react-ertg4z?file=app%2Fmain.jsx 

Repro step:

1. Choose filter by Name which is using text filter.

2. Change filter from Is null to contains.

3. toODataString threw exception.