Using filterable: { ui: "slider" }, allow us to also pass a min and max value for the slider. And automatically build the filter to be something like this: { logic: "and", filters: [ { field: fieldName, operator: "neq", value: null }, { field: fieldName, operator: "gte", value: s.values[0] }, { field: fieldName, operator: "lte", value: s.values[1] } ] }
Hi, I am having a requirement to get sum and average of selected items of a grid Such as in the below example I want to get the average and Sum of selected Frieght columns eg: https://demos.telerik.com/aspnet-mvc/grid/selection
Only two specific things that I've found lacking: 1) There doesn't appear to be any functionality for Kendo UI (jQuery) that allows for easily adding new values to a multi-select, which the Telerik RadComboBox appears to have. (E.g., for an email "to" field, selecting from existing contacts or adding a new address.) 2) The responsiveness (cell-phone-friendliness) of the Kendo UI Grid is extremely lacking, specifically if allowing for multiple rows selection. (Namely, trying to scroll down the grid instead selects the rows you swipe over, so you're unable to scroll down to see rows off screen.)
Add "matches" operator (Regular Expression) both on FilterCell as well as on Filter Menu for strings. Implementation should take into account Javascript rules for Regular Expressions.
Would be nice to have the checkbox selection and multiselect enabled to use the Multiselect for check the checkboxes. https://demos.telerik.com/aspnet-mvc/grid/selection
Make Kendo Pivot Grid Editable so You can use for transactions
The grid does not have a auto generated Serial Number or Row number column built in. Although this functionality can be custom built, but I feel this is a basic thing and when you have to use the grid in different places in your program, then duplicating the same code for a simple functinoality sounds over killing and maintenance overhead.
In the kendo grid, on setting the focus on the groupable button and pressing the enter key to change the sorting order, the focus moves to the start of the page. This is a accessibility concern for users who rely only on keyboard for navigation. They need to begin 'TAB'ing from the start again after selecting an option on the grid groupable button.
jquery grid widget 1) filter should be excel kind of filter 2).should be sort and 3). remove duplicates in filter options
Viewing the grid columns and arranging data based on respective media queries
Hello, from our development I could collect some suggestions for improvement, which we would be pleased about in the future: MVC -> Grid -> Export to Excel - Do not show columns in export - currently only possible with Javascript - Display additional columns in the export that are only displayed in the export and not in the interface
I hope other developers realize the importance of this feature and vote for it. It would be nice (in fact, important to have) an event that we can hook into, after the Edit event fires but before the editor template (more relevant when the editor is a custom popup template). Let me explain. On my custom editor template, I have a few dropdownlists that are not defined as foreign keys from the grid datasource. The dropdowns are defined on the template, usually with a Read action on it. This read action fires when the template is rendered. In the Edit event, I need to set some of the elements as different or hidden or shown based on the selected value from more than one dropdown. This is needed so that some other elements are shown/hidden when the popup is rendered. The problem is, The edit event is too early to know the selected items in these dropdowns since the data for these ddls are not loaded yet. Since I need values from multiple dropdowns, hooking into individual databound events of the ddls won't work either. So, if we had an event something like "BeforeRender" on the grid that fires after all the datasources are loaded and databound for all relevant elements on the editor template, but before the template is rendered onscreen that would be great. Then, we can hook into this event and when we do, all the datasources for all the dropdowns, comboboxes etc. are loaded and databound already. We can use the items from these elements to show/hide other elements.
With the latest version, we could see extra options in Grid filter. Is there any way by which we can make it configurable?
Hi Team,
Kendo grid does not allow all columns to be hidden from column menu as it disables the check box for last column in column menu.
But if we set hidden = true and menu = false properties for column, grid hides that column from grid and column menu, but enables the checkbox to hide all columns from grid leaving it empty. After which we can't get back the columns in grid which isn't valid.
Grid should always allow at least one column to be included in grid/menu.
Please find attached screenshot and below sample link.
https://dojo.telerik.com/EHOgaJUK/2
Thanks,
Jyotika
We are working on enterprise product, which uses Progress Telerik jQuery KendoUI components extensively purchased by our Company. In which Kendo grid is used in many modules of our product.
Now a days we are working on Accessibility (i.e. keyboard and screen reader) as part of out-of-box feature of our product.
The grid has been made accessible so that it can be navigated using the keyboard arrow keys, once it receives focus via Tab Key in order of tab index or Alt + W short cut key. In turn, this has spawned up one issue in terms of keyboard operatibility. You can now tab into the grid, use arrow keys to navigate to the cell containing action buttons and then again tab to the button that you want to activate.
This is causing confusion in terms of use of the tab key. Ideally, the tab should take focus from one widget to another. That is the tab key should have taken focus into the grid and pressing it again should have navigated away from the grid. But because of the action buttons displayed within the grid for each record, that tab also navigates controls within the grid widget. This causes numerous press of the tab key just to traverse past the grid widget.
Now due to this, user needing to press the tab key multiple times is an accessibility issue.
Also while referring Grid control demo on https://demos.telerik.com/kendo-ui/grid/editing-inline , we found the same type of behavior when traversing through “Edit” and “Delete” buttons. One of the code snippet developed by us using dojo.telerik.com can be referred on https://dojo.telerik.com/@chiragvidani/ulOzaniX/2
It would be great if this issue is addressed with a good accessible way.
Please find below reply received from on the accessibility forum, when we tried raising the issue to find out the remedial solution:
Reply 1 by "Glen Walker"
Just to make sure we're talking about the right type of component, a grid vs a table, a grid is like a spreadsheet where you can interact with all the cells. I agree that a grid should be a single tab stop so that you can easily navigate to the elements after the grid. However, I have seen implementations that once you're in the grid and in "edit mode", you can tab amongst the cells. This is helpful if the cell contains an element that uses the arrow keys (such as a radio or select) and you want the arrows interpreted by the element and not navigate to the next cell. You then need to get out of "edit mode" (perhaps via the escape key) in order to tab off the grid.
A table, on the other hand, doesn't let you interact with the cell directly but that doesn't mean a cell cannot have an interactive element. That is, you can have links or buttons or inputs in a table cell and it'd still be considered a table and not a grid. It's kind of a fine nuance. A grid lets you interact with the cell itself and a table might let you interact with an element that is in the cell, but not with the cell itself.
There is, of course, more to this than that but I was trying to keep it basic and simple.
So, that being said, do you really have a grid or a table?
Let's say you really have a table instead of a grid, and that one of the cells in your table has several buttons, and that pattern is repeated on every row. You would indeed have a bunch of tab stops, making it difficult to navigate beyond the table.
One possibility is if all the button actions are grouped together, they could be considered a toolbar. A toolbar is one tab stop and you arrow between the buttons, but you'd still have the problem of having a toolbar on every row. A toolbar would reduce the number of tab stops compared to having all separate buttons but you'd still have X number of tab stops for X rows. One for each toolbar.
Maybe a grid in that case would be better. Tab to the grid, tab again to whatever element follows the grid. Tab back to the grid and use the arrow keys to navigate to the desired row. Maybe the row goes into "edit mode" automatically when it receives focus with the arrow and then all the interactive elements in the row get a tabindex of 0.
That might be a bit non-standard and there probably isn't a good "role" to explain the behavior. A bit of usability testing might be required.
Thanks,
Chirag Vidani
We need a way to disable the _step function (kendo.web.js) from being run whenever keying up or down in a nullable NumericTextBox grid column. Without this, moving between cells is setting the value of the cell being stepped out of to zero despite no text/numerical input. Our workaround was to override the Kendo JS to skip the majority of the _step logic by checking for whether spinners were disabled:
if(that.options.spinners === false) { return; }
See support ticket logged for further information and code/video example: https://www.telerik.com/account/support-tickets/view-ticket/1408355
### Reproduction of the problem
1. Run the Checkbox selection demo in IE 11.706.17134 - https://demos.telerik.com/kendo-ui/grid/checkbox-selection
2. Try clicking a checkbox
### Current behavior
Two clicks are required to change the state of the checkbox.
### Expected/desired behavior
Checkbox should be checked/unchecked with a single click
### Environment
* **Kendo UI version:** 2019.2.514
* **Browser:** [ IE 11.706.17134 ]
Cannot read property 'groupHeaderColumnTemplate' of undefined.
I have my grid, with 4 columns:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: Utils.getUrlServices() + "getGrid",
dataType: "json",
}
},
requestEnd: function (e) {
},
schema: {
model: {
fields: {
id: {type: "number"},
name: { type: "string" },
namecompany
: { type: "string" },
hours: {type: "number"},
date: {type: "date"}
}
}
},
pageSize: 500,
group: [
{
field: 'name',
aggregates: [
{field: "hours", aggregate: "sum" }
]
}, {
field: 'nomeImpresa',
aggregates: [
{field: "hours", aggregate: "sum" }
]
},
{ field: "hours",
aggregates: [
{field: "hours", aggregate: "sum" },
{field: "name", aggregate: "sum"},
{field: "nameCompany", aggregate: "sum"},
{field: 'date', aggregate: 'sum'}
]
},
{field: 'date',
aggregates: [
{field: "hours", aggregate: "sum" }
]
}
],
aggregate: [
{field: 'hours',aggregate: 'sum'}
]
});
self.Grid.set("source", dataSource);
When i grouping for Date field, the browser run this error:
kendo.all.js:65435 Uncaught TypeError: Cannot read property 'groupHeaderColumnTemplate' of undefined
at HTMLTableRowElement.<anonymous> (kendo.all.js:65435)
at Function.each (jquery.min.js:2)
at I.fn.init.each (jquery.min.js:2)
at init._renderGroupRows (kendo.all.js:65417)
at init.hideColumn (kendo.all.js:64983)
at Function.KendoUtils.hideGridColumns (kendo.utils.js:330)
at init.dataBound (eval at <anonymous> (jquery.min.js:2), <anonymous>:77:32)
at d (jquery.min.js:2)
at init.handlers.<computed> (kendo.all.js:9520)
at init.trigger (kendo.all.js:124)
When clicking on CheckBox to select a line, the widget check other checkbox (on other column of the same line) inserted from column template.
I suppose that the selector that the system use is too large.
For information, i created a template for boolean column based on how kendo generate checkbox structure (just de be coherent)
See the code extracted from https://dojo.telerik.com/EqiPIkiV
var checkBoxtemplate = function(boolValue){
var checkedStr = '';
if (boolValue) {
checkedStr = 'checked="checked"';
}
return '<input class="k-checkbox" data-role="checkbox" ' + checkedStr + ' type="checkbox"><label class="k-checkbox-label k-no-text smi-checkbox-fordisplay"></label>';
};
$("#grid").kendoGrid({
columns: [
{
selectable: true,
width: '30px'
},
{ field: "name" },
{ field: "age" },
{ field: "administator",
template: function (dataItem) {
return checkBoxtemplate(dataItem.administator);
}
}
],
dataSource: [
{ name: "Jane Doe", age: 30, administator: false },
{ name: "John Doe", age: 33, administator: false },
{ name: "BigBoss Doe", age: 70, administator: true }
],
selectable: true
});