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?
Hello,
I am using React Multiselect in my project. I need every item in the multiselect component selectable with checkboxes and multiselect itself filterable. It would be very nice if you add this features to Multiselect component as built in. There is a workaround which I share links below for this but we need to do all this stuff manually.
1. Checkboxes:
2. Filterable
Thanks
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'd like the sorting to be correct and not based on the browser settings.
From support ticket:
We've noticed that our grid is not sorting correctly in our local language (Swedish). I've added LocalizationProvider and IntlProvider around it. The translation works fine.
In Swedish it would be sorted: A, B, Å
It's common in software that A and Å is sorted next to eachother but this is wrong.
I've tried using locale "sv" (language) and "se" (country) but neither sorts it correctly.
Reply on support ticket
We are internally using the built-in JavaScript method localeCompare to compare the values:
if (a.localeCompare) {
return a.localeCompare(b);
}
That means that we will compare the data based on the current browser locale. Still, the result can vary based on the machine. In cases, like this one, we can recommend using server filtering the ensure that the results are specific to the Swedish culture regardless of where this is loaded.
Another option can be to log a feature request that will take the culture parameters from the IntlProvider and pass it as a second parameter to the localeCompare function.
Imaging a GridColumn field that is a simple object {name:"My Item", value: 123}. It would be great to be able to define properties of the object as what to display without having to build a custom renderer.
displayField/displayFunction as a callback function with the fieldName of the columns and the dataItem of the row as parameters
const nameDisplay = (field, dataItem) => {
return "some value"
}
...
<GridColumn field={"name"} displayFunction={nameDisplay}
we have X(cross) for combo box but it is not coming for datetime picker
Hi,
we are currently using the Kendo jQuery PivotGrid in our application. We have already migrated some controls to React in our application and would like to switch the PivotGrid to React as the next control.
In the jQuery PivotGrid there is the possibility to export the configured PivotGrid to Excel. You can see the feature here: saveasexcel
Is this functionality also available with the React PivotGrid? And can you show us an example how to use this feature to export the pivot grid data to excel?
If this functionality doesn't exist yet, when can we expect it? Are there already plans for this or can you already vote for it somewhere?
Regards,
Oliver
We are migrating our legacy application which uses Telerik for Silverlight to react application with KendoReact controls. I am converting one screen which uses RadTreeView which gives us Drag and Drop with Reordering feature. Now, in KendoReact, TreeList control does not provide both the features.
Here is what we get when we start dragging item in Silverlight control:
I am expecting the same behavior in KendoReact: TreeList as we have to achieve the same behavior in our react application. This link has some discussion with support team.
Thanks,
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
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
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).
Hi Team,
we are looking the similar functionality in React Grid? Could you implement this feature in feature releases?
columns: [
{
field: "id",
width: 80,
filterable: {
operators: {
number: {
eq: $translate.instant("Is equal to")
}
}
}
},
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.
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
Hi Team,
we are looking the similar functionality in React Grid? Could you implement this feature in feature releases?
Kendo jQuery UI : https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/pageable.refresh
pageable: {
refresh: true,
},