If an Ajax validation (sync or async) is called by a custom validation, kendo grid navigation should move to next or previous cell by pressing once tab or shift + tab key, if it's valid -as normally- or cancel edit if it is not. +info in this thread: http://www.telerik.com/forums/ajax-validation-with-grid
In your article: http://www.telerik.com/forums/how-to-make-a-non-editable-column-field, many developers make the point that the read-only attribute of a column should be part of the view, not model/data. By not providing a column property to prevent editing, you have put the view logic in the wrong place. Solution: Create a read-only property to each column to prevent editing.
Hi All,
We are facing a weird issue in kendo grid when both group paging and virtual scrolling are enabled for local data. Please see https://dojo.telerik.com/ICoDAleN/2 as example.
Steps to reproduce:
1. Run the code from https://dojo.telerik.com/ICoDAleN/2.
2. Try to group "DateTime" column by drag and drop to grouping header
3. After "DateTime" column is grouped, then un-group it by click cross icon of DateTime button.
4. Now you try to scroll down the grid, until ID column reach around 40, you will see the ID will jump back to around 0, and you will never see the rows which IDs are greater than 40.
5. If you open Developer Tools of browser, you will see following errors.
Uncaught ReferenceError: DateTimeDisplayValue is not defined
6. If you group other columns, for example, group "Subject" column, and then un-group it, then scroll down the grid, you will not see this issue.
How to fix it? is there any workaround?
Thanks,
David
This currently causes the locked columns to not line up with the rest of the grid. See http://dojo.telerik.com/eZasA/2 and http://www.telerik.com/forums/column-locking-row-heights-not-matching#KsWBJy4lGkafpkwZxUYRVw
Add support for flexible width to columns on a "weight" basis (like XAML grid). Ps. I'm writting the example in MVC wrappers because I'm not familiar with the javascript initialization but I am posting this in Kendo UI Web category because it's a core feature and assume it would be implemented accordingly in every wrappers without having to specify them. @(Html.Kendo() .Grid<Employee>() .Name("EmployeesGrid") .Columns(cols => { cols.Bound(o => o.FirstName).Width("*"); cols.Bound(o => o.LastName).Width("2*"); cols.Bound(o => o.Initials).Width("Auto"); cols.Bound(o => o.JobTitle).Width("200"); // Or 200px })) -Assuming the grid is 900 pixel wide and the longest Initials (including header?) is 100 pixel -Ignoring the lost horizontal space in padding, margin, borders, scrollbars and anything else This example would give the following result: FirstName column: 200px LastName column: 400px Initials column: 100px JobTitle column: 200px
When adding Multi-Level Hierarchical Grid no option to make single select mode for the whole grid so that when i click a row on the master grid and another in the details grid and one other again in the 3rd sub-details grid i have both 3 of the rows selected.
Kendo Grid should expose some method which are exposed by other controls...like selectable and disable...for k-selectable class. So that one can enable or disable grid on external button click.
You guys do such a great job of allowing us to extend your product for our needs. And I know that you have recently added the Search Panel to allow us to perform a search against the dataSource. However, I would like to put that search box/button somewhere else completely on my page.
I've been able to get around this by using the code in kendo.grid.js to use my own click/keypress events to invoke the filter based on the new search options.
configureSearch takes two jQuery selector strings to hook into click/keypress events. I only want to search when the user hits ENTER instead of after each keypress. Then it executes the private search function.configureSearch(inputSelector: string, clickSelector: string) {
const searchFn = this.search;
if (this.grid.options.search == null) {
throw "search field(s) not set for grid.";
}
const inputElement = $(inputSelector).keypress(function (this: HTMLElement, e) {
const keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode === 13) {
searchFn($(this));
}
});
$(clickSelector).click(e => {
searchFn(inputElement);
});
}
private search(inputElement: JQuery<HTMLElement>) {
const options = this.grid.options;
const dsOptions = this.dataSource.options as kendo.ui.GridScrollable; // HACK: dataSource.options isn't really a GridScrollable, but it's similar
let searchFields: string[] | any = options.search ? options.search.fields : null;
let expression: kendo.data.DataSourceFilters = {
filters: [],
logic: "or"
};
const value = inputElement.val();
if (!searchFields) {
searchFields = getColumnsFields(options.columns);
}
// NOTE: Thankfully we don't use endless
if (dsOptions.endless) {
dsOptions.endless = null;
//(this as any)._endlessPageSize = this.dataSource.options.pageSize;
}
if (value) {
for (let i = 0; i < searchFields.length; i++) {
expression.filters.push({
field: searchFields[i],
operator: "contains",
value: value
});
}
} else {
expression = {};
}
this.dataSource.filter(expression);
// from Telerik:
function leafColumns(columns: kendo.ui.GridColumn[]): kendo.ui.GridColumn[] {
/* Hiding ... go see Telerik source code */
}
function getColumnsFields(columns: kendo.ui.GridColumn[]): string[] {
/* Hiding ... go see Telerik source code */
}
}
Allow inserting a row in a grid when the filter is applied and show the newly inserted row (even if it does not match the filter criteria) until the filter is re-applied by the user. This behavior is consistent with Microsoft Excel. Can the kendo grid be modified to support this behavior?
When a Kendo Grid is given a detailTemplate, the "master" rows can generate detail rows. When this first happens, the detail row is visible to both the detailInit and detailExpand event handlers: e.dataRow.is(":hidden") is false However, during subsequent expansions and collapses, the row is no longer visible when detailExpand is entered: e.dataRow.is(":hidden") is true The problem is that dynamic content inside the detail may have responded to a change elsewhere, and redrawn while invisible--producing an ugly mess of content when the detail row becomes visible again. Having an event that occurs after the row is made visible by the expansion would allow me an easy place to instruct the detail row contents to redraw/refresh/resize. At this time, the workaround is to use setTimeout inside the detailExpand handler. I think it would be ideal for Kendo to have a secondary event so that any future Grid enhancements for managing row content can easily adapt to our needs to tweak it at this pivotal moment.
Can we please get support for multi-column headers when using Kendo Grid 'Initialization from Table'. We need to be able to display the grand total at the top and have the row fixed. So the only way i thought to achieve this is to included it in the header.
The current table initialization used in grid is not robust and does not supports many features. The main reason is because _columns function in grid does not leverages existing framework functionality. I propose to slightly modify the existing code responsible for parsing column configuration to use kendo.parseOptions instead of working directly with attributes. You can see my re-implementation of this function at [http://jsbin.com/pihefuva/1].
When configuring grid column commands, there is no easy way to control certain aspects of the generated buttons without template and CSS gymnastics. Here are several specific ideas: * Add a "title" option so that the underlying button automatically creates a theme-specific tooltip. Currently, tooltips have to be added to the grid element using crazy filters, and they do look like the button tooltips. * Add support for icon-only buttons through a means other than setting the "text" to "". The CSS for icon-only buttons is slightly different (margins/padding) to ensure the icons are centered and the margins/padding are not too large. By automatically applying a distinct class to represent an icon-only button, the CSS can be more reliably controlled. * When applying a className value to the "edit" command, that className value is not applied to the "update" and "cancel" buttons that are automatically generated when the edit button is clicked. This might have been a potential work around to the previous item, except that the class is not applied to the generated buttons.
Support custom attributes for Kendo grid When kendo grid is applied to an html table, all custom attributes that have been applied to rows, cells or data within cells is lost. It would be great if you could preserve these. I realize the challenge in distinguishing between what is considered a *custom* attribute. Perhaps enforce specific naming conventions and support preservation of those. Perhaps anything starting with "data-" is preserved?
Instead of having to do this or something similar to this ... function (container, options) { $('<input data-text-field="' + options.field + '" ' + 'class="k-input k-textbox" ' + 'type="password" ' + 'data-value-field="' + options.field + '" ' + 'data-bind="value:' + options.field + '"/>') .appendTo(container) } add a type "password" to the grid and let the js do it without having to code :)
Hello, I'm working on a project that contains a Grid. Some of the column names contain special tags (like: minus, space, dot etc.) My request is that you please add functionality that supports special tags. By the way, there is already a possible partial workaround this problem: http://www.telerik.com/forums/field-name-with-space-and-other-than-numeric-creating-issues-to-load-the-grid HOWEVER, if I add filterable property, the grid crushes and shows an error message: Uncaught TypeError: e.charAt is not a function Please see example: http://dojo.telerik.com/@DUKEiLL/UbeNe Kindly add this functionality that supports special tags also WITH FILTER. Thanks, Daniel.
We are running into a situation where our users need to copy values from a row in a Grid. The Grid also uses multiple row selection, and the allowCopy is getting in the way by copying too much data onto the clipboard. Would it be possible to set a field list in the options for allowCopy so that we can specify which columns are actually copied? Example: allowCopy: { delimiter: '\t'. fields: [ 'column1', 'column2' ] } We are also running into another situation where we need to use templated fields, and allowCopy seems to be copying the cell text resulting in very ugly clipboard data. It would be nice if we could specify the datasource value to be copied instead of the cell text Example: allowCopy: { delimiter: '\t'. fields: [ { field: 'column1', source: true }, { field: 'column2' } ] } In both examples, the field name corresponds to the field name specified for the Grid Column.
Hi Team,
I would like to request the functionality to easily modify group and sub group headers with specific templates for aggregation, and have it built-in to the API. For example, the group header could contain the total within the large group, and the sub group would contain each individual section. Additionally, it would be nice to be able to reference each to better select each section.
Thank you!
Hi,
The buttons And/Or in the column menu filter are not translated. They are in English even if the language is set to Swedish.
This is only when componentType is set to "modern". When it is set to "classic" the button language is correct.
See Dojo and attached screenshots.
I like what FooTable.js does with a html table. (hide fields based on breakpoints) and place them so that they are available via click on +