After the kendoGrid is created, the headerAttributes field (of every column) has a id value (generated by Kendo) of some random GUID - but this GUID is nowhere to be found in the entire HTML.
So, there is no way to link a Kendo column object to an HTML (th) element.
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
});
Let's say we have an grid with incell editing and navigation enabled. But also there may be some column which are readonly (non editable ). Currently when I press the tab from an editable cell it focus on non editable cell's ,which is no needed. I'll prefer to have a navigation which is stopping only at the editable cells when I press the tab. And also I would like to add new row when I press the tab form last editable cell in the last row.
Please consider adding groupHeaderColumnAttributes as a feature. groupHeaderColumnTemplate is a welcome addition to the grid capabilities and it would be great to easily set styles on group header columns. Frankly, it would be helpful to have attributes available for templates (groupHeader, groupFooter, etc.).
Thanks
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!
It fails because before setting the value it performs validation. If validation was successful then it will set the value on model.
Since the desired field has no value and validation rule will fail on that.
It should accept the value and then perform validation. If validation fails with new value then it might discard the changes.
$("#grid").kendoGrid({
dataSource: {
batch: true,
transport: {
read: function(e){
e.success([1,2,3,4,5,6,7,8,9].map(function(i){return {id: i, title: "test" + i}}));
}
},
schema: {
model: {
id: "id",
fields: {
id: {defaultValue: "-1"},
title: {
validation: {
required: true
}
}
}
}
}
},
columns: [
{field: "title", title: "Title", filterable: {field: "title.a"}},
{command: ["edit", {name: "destroy"}]}
],
editable: {mode: "inline"},
filterable: true,
toolbar: [{name: "create"}]
});
var grid = $("#grid").getKendoGrid();
var model = grid.dataItems()[0];
grid.editRow(model);
model.set('title', '');
model.set('title', 'test 1111'); // it will fail
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
Allow changing Grid's AutoComplete filter operator per Grid (not for each column) through a property
At the moment only the Kendo UI Grid with enabled mobile option will generate a header which can react to the touch and hold gesture.
This makes column resizing impossible when a web grid is used on mobile/tablet. Can you check internally if the grid is used on a mobile browser and create the mobile headers that work with the touch and hold gesture even when the grid does not have the mobile property enabled. This should work out of the box for all grids:
I have tested this on your example for local data grid. It can be applicable also for remote grid, treelist, etc.
If you configure a Kendo Grid with client-side paging, each time you call setDataSource to update the data source then a new .k-pager-numbers-wrap DIV is added to the page controls. I've replicated the problem in Dojo at https://dojo.telerik.com/UTolOzer by taking a basic client-side paging demo, moving the dataSource configuration into a separate function (with data("kendoGrid").setDataSource), and calling that function 25 times. At the end, the source shows the UL element with the page buttons inside 25 .k-pager-numbers-wrap DIV elements.
I first noticed this problem because in my own environment, each nested DIV was shifting the page buttons left 1 pixel and overlapping the "previous page" buttons. In my Dojo example, with 25 nested DIVs the page buttons disappear completely.
I've added the following in my own code as a workaround in the dataBound event of the grid:
var trueParent = e.sender.pager.element.find(".k-pager-numbers-wrap").first();
e.sender.pager.element.find("ul").appendTo(trueParent);
trueParent.find(".k-pager-numbers-wrap").remove();
I use the Kendo controls via the ASP.Net MVC wrapper, so my examples are in that context. The Kendo Grid can display multiple controls in a cell via Editor Templates, but my understanding from my experiments and from Kiril's reply on this forum post (http://www.telerik.com/forums/multiple-controls-in-a-column-on-single-grid-row) is that editing these controls will not work properly. Being able to host multiple controls in a cell gives us more options in UI design. In my case, I am using it to group related controls and prevent the grid from being very wide.
Excel files generated by Kendo Excel Export cannot be imported by the MS ODBC Driver. The error reported in this forum thread is: External table is not in expected format.
If the file is opened and resaved with Excel or if the styles.xml file is replaced with any styles.xml generated by MS Excel, the error does not occur. When compared the styles.xml of Excel does not contain a numberFormat, no other obvious major differences at first glance:
E.g.:
<numFmts count="2">
<numFmt formatCode="#" numFmtId="165" />
<numFmt formatCode="#" numFmtId="166" />
</numFmts>
If possible, modify the styles.xml template to enable seamless use with OleDB
Currently, you cannot disable all columns in the column menu - it requires that at least one column is enabled.
However, if the grid contains any non-hidden columns which have IncludeInMenu=false, then it should be possible to disable all the remaining columns using the column menu.
I'd like to request the functionality to change the multiple selection process of the Kendo UI Grid to be the same as Excel. For example, the following shows a block of cells selected instead of all of the cells in-between the selected cells from Shift+Clicking:
Thank you!