Hi Team,

I would like to report the following Major bug for KendoReact v4.9.0:

Duplicate:
1) Open the Datepicker Demo page
2) Open any of the datepickers and click the month name, as you will see a few months are hidden on the right had side.
  The same behaviour continues if you click the year or decade.

Thanks and kind regards,

Grant

PS. This feedback form only allows me to select a "KendoUI for jQuery" version number.

Looking at the deliver1.PNG, there is a grid with a 'MultiColumnComboBox' component inside one of the columns. When a name is removed from a role in one row (deliver2.PNG), then that row is deleted/removed, the row below it moves up but loses its name on the UI but the data is not effected (deliver3.PNG).

Can confirm all data is intact when passing information to the 'MultiColumnComboBox' component, it's just a UI bug which doesn't display the value that was selected in the unedited/deleted row. Can also confirm this bug exists in other grids with 'MultiColumnComboBox' components.

The code path is as follows in images code1.PNG, code2.PNG, and code3.PNG. It can be seen there is a UserComboBoxCell element which returns a component called 'EditableGridMultiColumnComboBoxCell'. It is this component that uses the the 'MultiColumnComboBox' component.

Hi team, 

Im not sure if this is a bug or an incomplete feature, so please advise.

1) TabStrip / Window behavior in v4.8.0 with bootstrap theme 4.40.0, see https://stackblitz.com/edit/react-wdzeyo?file=index.html
Please note the style and behaviour of the window, its above the modal and can be dragged anywhere on the screen, even though it was rendered from within the TabStripTab component

2) TabStrip / Window behavior in v4.9.0 with bootstrap theme 4.42.0, see https://stackblitz.com/edit/react-zhkfdp?file=app%2Fmain.jsx
As you can immediately see in this example, the TabStripTab heading is also above the modal, an obvious bug
My concerns are around how the window can no longer be dragged outside the TabStripTab container. Is this by design, beacuse in my use case, my tabs are smaller than my windows.

Note: I have not tested the windows with any other components.

Please advise.

Many Thanks,
Grant

Expected:

Narrator shouldn't be mute , keyboard focus and narrator focus should be in sync and narrator should announce the info about the menu items clearly

User Impact:

Users with visual impairment who rely on screen readers will face difficulties if narrator is not announcing any information about the menu items present in combo box while navigating through them.

Hi,

the current filter is great but a little bit difficult to use. I would like to see an inline filter like the following screenshot:

It is used by many applications. Just to name a few

* Gitlab (where the screenshot is from)
* Contentful (CMS)
* Google Cloud Console

Hello Team,

With respect to the ticket - https://www.telerik.com/account/support-center/view-ticket/1547304

Currently, when we drag and drop items between multiple trees, item is getting removed from source and added to the destination. Would be nice, if there is an option to copy the item (while dragging) instead of removing from the source.

Introduce a Format painter/brush tool that will allow copying the format from one selection to another (as in MS Word for example)

The format painter lets you copy all of the formatting from one object and apply it to another one – think of it as copying and pasting for formatting. Select the text or graphic that has the formatting that you want to copy.

Right now you have the ability to mark a field "Optional" in the label component.   This is fine unless you have a large form and almost everything is optional.  It will then look cluttered.

On the other hand, you don't have a "Required" option.  

I would like to add a prop for subtext so that I can change the  subtext from "optional" to anything I would like such as * or (Required).

What I would like to see is a full height Panel anchored to the body tag similar to a drawer, but the panel would allow me to set the Title, Close Button, and Content manually.  My intent is to create forms in the panel or to use the panel to display details of a single row of data.  What you have appears to be geared towards navigation or the display of discrete data only.

<Panel

isOpen={boolean}

hasCloseButton={boolean}

isBlocking={boolean}

footerIsSticky={boolean}

titleIsSticky={booelan}

width={number or string}

panelPosition={"start", "end" - similar to flex positions

header={JSX.Component or string}

title={JSX.Component or string}

/>

<Content>{Placeholder for Content}</Content>

<Footer>{Placeholder for Footer Content}</Footer>

</Panel>

The layout would be

------- Top Sticky

Header      Close Icon

</hr>

Title (could be in the sticky or not)

------ End Top Sticky

Content - Scrollable

Footer

here is a quick repro: https://stackblitz.com/edit/react-dfwz3q?file=package.json

in package.json just switch @progress/kendo-react-grid from 4.10.0 back to 4.9.0 and the column menu renders.

bug still present up through 4.11, 4.12, and @latest 4.13

we have X(cross) for combo box but it is not coming for datetime picker 

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

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

Example on stack blitz

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}`?

A few suggestions for the React Grid (as of v5.0.1) to help devs conform to accessibility compliance...

1) Standard HTML tables can contains a <caption> element, which screenreaders will use as the descriptive name of the table. Kendo Grid does not appear to have any way to name the table.

2) Related to number 1, other ways to assign a descriptive name to a table may be to include a `title`, `aria-label` or `aria-describedby` attributes, but none of these work on <Grid>. They are not rendered into the HTML if passed as props.

3) Allow GridCell and other Cell components to take `children` to render. The current documentation generally advises us to override the `cell={}` prop on a GridColumn for custom cell rendering. What is not listed in the docs is that doing what seems like the obvious thing:

<GridColumn cell={() => <td>myContent</td>} />

actually breaks accessibility. At a minimum the cell MUST get the attributes

            role={'gridcell'}
            aria-colindex={props.ariaColumnIndex}

to have the table actually be represented correctly in most screen readers. The Kendo <GridCell> component would normally add these, but only renders the field from the dataItem. It can only render custom data if the `render` prop is set, in which case it yet again does not render the `<td role= aria-colindex=` portions on it's own.

What I'm getting at is, everyone who ever wanted to render a custom cell in Keno Grid always had to make their own cell component that added at least the `role` and `aria-colindex` attributes, and if they didn't, they probably unknowingly broke accessibility.

Kendo could make this clearer in the docs (including the accessibility page for the Grid), and could easily alter GridCell to render `children` if they are passed. Then we could do:

<GridColumn cell={<GridCell><button>yay</button></GridCell>} />

and have the rendered HTML:

<td colSpan="1" style="" class="" role="gridcell" aria-colindex="1" aria-selected="false"><button>yay</button></td>

I think in GridCell this would be as easy as changing:

        defaultRendering = (
          <td
            colSpan={props.colSpan}
            style={props.style}
            className={className}
            role={'gridcell'}
            aria-colindex={props.ariaColumnIndex}
            aria-selected={props.isSelected}
            {...{[GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex}}
            {...navigationAttributes}
          >
            {dataAsString}
          </td>

        defaultRendering = (
          <td
            colSpan={props.colSpan}
            style={props.style}
            className={className}
            role={'gridcell'}
            aria-colindex={props.ariaColumnIndex}
            aria-selected={props.isSelected}
            {...{[GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex}}
            {...navigationAttributes}
          >
            {children || dataAsString}
          </td>

All of the Kendo components that "hide" content (tab views, collapse panels, etc) don't actually hide any content. They require us to not render any children.

<ExpansionPanel
  {expanded === item.id && (
    <ExpansionPanelContent>

This just strikes me as an odd design decision. I guess I don't understand the point of these components if they don't do the 1 thing they are supposed to do; hide portions of the content.

Un-rendering the content is usually not desirable. The contents are often still important. Possibly for SEO purposes, A11y, or if they are part of a Form:

<Form
  render={() => {
    <FormElement>
      <ExpansionPanel>
        {expanded === item.id && (
          <ExpansionPanelContent>
            <Field
                name={"firstName"}
                component={Input}
                validator={() => 'always invalid'}
              />
          </ExpansionPanelContent>
      </ExpansionPanel>
    </FormElement>
  }}
/>

This makes the Form valid as long as the panel is collapsed.

Can check out how Bootstrap collapse panels work to see how most people would expect these components to behave. The contents is rendered into the DOM and JS and CSS are used to hide it. There should be a way to achieve this same behavior with Kendo.

As a workaround I end up having to do my own CSS/SASS to hide the contents

.k-expander {
  .k-expander-content-wrapper {
    height: 0;
    overflow: hidden;
  }

  &.k-expanded {
    .k-expander-content-wrapper {
      height: auto;
    }  
  }
}