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 +
Bug report
Pdf export comes with loader when Kendo grid with endless scroll and allPages enabled
Reproduction of the problem
https://dojo.telerik.com/ABiMAjIK
Expected/desired behavior
No loading indicator shall be rendered in the exported PDF
Environment
Kendo UI version: all
Browser: all
Hi Team,
I would like to request the Kendo UI Grid to allow virtual scrolling with smaller pagesizes. I understand right now it is a limitation, but I would like to see this functionality in the future if possible.
Thank you!
One should be able to cancel the detail expand or collapse events of the grids by providing a Expanding / Collapsing event. One use case for this that would be way easier to implement is when one is using a detail template to edit some form of data related to the expanded row but not bound to it's data item, instead bound to specific data coming from other source. If when you expand another row the previously expanded one gets collapsed I would like to be able to prevent that on those events to check for changes, challenge the user and act accordingly.
Thus avoiding the need to work around the timing problem with a timeout like this: columnReorder: function(e) { setTimeout(function() { // save data logic implementation. }, 100); }
We are not using an editable grid for this scenario. The Kendo Grid needs to have its existing filter and sort cleared which should not result in two unnecessary reads to the server and then do a read on the datasource to get the newly added row. We then return the data from the server in descending order by Id so the new row is at the top of the grid and selected. If the sort for a default view and add are the same, no issues, but when they are not, the work around is complex. What are the options and how can we make this simple task simpler to code and maintain?
Right now there is no non-hacky way to modify the query executed when the user hits the 'refresh' button. You either have to remove a class from the refresh button so the standard code path is not executed, or you have to make your own refresh button. We would like a way to say "when the refresh action is called (via button click or otherwise), execute this function (or pass this data along with the standard execution).