Can you provide settings for the Grid keyboard navigation to selectively ignore specific keys like Enter or Tab?
I would like to use the built-in keyboard navigation as it behaves the way we want outside of one inconsistency.
I've got a grid whose rows expand to show another, templated, grid. I also have clickable links in the cells of the parent grid. Using a mouse, I can click these links directly or click the expansion icon to expand the row. Using keyboard navigation, however, I can only expand the parent row when I press enter. On grids without a templated sub-grid, pressing Enter will focus the link in the parent cell. I would like this behavior to be uniform.
I have tried intercepting the keydown event, but it seems that the expansion occurs even when I try to prevent default or return false as it happens seemingly in parallel.
Is there a way to achieve the functionality I want without resorting to overriding keydown or, if not, is there a way to cancel/control the expansion myself rather than having it automatically happen so that I can handle it in a custom keydown?
Grid example:
On this grid, when I press enter while Dialog Link column cell is selected, it expands the row.
Here
in this example is a grid without a templated subgrid. Pressing enter
on the same column focuses the "AAA" anchor tag within it, which is the
desired behavior in both grids.
My attempt to control the expansion myself via a custom keydown event. The expansion happens before this logic has a chance to finish running:
The Grid should optionally select an entire row instead of individual cells within a row. Use Case: In my app, the cells are all read-only. Below just about every grid in the app is a details view (showing the selected grid row) and I want them to have up/down keyboard navigation on every grid within the app. This should be a simple configuration setting but there is currently no easy way to get this behavior.
Hi,
It would be great if the KendoUI Grid could be enhanced to automagically recognize when it's grouping by a date field and then offer additional options to group the dates by Day, Week, Month, Quarter, or Year.
Thank you.
Barry
Request
I'd like to ask for a demo which utilizes the most up to date approach to creating a Kendo UI Grid using NPM, TypeScript, and in a SharePoint 2019 with a Gulp serve environment.
Thank you for your consideration!
Hi Team,
We are have gone through the documentation for make specific column editable. We found that we need to make it in schema. As we are using some complex objects along with ODATA expand.
We are unable to maintain or Add all the fields under schema.If we make a editable property of column to Boolean and based on value framework will me either read-only or editable.
Consider a scenario like Grid with 10 columns based on quantity, price,discount change need to calculate the tax.
Here tax calculation will be dynamic and some columns we can add on the fly.
In some cases like ODATA expand if i want to make expanded column to editable then it a tough process to edit
like above situations it will be useful if we make column editable to Boolean for achieve column level editing
Thanks
In the popup edit grid, when the editable: false option is displayed, the portion of the value is at the top rather than horizontal. Can you change it horizontal?
When resizing column widths have an option to lock the last column to the right hand border of the grid when sum of columns total width is smaller than grid. This way the grid will always fill the columns to the width of grid. For example if user reduces column 2's size in a 3 column grid then increase the size of column 3 so that it keeps the grid full width.
Instead of this:
It would look like this:
Allow using kendo templates in columns.attributes for example
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
title: "Name",
attributes: {
"data-id": "#:data.id#",
"data-clientid": "#:data.clientId#",
}
} ],
dataSource: [ { id:1, name: "Jane Doe", clientId:"#223" }, { id:2, name: "John Doe", clientId:"#354" }]
});
</script>