How can I prevent a row from jumping up or down due to a column's sorting or filtering? For example, in this link (https://stackblitz.com/edit/react-r5nvbb?file=app%2Fmain.jsx), sort by First Name, and then edit a cell (for example, edit the first name in the first row, Andrew Davolio to Jan Davolio) - how to prevent that row that's being edited from getting sorted dynamically while the user is interacting with it?
This is a major problem when someone filters for only one value (say, Andrew in the First Name column), and wants to change the first name to something else (anything but Andrew) - the row in edit completely disappears from view because the grid is filtering dynamically.
I have a react class component in which I need to use kendo Internationalization. Kendo internationalization is already setup and working with some functional components.
Unfortunately when I follow Kendo's docs examples for registerForIntl() I get the following typescript error:
Argument of type 'typeof DataGrid' is not assignable to parameter of type 'ComponentClass<{}, any>'.
Types of parameters 'props' and 'props' are incompatible.
Type '{}' is missing the following properties from type 'DataGridProps': data, total, columns
Any tips on how to get registerForIntl() working with class components with custom props interface?
I'm trying to make my web app behave a bit more like a desktop app, where rather than letting the browser window scroll, the components are laid out to fit vertically and any scrolling is done within the components.
I know I can do this raw with CSS flexbox, but I'd like to know the best practice for doing this with Kendo UI components. It's not clear to me where to change styles and attributes to achieve this type of layout.
How to disable the Incremental Steps in dateinput and datepicker.
I'm sorry if this is already ask but i cant find similar topic.
I try to make show/hide column similar to this React (forked) - StackBlitz using checkboxes.
When i select all false, instead of all column dissapear, it will render all field of the Grid data object.
For example you can set show: false on every column in columns state in React (forked) - StackBlitz
First state when only 2 column shown
When all column show property set to false
Is it a bug or just the grid works?
I have setup a listening event on the page:
window.addEventListener("resize", updateSize);
And setup the column widths to use a percentage of the window size.
When the window increases in size it works and when I decrease it back to the point of the original window size it works. It does not seem to work when I reduce the window below the original width it does not appear to work.
I am using Typescript and I have implemented a select column (check box select column) using the GridColumn and adding a "selected" property to each object in the array that is being bound to the grid (much like the example shows in the docs). Everything works great until I group by a column. At that point, I get a warning that is coming from one of the telerik js files (column file):
Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled.
While this is just a warning and it goes away when using the production build of react, it is still something we would like to try to eliminate if possible. Has anyone else experienced this warning before and is there any solution for it?
I have KendoReact Editable Grid with below Columns
If Lastname and firstname exists 100 how to show error message on top of grid as validation summary, Please suggest.
Hi Team,
Control : numeric text box
How to restrict the user from entering negative value.
If we set min value as min={0} it is allowing user to enter negative value and then on focus out it is reverting the value to min that is "0". Our expectation is hard restriction by not allowing to enter the negative value.
I'm, surprised we don't have keyup and keydown events for numeric text box