Problem
I have a Kendo UI JQuery Grid. All functionality is working as I expect however I encounter a bug when I add new record.
The record can be added and saved but the footer of the grid "floats" halfway up the grid and the scrollbar is removed - leaving it looking corrupt.
Following further investigation I think the scroll bar is actually respecting the initial height setting but on edit the scroll seems to disappear and the grid is full height
Investigations
I have no custom handler on the create new record
I have a custom
data bound event however in the scenario above this is passed
without touching the grid
It doesn't appear to be a CSS issue as inspecting the DOM in developer tools reveals nothing of note
I have also now tried tried to add my own custom add(Point one I have kept the standard). Which fires and behaves as expected but still has the issue of the scrollbar disappearing and the footer "floating"
There are no error message in the console etc... to go on
$(".k-grid-my-create", grid.element).on("click", function (e) {
var dataSource = grid.dataSource;
dataSource.insert(0, blankTimeEntry);
grid.editRow(grid.tbody.children().first());
});
Code:
The grid is defined as:
$("#timeItemsGrid").kendoGrid({
//scrollable: false,
sortable: true,
filterable: true,
editable: true,
resizable: true,
pageable: false,
height: 750,
groupable: { sort: { dir: "desc" } },
toolbar: ["create", "save"],
dataBound: onDataBound,
dataSource: {
data: itemsToUse,
schema: {
model: {
fields: {
copiedTime: { type: "boolean" },
customerObj: { defaultValue: { customerText: null, customerId: null } },
mainCustName: { type: "string" },
item: { type: "string" },
itemText: { type: "string" },
casetaskevent: { defaultValue: { casetaskevent: null, casetaskeventText: "" } },
team: { type: "string" },
teamText: { type: "string" },
div: { type: "string" },
divText: { type: "string" },
loc: { type: "string" },
locationText: { type: "string" },
isbillable: { type: "boolean" },
mon: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
tue: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
wed: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
thu: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
fri: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
sat: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
sun: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } }
}
}
},
aggregate: [
{ field: "mon.hours", aggregate: "sum" },
{ field: "tue.hours", aggregate: "sum" },
{ field: "wed.hours", aggregate: "sum" },
{ field: "thu.hours", aggregate: "sum" },
{ field: "fri.hours", aggregate: "sum" },
{ field: "sat.hours", aggregate: "sum" },
{ field: "sun.hours", aggregate: "sum" }
]
},
and the dataBound method
function onDataBound(e) {
console.log("onDataBound");
var grid = $("#timeItemsGrid").data("kendoGrid");
var data = grid.dataSource.data();
var element;
$.each(data, function (i, row) {
if (row.dirty) {
element = $("tr[data-uid=\"" + row.uid + "\"] ");
$(element).removeClass("k-alt");
$(element).addClass("isdirty");
}
if (row.copiedTime == true) {
element = $("tr[data-uid=\"" + row.uid + "\"] ");
$(element).removeClass("k-alt");
$(element).addClass("copiedTime");
}
});
}
After pulling my hair out for hours
catching the edit function of the grid and setting the below worked
var scrollable = document.querySelector("#timeItemsGrid > div.k-grid-content.k-auto-scrollable");
scrollable.style.overflow = "scroll";
scrollable.style.overflowX = "hidden";
Related
I am using KendoUI - Grid component
How can I convert this into Kendo Grid:
For Eg:
I have created kendo grid (table) by using local data. As soon as I click on "Generate chart" button, above table's filter data should create the Kendo pie chart like below...
As I am new to Kendo, can somebody please suggest me the answer?
Code:
var localData = [
{
Id: 1,
userName: "John",
game: "A",
difficultyLevel: "Easy",
startTime: "25-05-2017",
endTime: "26-05-2017",
score: "210"
},
{
Id: 2,
userName: "Sam",
game: "B",
difficultyLevel: "Hard",
startTime: "04-11-2016",
endTime: "01-12-2016",
score: "4800"
},
];
var dataSource = new kendo.data.DataSource({
data: localData,
schema: {
model: {
fields: {
Id: {
type: "number"
},
userName: {
type: "string"
},
userName: {
type: "string"
},
difficultyLevel: {
type: "string"
},
startTime: {
type: "string"
},
endTime: {
type: "string"
},
score: {
type: "number"
},
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 300,
sortable: true,
filterable: false,
groupable: true,
pageable: true,
columns: [{
field: "Id",
title: "Id",
filterable: true
}, {
field: "userName",
title: "userName"
}, {
field: "game",
title: "game"
}, {
field: "difficultyLevel",
title: "difficultyLevel"
}, {
field: "startTime",
title: "startTime"
}, {
field: "endTime",
title: "endTime"
}, {
field: "score",
title: "score"
}]
});
JsFiddle
You need to prepare your data to the chart's format. Something like:
$chartContainer.kendoChart({
dataSource: {
data: localData,
schema: {
parse: function(data) {
return data.map(x => {
return {
value: Number(x.score),
category: x.userName
}
});
}
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
template: "#= category #: #= value #"
}
});
Updated Fiddle
I wish to create a grid that each row has grid inside it.
Both grids need to be editable and I managed to do so. However, when I try to add a new row to the outer grid, all the data inside it gone.
You can find the demo here: http://dojo.telerik.com/UqURE
Can you please help with this issue?
Thanks!
var outerDataSource= new kendo.data.DataSource({
schema: {
model: {
field1: { type: "string", validation: { required: true } },
field2: { type: "boolean", validation: { required: true } },
field3: { type: "string", validation: { required: true } }
}
}
});
$("#outerGrid").kendoGrid({
dataSource: outerDataSource,
detailInit: onExpansion,
toolbar: ["create"],
columns: [
{ field: "field1", title: "field1" },
{ field: "field2", title: "field2" },
{ field: "field3", title: "field3" },
{ command: ["destroy"], title: " " }],
editable: true
});
function onExpansion(e) {
var insideDataSource= new kendo.data.DataSource({
schema: {
model: {
in1: { type: "string", validation: { required: true } },
in2: { type: "string", validation: { required: true } }
}
},
data: [{
in1: "Click to edit",
in2: "Click to edit"
}]
});
var headers = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: insideDataSource,
width: 90,
toolbar: ["create"],
editable: true,
columns: [
{ field: "in1" },
{ field: "in2" },
{ command: ["destroy"], title: " " }]
});
};
Answer from Telerik:
Please note that operations like paging, sorting, filtering and
editing cause the Grid to rebind and reevaluate all templates inside
it (including the details). That why in order to preserve the child
Grid data between rebinds you should either save it to remove service
(link to documentation here) or add it as navigation property
collection to the parent Grid model (demo is available here).
http://www.telerik.com/forums/hirarchialy-editable-grids
The Filter basically works fine but,
The select does not seem to fire the first selection
this happens every time the filter is reset as well.
I meddled with it for two days now...
here is the Fiddle
<script src="../content/shared/js/products.js"></script>
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: {
mode: "row"
},
pageable: {
input: true,
numeric: false
},
columns: [
{
field: "ProductName",
title: "Product Name",
filterable: {
cell: {
operator: "contains",
showOperators: false
}
}
}, {
field: "Discontinued", title: "Discontinued",
filterable: {
mode: "row",
cell: {
showOperators: false,
template: function (args) {
args.element.kendoDropDownList({
autoBind:false,
dataTextField: "text",
dataValueField: "value",
dataSource: new kendo.data.DataSource({
data: [{ text: "Yes", value: "true" },
{ text: "No", value: "false" }]
}),
index: 0,
optionLabel: {
text: "Filter",
value: ""
},
valuePrimitive: true
})
}
}
}
}
]
});
});
</script>
Kendo UI 2015 Q1 has a lot of bug on it, especially on dropdown family widget like autocomplete, multiselect, dropdown, etc..
Change your kendo library to 2014 or previous version will make it works fine,
check this dojo
I have been struggling with this issue and hit a roadblock. I have a kendo grid that has a dropdownlist.
Problem
When i edit a record by selecting a value in the DropdownList, the
field is not updated.
When i select the Add Command from the toolbar, a different
template tries to render and raises the error "Uncaught ReferenceError:
ParentMenu is not defined" in Chrome debugs. So nothing happens consequently.
When i comment out "values: parentRef" from the kendogrid columns definition all commands[Add,Edit] display properly
I have demonstrated the error i am experiencing here http://jsfiddle.net/BlowMan/5tNQy/
JS Code
$(function () {
var mbModel = kendo.data.Model.define({
id: "MenuId",
fields: {
"MenuId": {
type: "number"
},
"DisplayText": {
type: "string"
},
"MenuOrder": {
type: "number"
},
"MenuStatus": {
type: "boolean"
},
"HasKids": {
type: "boolean"
},
"ParentMenu": {
type: "number",
defaultValue: 1
}
}
});
var mbDataSource = new kendo.data.DataSource({
data: [{
"MenuId": 1,
"DisplayText": "Home",
"MenuOrder": 0,
"MenuStatus": true,
"HasKids": false,
"ParentMenu": null
}, {
"MenuId": 2,
"DisplayText": "Finance",
"MenuOrder": 1,
"MenuStatus": true,
"HasKids": false,
"ParentMenu": null
}]
});
var parentRef = [{
"value": 1,
"text": "Finance"
}, {
"value": 2,
"text": "Corp. Services"
}];
$("#menuBuilder1").kendoGrid({
columns: [{
field: "MenuId",
title: "Menu",
editable: true
}, {
field: "DisplayText",
title: "Name",
editable: true
}, {
field: "MenuOrder",
title: "Order",
editable: true
}, {
field: "MenuStatus",
title: "MenuStatus",
editable: true
}, {
field: "HasKids",
title: "Depends",
editable: true
}, {
field: "ParentMenu",
title: "ParentMenu",
values: parentRef
}, {
title: "Action",
command: ["edit"]
}],
toolbar: ["create"],
editable: "popup",
schema: {
model: mbModel
}
});
var mbObject = new kendo.data.ObservableObject({
data: mbDataSource,
//parentRef:[]
});
kendo.bind($("#menuBuilder1"), mbObject);
mbDataSource.bind("change", function (e) {
});
var grid = $("#menuBuilder1").data("kendoGrid");
grid.bind("save", function (e) {
var that = this;
that.refresh();
});
grid.bind("edit", function (e) {
});
$.ajax({
url: "/MenuBuilder/GetMenuWithKids",
dataType: "json",
type: "GET",
success: function (ret) {
mbObject.set("parentRef", ret);
}
});
});
HTML Code
<div id="menuBuilder1" data-bind="source:data"></div>
Am in a tight corner and any help will be much appreciated.
MustafaP solved Problem 1.
For problem 2,
I realised that i had placed the schema definition at the wrong place within the kendoGrid. I placed it at the bottom after the toolbar.
It should rather be placed just after the kendoGrid brackets
$("#menuBuilder1").kendoGrid({
schema: {
model: mbModel
},
columns: [{
field: "MenuId",
title: "Menu",
editable: true
I'm using A Kendo Grid, With Server Side Filtering and Server Side Sorting. In my Data Source Transport Read method the field is always null. Any Suggestions?
This my code for initializing the Grid:
var gridDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("Read", "GridModule")',
type: 'POST',
contentType: 'application/json'
},
parameterMap: function (options) {
options.assignmentFilters = assignmentFilters;
return JSON.stringify(options);
}
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
schema: {
model: {
fields: {
LastSurveyDate: { type: "date" },
LastNoteDate: { type: "date" }
}
},
data: "data",
total: "totalRows"
}
});
var $grid = $('#gridAssignments');
if (e.firstLoad) {
$grid.kendoGrid({
scrollable: true,
pageable: {
refresh: true,
pageSizes: [20, 50, 100, 500, 1000],
buttonCount: 12,
messages: {
display: "Showing {0}-{1} from {2} Provider Contacts",
empty: "No Contacts Match the Filter Criteria",
itemsPerPage: "Contacts per page"
}
},
reorderable: true,
navigatable: true,
change: gridOnChange,
dataBound: gridOnDataBound,
dataSource: gridDataSource,
columnReorder: gridColumnReorder,
columnHide: gridColumnHide,
columnResize: gridColumnResize,
columnShow: gridColumnShow,
columnMenu: {
sortable: false,
messages: {
columns: "Choose columns",
filter: "Filter",
}
},
resizable: true,
height: '720px',
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
},
date: {
lt: "Is before",
gt: "Is after",
equal: "On"
}
}
},
selectable: "row",
sortable: {
mode: "single",
allowUnsort: true
},
columns: [ #Html.Raw(Model.GridColumns.Columns) ]
});
} else {
$grid.data('kendoGrid').setDataSource(gridDataSource);
}
For anyone that runs into the same problem...
In my case my code worked fine until I added two fields to the Schema.Model.Fields. Then for some reason the Field in my read method of my Grid Module was NULL. By default it all fields were treated as strings but when I added the two new properties then No default was used.
I had to add all my Grid's fields
schema: {
model: {
fields: {
LastSurveyDate: { type: "date" },
LastNoteDate: { type: "date" },
FirstName: { type: "string" },
LastName: { type: "string" },
HasNewEval: { },
HasCommitmentsToGet: { },
OnPriorityList: { type: "string" },
HasProductsBelowMinimum: { type: "HasProductsBelowMinimum" },
Points: {},
Title: { type: "string" },
Provider: { type: "string" },
Phone: { type: "string" },
TimeZone: { type: "string" },
Touches: { type: "string" },
LastNoteText: { type: "string" },
VerbalAging: { type: "string" }
}
},
That worked for me.