Whether the Treelist supports multi column headers ,Nest columns in the columns definition?

Like the Grid

https://www.telerik.com/kendo-react-ui/components/grid/columns/headers/

Hi,

I created a solution using KendoReact Editor.

The editor is set to enable the creation of tables (EditorTools.InsertTable).

When the property 'defaultEditMode' is set to 'iframe',  the editor inserts a correct table with a width of 100% and visible cell borders.

If I set the 'defaultEditMode' to 'div' and insert a table the table has a width of some pixels and no borders are shown. In other words, the inserted table is not usable.

I need to set the editMode to 'div' because otherwise the editor doesn't adjust its look to the other parts of the page. The font is wrong etc.

How can I get the tables to work in 'div' mode?

Kind regards

  Christian 

When using the Editor tools from https://www.telerik.com/kendo-react-ui/components/editor/tools/, the hyperlink option is disabled until I type AND select the typed text in the editor. Because the hyperlink allows for a title and a link, I believe it should not be disabled.

Also, when adding the hyperlink and title, the title does not appear in the editor

For example:
I have an empty editor with no text.

I cannot click the hyperlink option - it is disabled. (Bug 1)

I type 'hey' into the editor and highlight it (select it).

I can now click on the hyperlink option.
I type in 'http://imstilloscar.com' for the Web Address.

I type in 'Oscar' for the title. (It does not matter if I click open in new window or not).

Click Insert.

The title 'Oscar' does not appear in the editor. (Bug 2)

The editor still contains the word 'hey' and links you to 'http://imstilloscar.com' 

Problem:

The DateTimePicker does not work in IE11 due to it's failure to fully support the shorthand syntax for flex (https://github.com/philipwalton/flexbugs#flexbug-4). In order for it to work in IE11 flex-basis needs a unit defined and therefore does not support calc() in this scenario.

Potential Fix:

If you break out flex-grow, flex-shrink and flex-basis then calc() can be used for flex-basis.

Hello

There was an error calling “ chart.surface.redraw() ” 

  onRender = (args,mapValues,stackedOrderBy) => {              
        const chart = args.target.chartInstance;      

        const valueAxis = chart.findAxisByName("valueAxis");
        const categoryAxis = chart.findAxisByName("categoryAxis");

        if (!chart) return;        

           let x= 1;
            if( stackedOrderBy!="Ascending")
                x=-1;

            let axis = categoryAxis.options;

            axis.categories = axis.categories.sort(function (a, b) {
                if (mapValues[a] < mapValues[b]) {
                return -1*x;
                }
                if (mapValues[a] > mapValues[b]) {
                return 1*x;
                }

                return 0;
            });


            chart.surface.redraw();

It would be really useful to have the expandField Grid property being a function that dynamic (per row) return the attribute or null if the row cannot be expanded altogether.

The reason is that, not all rows are expandable in some situations but we currently cannot hide the toggle detail row (+) per row...

The tooltip display position of KendoReact Chart  is incorrect

See the code.thank you

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

When changing the popup setting "appendTo" to a different element that has a wider width then the input of the dropdown multiselect is not working properly.
The dropdown is attached to that element but the styling is not changing to that parent and is just taking the width of it initial parent.

Example can be found here:

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

When using the standalone popup control this is working as it should and adjusting it's width based on the parent it's appended to.

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 :-)

if (_this.element && document.activeElement === _this.element) {
                _this.element.setSelectionRange(selection.start, selection.end);
            }

@progress/kendo-react-dateinputs": "^4.3.0"

DatePicker and DateInput React components malfunction when rendered inside iFrame.

For example, key navigation between date parts is not working for the DateInput/DatePicker rendered inside iFrame.

When user clicks on the month part of the date, the month part does not get selected.

Same for day or year part.

The reason is a code similar to this in DateInput.js:

if (_this.element && document.activeElement === _this.element) {
                _this.element.setSelectionRange(selection.start, selection.end);
            }

if (document.activeElement !== _this.element) 

This code references the top level "document".

If the React component is rendered inside iFrame, we need to use the contentDocument of the iFrame to have this code working as expected.

Could replace "document" with "_this.element.ownerDocument" to make it work inside iFrame as well as in the top level window.

Now "document.activeElement" always returns the reference to the iFrame element rather than the expected date input element inside iFrame.

We are implementing the application level zooming.

When user changes the zoom level from "100%" to , say, "200%",

all the components on the web page rerender proportionally bigger.

And we need to zoom the DatePicker react component as well.

We tried to use unofficial "zoom" CSS style property

https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

and "scale" CSS function, but that does not give a good solution.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()

If that takes time, please advise an approach how we can achieve zooming of the DatePicker/DateInput react component.

So far only interested in zooming of the DateInput and calendar toggle button (not popup Calendar itself).

The SCSS files from the kendo-theme-material contain !important rule, that makes it difficult to override the styles in the consuming application.

We have a requirement to customize the DatePicker Kendo React component so that it has a border around all 4 sizes, as by default the theme has the border only on the bottom.

We have applied a new custom style to k-picker-wrap  and added the 
border-top-color: $datetime-border !important;

style

But due to the !import rule in the file 

@progress\kendo-theme-material\scss\datetime\_layout.scss, line 15

the custom style that we applied in the consuming application does not get applied.

Please find screenshots with the details of the problem.

The screenshots indicate that the custom style for the border-top-color did not get overriden, and the box is missing the top border.

Kindly advise approach that we can use to customize the CSS styles that has !important CSS rule, so that we can override the styles defined in the material theme.

Hi There,

This is the kendo ui for jQuery scheduler we use in our older version of product. Note that the resources are across the top, and dates down the side.

We have switched to react and we want similar view. This is the closest we can get.

The resources are on left hand side so we cannot see all the resources. 

Kendo-ui for jQuery has an additional boolean property ‘date’ (https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/group) which groups the view by date down the left hand side, and resources across the top.  There is no alternate property available in kendo-react-ui which will result in same appearance as it does in kendo-ui.

We are using kendo scheduler version 4.0.0.

Is there any way to achieve this? Do we have to implement a custom view? If so how?

- Papiya

The DatePicker component has a `toggleButton` prop which we use for customisation, but this prop is missing from DateTimePicker and TimePicker, this makes an inconsistent API and is frustrating for us because we cannot easily apply the same customisation to them.

Please can you add `toggleButton` prop to DateTimePicker and TimePicker.

1. Configure a Kendo React Grid with paging on a react-bootstrap tab that is hidden on initial load
2. Navigate to the tab - the Grid is rendered with truncated paging controls and no item count
3. Resize the screen in any way - the full paging controls and item count are restored

Is there a workaround for this issue?