Hello,
Our team is using MobX-State-Tree (MST) and KendoReact TreeList control with virtual scrolling enabled. According to documentation MST model stores data as an observable array (https://mobx-state-tree.js.org/API/#array and https://mobx.js.org/api.html#observablearray).
The MST model’s field ‘tree’ is not a regular array, but a LegacyObservableArray.
From UI standpoint:
initially all tree nodes are collapsed
user clicks on i.e. 3rd tree node
selection is not displayed on any tree node (3rd node expected to be selected)
user expands 1st tree node - selection is set on the 3rd tree node
The following warning appears in the browser console.
Warning: Failed prop type: Invalid prop `data` of type `object` supplied to `TreeList`, expected `array`.
in TreeList (created by wrappedComponent)
in wrappedComponent (created by wrappedComponent)
in div (created by wrappedComponent)
in div (created by wrappedComponent)
in wrappedComponent
Model is defined as:
const TreeViewModel = types
.model('TreeViewModel', {
selectedItemUUID: types.maybe(types.string),
tree: types.optional(types.array(TreeNodeModel), []),
isLoaded: types.maybe(types.optional(types.boolean, false)),
treeTypes: types.optional(types.array(TreeNodeTypeModel), []),
})
.views((self) => ({
get treeCollection(): any {
return self.tree;
},
}))
Component is defined as:
return (<>
{!viewModel.isLoaded && loadingPanel}
<div className='treeListContainer' ref={stageCanvasRef}>
{treeListContainerHeight && <TreeList
style={{ maxHeight: `${treeListContainerHeight}px`, overflow: 'auto', }}
data={viewModel.treeCollection}
expandField={expandField}
subItemsField={subItemsField}
columns={columns}
selectedField={selectedField}
rowHeight={40}
scrollable="virtual"
/>}
</div>
</>);
The following workaround allows converting an observable array to a regular array.
.views((self) => ({
get treeCollection(): any {
return JSON.parse(JSON.stringify(self.tree)); // or self.tree.slice()
},
}))
This solution affects performance due to array copy.
Besides this TreeList uses an array copy. User’s selection and expanding don’t trigger related changes in the initial observable array in the model.
Related event handlers (i.e. onSelectionChange, onExpandChange) should be extended to make appropriate changes in the MST model.
Can you please extend KendoReact controls to support observable arrays?
Is there a better solution?
Hi Team,
If you take a look at my demo, I have 2 scheduler events, and I've created a custom SchedulerItem that renders the background of one of them to be blue.
When dragging the items around, the dragItem mains the same color with a bit of opacity, cool.
When resizing, the orange (?) one works great, this is the default color theme. However when I resize the blue one, while resizing, the resizeItem is an opaque blue, but the SchedulerItem underneath reverts back to the original default color scheme thereby mixing the colors.
Please advise.
Thanks,
Grant
Test Environment:
OS: Windows_11Browser: Version 103.0.1264.71 (Official Build) (64-bit)
Prerequisite steps:
1. Go to system settings.
2. Navigate to 'Accessibility' and activate it.
3. Navigate to 'Contrast theme' and activate it.
4. Select 'Desert/Aquatic' High Contrast theme in the combo box.
Repro Steps:
1. Open given URL https://canvasjs.com/docs/charts/chart-options/axisx/viewport-minimum/ in Edge.
2. Graph page will be open.
3. Turn on High contrast theme.
4. Verify that Graphs are not adapting high contrast Aquatic and Desert modes or not.
Actual Behavior:
Graphs are not adapting high contrast Aquatic and Desert modes. They remain same as in normal mode.
Expected Behavior:
Graphs should adapt high contrast Aquatic and Desert modes as defined. All elements should adapt to respective modes properly.
Hi there,
Im use chart component, and sometimes the tooltip on grid disappear, i dont know why, and if i put the same code on the telerik this bug doesnt happen, here is an exemplo with the same data
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import {
Chart,
ChartSeries,
ChartSeriesItem,
ChartCategoryAxis,
ChartCategoryAxisItem,
ChartTitle,
ChartLegend,
ChartTooltip,
ChartValueAxis,
ChartValueAxisItem
} from '@progress/kendo-react-charts';
import 'hammerjs';
const valueAxis = [
{
name: "",
format: "{0:n1}",
font: "10px Roboto",
},
];
const seriesValues = [
{
type: "bar",
toolTipFormat: "{0:n2}",
title: "Teste 1",
spacing: 1,
data: [27869.8616],
},
{
type: "bar",
toolTipFormat: "{0:n2}",
title: "Teste 2",
spacing: 1,
data: [13277.95],
},
{
type: "bar",
toolTipFormat: "{0:n2}",
title: "Teste 3",
spacing: 1,
data: [95164.9968],
},
{
type: "bar",
toolTipFormat: "{0:n2}",
title: "Teste 4",
spacing: 1,
data: [115579.184],
},
{
type: "bar",
toolTipFormat: "{0:n2}",
title: "Teste 4",
spacing: 1,
data: [null],
},
{
type: "bar",
toolTipFormat: "{0:n2}",
title: "Teste 4",
spacing: 1,
data: [616.7145289747288],
},
];
const ChartContainer = () => (
<Chart>
<ChartTooltip
shared={true}
/>
<ChartValueAxis>
{valueAxis.map((e, idx) => (
<ChartValueAxisItem
key={idx}
name={name}
labels={{
visible: e.visible !== undefined ? e.visible : true,
format: e.format,
rotation: "auto",
font: e.font,
}}
/>
))}
</ChartValueAxis>
<ChartSeries>
{seriesValues.map((item, idx) => (
<ChartSeriesItem
key={idx}
type={item.type}
data={item.data}
name={item.name}
spacing={item.spacing}
labels={{
font: '10px',
format: "{0:n2}"
}}
/>))}
</ChartSeries>
</Chart>
);
ReactDOM.render(
<ChartContainer />,
document.querySelector('my-app')
);
I inspected the page and realized this, that div is the tooltip and thats working normally, k-animation-container-show class, top and left properties on style;
and this one, is the tooltip that doest appear in the screen, does not have all class and style, just doesnt show up,
However, the component inside that div was rendered, as can you see
Im using this version
Repro:
Expected:
Displays a calendar popup, perhaps defaulting to the current date & time.
Actual:
Throws an exception visible in the JavaScript console. Replaces the UI with an error message.
Proof-of-Concept:
https://stackblitz.com/edit/react-gvipiu?file=app%2Fmain.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
DateTimePicker,
DateTimePickerChangeEvent,
} from '@progress/kendo-react-dateinputs';
import { Button } from '@progress/kendo-react-buttons';
const App = () => {
const [date, setDate] = React.useState(new Date());
const handleChange = (event: DateTimePickerChangeEvent) => {
setDate(event.value);
};
const handleClick = () => {
setDate(new Date('invaild!'));
};
return (
<React.Fragment>
<div className="example-wrapper">
<p>
(use Alt+<code>↓</code> to open the date-time selector, <code>←</code>{' '}
and <code>→</code> to navigate, <code>↑</code> to increment and{' '}
<code>↓</code> to decrement the value)
</p>
<DateTimePicker onChange={handleChange} value={date} />
</div>
<Button onClick={handleClick}>
Click me, then the calendar, to break the DateTimePicker.
</Button>
<div>{date?.toString()}</div>
</React.Fragment>
);
};
ReactDOM.render(<App />, document.querySelector('my-app'));
Hi Team,
I have found an issue in the Grid Component that I think needs some attention, see below.,
## Current behavior
My GridColumns are not styling correctly when i hide/show them based on an edit state (for example). Some that have no width restrictions will the shortened then not lengthed.
## Current Version
KendoReact 4.8.0
## Expected behavior
If I hide/show a GridColumn, its width should not affect other GridColumns, only the Grid overall.
## Minimal reproduction of the problem with instructions
Example: https://stackblitz.com/edit/react-ngpvuj?file=app%2Fmain.jsx
Instructions:
1. View how age is the only column visible with a width attr
2. Click "Switch Mode" and notice how 'Id' is not added, but a width of 80 is now applied to the 'lastname' column, the same width as age
3. Click "Switch Mode" back to view, and see how id is removed and a width of 60 is applied to the 'firstname' column.
## Investigation:
Some investigation in the DOPM revealed that the issue is centred around the <colgroup> of the Grid's <table>:
- step 2 does the following to the <col>s in the <colgroup>
- add a new col to the beginning with a width, for the Id column
- add a new col to the end with a width, for the Age column
- DOES NOT clear the width of the col group that used to be the age column
- step 3
- Simply removes the last <col> in the group. Does not affect hte attributes of the remaining <col>s
I hope this was informative and can be resolved soon.
Kind Regards,
Grant
Actual Result:
On navigating to ordered list items with arrow keys, Narrator is only announcing first letters of the text and while navigating with 'caps-arrow' keys, Narrator is only announcing position details of the list items.
Note: this issue is not observed with nvda
Nvda version: 2020.2
Expected
On navigating to ordered list items with 'arrow keys' or using 'caps-arrow' keys, Narrator should announce the whole text of the list item including position details.
User Impact
Knowing how many items are in a list is extremely useful to assistive technology users as they can know if they should attempt to skip the list, navigate to the end, help them recall placement of certain items, or orient themselves within the list.
The navigation sidebar smooth scroll animation doesn't work for the Calendar component.
Here is a codesandbox that showcases the issue: https://codesandbox.io/s/hopeful-river-sk4oc?fontsize=14&hidenavigation=1&theme=dark
Thanks in advance for fixing this :-)
Hi there!
I've written this component for a custom message input box for the Chat in Conversational UI for React:
import { ChatMessageBoxProps } from '@progress/kendo-react-conversational-ui'
import { FC } from 'react'
const CustomChatMessageBox: FC<ChatMessageBoxProps> = (props) => {
return (
<>
<input
type="text"
name="message"
className="h-full w-full text-base md:text-sm focus:outline-none"
/>
{props.sendButton}
</>
)
}
export default CustomChatMessageBox
I'm supplying this component to the `messageBox` prop of the Chat component. However, sending the message doesn't work; neither by pressing enter or pressing the send button. If I replace the input with props.messageInput, it works.
Any help in fixing this will be greatly appreciated!
Thank in advance :-)
The width of the Kendo React DatePicker can become small due to the container width.
In such case, consider the following use case
Users select the date part (year) and start incrementing it by the "up" key. The year date part is selected, but is partially visible,
and the users do not see the date part that they are currently modifying, while they can fully see the other date parts that are not currently in focus.
The DateInput needs a horizontal scrolling to ensure that a focused date part is fully visible to the users in case if the width of the component is narrow.
Please check the case here
https://stackblitz.com/edit/react-8dqy6j-gvgwtk?file=app%2Fmain.jsx
DateTimePicker opens above or below the link to open it, however when it's in the middle of a page, it will choose to open below and sometimes require scrolling to see all the buttons.
Would be better, if it were to open offscreen, it should be "pinned" to the bottom edge. Same for right/left/top borders of the screen.
Certain containers also make it impossible to scroll down to see the buttons, so that creates a real problem. The above proposal would fix this.
using fairly vanilla implementation of the component:
<DateTimePicker
defaultValue={new Date(ActivationDate.toString())}
onChange={handleActivationChange}
width={'8rem'}
/>
Defined a date rang. But it allows to enter a date larger than a max date of the range. Both via calendar and manually.
const minDate = new Date(1, 1, 1);
const maxDate = new Date(9999, 12, 31);
return (
<DatePicker value = {this.state.value}
min={minDate}
max={maxDate}
/>
There seems to be bug in the React Grid around date formatting inconsistencies:
Current behavior
When entering a date format of {0:dd/MM/yyyy} for a ColumnData prop, when in edit mode a calendar picker shows the date format as US date of MM/dd/yyyy.Expected behavior
The date should show as dd/MM/yyyy per the requested date format.Minimal reproduction of the problem with instructions
Create a Kendo grid with one column with following ColumnData:
const settlementDate: ColumnData = {
field: 'settlementDate',
title: 'Setlement Date',
format: '{0:dd/MM/yyyy}',
filterable: true,
filter: 'date',
editor: 'date'
};
Note that the date is displayed as MM/dd/yyyy
Change the format to "dd/MM/yyyy"
Note that when in view mode the date is displayed as "dd/MM/yyyy".
What is the motivation or use case for changing the behavior?
Currently I have to create a custom date cell for every instance of using a date field in my grid which is less than ideal.Environment
Package versions:
@progress/kendo-data-query@1.5.2
@progress/kendo-dateinputs-react-wrapper@2019.4.1014
@progress/kendo-base-component-react-wrapper@2019.2.606
@progress/kendo-drawing@1.6.0
@progress/kendo-dropdowns-react-wrapper@2019.4.1014
@progress/kendo-base-component-react-wrapper@2019.2.606 deduped
@progress/kendo-react-data-tools@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-dateinputs@3.9.0
@progress/kendo-date-math@1.2.0
@progress/kendo-react-buttons@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-dropdowns@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-grid@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-inputs@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-intl@3.9.0
@telerik/kendo-intl@1.5.2
@progress/kendo-react-pdf@3.9.0
@progress/kendo-file-saver@1.0.7
@progress/kendo-theme-default@4.7.0
@progress/kendo-theme-material@3.5.0
@progress/kendo-ui@2019.3.1113Browser:Chrome (desktop) version 78.0.3904.108
System:
Platform: Windows
Other information:
It appears that there is an incompatibility as to what a text display field requires as opposed to what a date picker requires. For text display it requires a format of '{0:dd/MM/yyyy}' whereas the datepicker requires a format of "dd/MM/yyyy".
I am trying to lock first column in Grid, when I used the instructions in Kendo React documentation I tried the same but as you see in screenshots it's not working.
In the case of multiple columns headers, the column width of the KendoReact TreeList is invalid
The tooltip display position of KendoReact Chart is incorrect
See the code.thank you
https://stackblitz.com/edit/react-vu1ffd?file=app/main.jsx
I am using the ComboBox component in IE11. When the control has a value, the clear button covers the select arrow at the right of the control. This occurs because IE11 does not allow nested calc() calls in the CSS width property, e.g.
.k-dropdown-wrap .k-clear-value {
right: calc(calc( 0.75rem + 17px) + 6.5px);
}
Removing the inner calc() works well enough:
.k-dropdown-wrap .k-clear-value {
right: calc(( 0.75rem + 17px) + 6.5px);
}
Unfortunately, this rule seems to originate from a CSS function call to which I do not have access. Is it possible to remove the inner calc()?
When rendering an AutoComplete, I get the following warning:
Warning: Failed prop type: Invalid prop `children` supplied to `Popup`.
in Popup (created by ListContainer)
in ListContainer (created by AutoComplete)
in span (created by AutoComplete)
in AutoComplete
I have tried this in the simple case below:
ReactDOM.render(