As in the JQuery version, it would be good to have the option of setting min screen width for grid column like below. https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.minscreenwidth#columns.minScreenWidth
If you create a react grid without any GridColumn components and then add those components later, the added columns do not show and the grid is empty. It appears, after a quick look that the columns have a width of 0 pixels. They exist in the html, just not displayed.
See https://codesandbox.io/s/mmr894nllp as an example of the problem. This example starts with a populated grid. You can add columns and data using the buttons above the grid. This works fine. If you then "Reset" the grid with the button, which removes all data, any attempt to add columns and data will show a blank grid.
Thanks,
Joe
I'd like to be able to get the generated pdf data from GridPDFExport in a callback, instead of saving to file. This is useful for emailing pdfs.
It can easily be achieved by adding a 'generatePDF' method to the KendoDrawingAdapter prototype such as this:
KendoDrawingAdapter.prototype.generatePDF = function (callback) {
var _this = this;
var savePromise = this.drawDOM(this.domElement, this.getDrawOptions())
.then(function (group) { return _this.exportPDF(group, _this.getPDFOptions()); })
.then(function (dataUri) { return dataUri });
if (callback) {
savePromise.then(callback, callback);
}
};
When using DateTime's in column using Grid there should really be a way to use MomentJS to convert the value in the column. In jQuery it was a simple case of template: "#:moment().format('dd/MM/yyyy')#". Can we please have this ported over.
It will be very useful if we can get the new component for IPV4/IPV6 input fields. Especially networking related products, I see lot of use cases.
They can be set as with key value.
Like in the jQuery counterpart, when I click on a cell to edit the value - I should be able to tab over to the next cell to edit it.
I discovered a lack of parity between the React and Angular implementations of the TabStrip/TabStripTab components. Specifically, in the React version the "title" prop determines the contents inside the resulting <k-link> CSS class, whereas the Angular version allows you to set a template, for more complex tab header components.
This became an issue for me, because we have overridden the CSS for a custom progress tracker component built on the tab strip in an Angular implementation. I am now tasked with replicating the component in React, but had to resort to my own TabStrip/TabStripTab classes, instead of being able to use your components. (My goal is to be able to use the existing CSS, maintained by our UX team, out of the box.)
Hope that made sense. Feel free to contact me if it's not clear what I'm asking for, or if there is already a solution to this. Thanks!
React version:
Angular Version:
};
<Grid
}}
<Column field="Date"filter="date"format="{0:d}"/>
In this way,the date will be sorting with Month, How can I sorting start with year instead of month
Grids should have auto width and max-width property
The KendoReact Tooltip component only displays tooltips on hover (the showTooltip method is called on the onMouseOver and onMouseLeave events). It would be ideal if the showTooltip method was also called on the onFocus event as well, making the user experience the same for keyboard-only users.
Most other UI libraries treat hover/focus the same for consistency and accessibility.
Bootstrap requires it:
https://getbootstrap.com/docs/4.1/components/tooltips/#making-tooltips-work-for-keyboard-and-assistive-technology-users
Material UI allows you to disable focus interaction, but the default is that focus is handled the same as hover:
https://material-ui.com/api/tooltip/#props
We are evaluating the React Grid component for our application and need to be able to have rows that span all columns. To do this, I have created a rowRender function that, for some rows, will render a single <td> element with the colspan set to 100%. The row renders fine, but the other rows, that have multiple <td> elements do not all render correctly. For my test application, they will render with a width of 8 pxs. On resize of a column, they will almost render correctly.
Here are some pictures of the issue in our test code.
https://drive.google.com/open?id=1bMwlUi7-7QiVHc6lubPiz45svHG1FSnS
I have created a sandbox that sort of reproduces the bug. https://codesandbox.io/s/w73v0x0mz8
If you select the "Show Full Row", the row with Id 999 will convert to a single <td> element with colspan='100%'. You will notice how after doing so, the last three columns collapse to a small number of pixels.
Thanks
Joe
Have a grid filter menu like the jquery and angular packages. The grid filter menu is much more compact and wastes less space than the filter row.
As in the JQuery Version, the Column Menu with selection for filter and making columns viewable, is something that makes this table solution unique. https://demos.telerik.com/kendo-ui/grid/column-menu For the solution, putting the column Definition into the state object is an Option.
currently in the React Dialog, you cannot have a Dialog with a Title but without a Close (X) button visible... Whereas in the KendoUI Dialog for jQuery, you can with the 'closable' configuration property... this should also be dynamic to hide/show/enable/disable the close (X) button while the Dialog is visible (ie. when an operation is pending, disable the close button or hide it)
The Dropdown section of the components index is described as "The DropDowns allow users to select single or multiple predefined and custom values." I didn't find a way to select multiple values on any of the components (AutoComplete, DropDown, ComboBox)
Currently there is no way to pass custom rendering component into header template (in jQuery version there was headerTemplate). For example, you are exposing headerSelection prop, but what if I want to render fancy Material UI checkbox there. Currently I do not have ability to do that with native react flow.