Dear Support Team,
I have numbers of kendo charts in my app, but I need to modify the boder-radius for the tooltip of my donut chart.
I've checked, with the browser, the existence of a couple of CSS classes I can work on, but they are generic and they work for all the charts in the app:
.k-sparkline-tooltip-wrapper>.k-popup, .k-chart-tooltip-wrapper>.k-popup (classes for the ChartTooltip component: for this I can ad an ID)Inside this component the Kendo library creates a new component, which I can't configure any IDs on and owns the css class k-chart-tooltip k-chart-tooltip-inverse needed to override the border-radius property.
Is there a workaround or any other configuration to set the border radius for a tooltip of a single chart, without modify all other charts in my app?
Thank you
Kind regards
Please allow the Switch component to accept a title prop so that the Tooltip component can be used with Switch. Switch doesn't really support long labels, or labels at all in some themes, so it would be nice to be able to use Tooltip component with Switch component.
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
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.
Hi,
I require the ability to use generate a PDF of React content using the PDFExport component, but instead of calling the `save()` function to download a file to the client's disk, return the blob/URI back to the JS which can be processed further.
I tried using the `drawDOM` method, however it doesn't support many of the features I require for `PDFExport`, such as 'Author', 'Title' and most importantly 'pageTemplate'.
Is there a way I can use the drawDOM method to achieve the same functionality as the core PDF export? If not, could another method be exposed of `saveURI` which returns a promise similar to drawDOM?
In addition, is there any temporary workaround you can think of that would facilitate what I'm trying to achieve? I couldn't spot any event I could intercept to solve this problem.
Kind regards,
Thomas
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.
Hello
Currently, the KendoReact Grid can only select all columns as shown in this demo:
https://www.telerik.com/kendo-react-ui/components/grid/selection/#toc-customizing-the-selection
We wish to be able to select only specific columns programmatically.
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}`?
Hello,
I'm trying to implement an accessible table using your Grid React component. The idea is for the users to be able to navigate the table using the keyboard if need be. Because we are a government contractor we have to make our product accessible and, testable using the Government issued tool for testing, ANDI.
When I use a normal table, I can implement scopes in the table header, either for the column or the row and thus create relationships between headers and cells as well as, use the keyboard to navigate the entire table.
When the same table is implemented with the Grid component, there are no scopes in the header then again, both header and body are separate even though they reside inside a div with role=grid on it which in turn, contains two divs, one for the header and one for the body each in turn, implementing a table: one for what would be the headers and one for what would be the body. I'm attaching screenshots even though I'm sure you know the product.
The fact that both the <thead> and the <tbody> reside in different places, even though they are within the grid, makes it impossible to add associations furthermore, we're using a data-table and the grid. I tried using different props but, as long as both the header and the body are separate, the ANDI tools can't find the table.
Question is, is there a way to make this table truly accessible just as a one created using the semantic table tags?
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?
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}
/>
);
};
Add couple text lines to extend TextArea size and remove these empty lines in any way
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.
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;
}
Start typing anything
Height of textarea component is decreasing
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}
/>
);
};
Add couple text lines to extend TextArea size and remove these empty lines in any way.
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.
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;
}
Start typing anything
Height of textarea component is decreasing
we have X(cross) for combo box but it is not coming for datetime picker