I've put together a simple example of a KendoUI web grid:
<div id="peopleGrid"></div>
<link type="text/css" rel="stylesheet" href="/Content/kendoui.web.2012.3.1114.commercial/styles/kendo.common.min.css" />
<link type="text/css" rel="stylesheet" href="/Content/kendoui.web.2012.3.1114.commercial/styles/kendo.default.min.css" />
<script type="text/javascript" src="/Content/kendoui.web.2012.3.1114.commercial/js/kendo.web.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#peopleGrid').kendoGrid({
dataSource: {
type: 'json',
transport: {
read: '/People/JsonTest'
},
schema: {
model: {
fields: {
ID: { type: 'number' },
FirstName: { type: 'string' },
LastName: { type: 'string' }
}
}
},
pageSize: 10,
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
resizable: true,
reorderable: true,
editable: {
mode: 'popup'
},
toolbar: ['create'],
columns: [
{
field: 'ID',
filterable: false,
hidden: true
},
{
field: 'FirstName',
title: 'First Name'
}, {
field: 'LastName',
title: 'Last Name'
},
{
command: ['edit', 'destroy'], title: ' '
}
]
});
});
</script>
The grid initializes and looks correct. And when I click on an edit button on a record or the create button in the toolbar, the popup displays. However, it doesn't appear to be animating. It's visible in the center of the window as only a few pixels.
Examining the DOM shows this as a style for the popup's containing element:
transform: scale(0.1);
Editing this in the DOM fixes the display. So it looks like there should be some animation taking place which isn't. Is there something wrong in my code that's preventing it, or maybe another resource I need to include? When the popup is active, pressing esc to close it results in a small animation which expands it to normal size while at the same time fading it out. So the animation appears to be happening at the wrong time. Any ideas?
Additionally, I'm seeing that when the popup is closed the associated record is removed from the grid. That one I have no idea why it's happening. But any advice would be much appreciated. Thanks!
This sounds like a bug that we fixed. Try downloading the latest internal build.
I had the same problem. Turns out it was caused by using a slightly out-of-date verion of jQuery.
Kendo UI currently requires version 1.8.2
Related
I've used the hierarchical kendo for showing my data, I mean each row has a child which contains a grid of rows' details,my kendo should appear based on the data that user enter in inputs and after click on a button , it works well for the first time but if user change the inputs' data and click the button again, the kendo does not show the grid of details it just show me my parent grid but if the user refresh the page and then change the data and click the button it works fine. after a lot of search I couldn't find the reason.can anyone help me
var grid;
var createGrid = function () {
grid = $("#mygrid").kendoGrid({
dataSource: {
data: schema.PNR_item,
schema: {
hasChildren: true,
model:{
fields:fields,
}
},
pageable: true,
height: 550,
pageSize: 6,
serverPaging: true,
serverSorting: true,
//columns
},
height: 600,
sortable: true,
pageable: true,
scrollable: true,
resizable:true,
columns: columns,
detailTemplate: '<div class="grid" ></div>',
detailInit: function (e) {
e.detailRow.find(".grid").kendoGrid({
dataSource: e.data.Details,
columns: details_columns,
schema:{
model:{
fields: details_fields
}
}
});
},
}).data("kendoGrid");
}//end of createGrid function
createGrid();
When the HTML size property of the editoptions property of free-jqgrid column model is set, it doesn't modify the related input width element as it should.
Whatever is the size value you set in editoptions, the input element width on an add or edit dialog box remains unchanged, having the maximum width possible within the dialog containing it.
It is remarkable to see that, if you inspect the HTML element using you browser inspection tool, it has the width property you set.
As I'm migrating from jqgrid 4.6.0 to free-jqgrid 14.15.4, it is important that this property should work the same way as it did before in order to keep the layout of the editing dialogs with no modification.
You can see a JSFiddle snippet of code.
In that code, line 6 sets the size of the field id to 3 characters. When trying to edit any record, it can be seen that all input fields have the same width, which is as broad as possible up to the right margin of the containing dialog.
How can input field sizes on the add or edit dialog of a free-jqgrid be defined ?
$(function() {
"use strict";
$("#grid").jqGrid({
colModel: [{
name: "id",
width: 20,
editable: true,
editoptions: {
size: 3 // doesn't get honored
}
},
{
name: "firstName",
width: 200,
editable: true
},
{
name: "lastName",
width: 200,
editable: true
}
],
data: [{
id: 10,
firstName: "Angela",
lastName: "Merkel"
},
{
id: 20,
firstName: "Vladimir",
lastName: "Putin"
},
{
id: 30,
firstName: "David",
lastName: "Cameron"
},
{
id: 40,
firstName: "Barack",
lastName: "Obama"
},
{
id: 50,
firstName: "François",
lastName: "Hollande"
}
],
pager: true,
pgbuttons: false,
pginput: false,
viewrecords: true,
pagerRightWidth: 90
})
.jqGrid('navGrid', {
edittext: 'Edit',
addtext: 'Add',
deltext: 'Del',
search: false,
view: true,
viewtext: 'View',
refresh: true,
refreshtext: 'Refresh'
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>
<table id="grid"></table>
<div id="pager"></div>
The problem is solved by overriding in css/ui.jqgrid.css file the width property setting for a .FormElement class inside a .ui-jqdialog-content class in the following way:
.ui-jqdialog-content .FormElement {
width: initial;
}
You can see the modified JSFiddle code
Explanation
There is a difference between jqgrid and free-jqgrid when it comes to set properties of .FormElement class
/* jqgrid 4.6.0 css/ui.jqgrid.css line 112 */
.ui-jqdialog-content input.FormElement {padding:.3em}
/* free-jqgrid 4.15.4 css/ui.jqgrid.css line 935 */
.ui-jqdialog-content .FormElement {
width: 100%;
box-sizing: border-box;
}
The line width: 100% causes all input inside an edit dialog to be as broad as possible, ignoring size property.
This can be solved by overriding witdh: initial as shown before.
I'm creating a stacked bar chart and almost everytime, the bars on my chart are overflowing.
I'm not sure what could be causing this, I found that people had issues with sorting data source in chrome but this is not specific to chrome. Sometime depending on the default sort I set, it would show up correctly, but if I changed the sorting, it would go back to messed up. On top of this, sometime the values are interchanged but if I checked the datasource.data(), it would still be okay.
I tried calling redraw, refresh on the chart, read on the datasource, I'm a bit lost here
Thanks for any help!
http://jsfiddle.net/2mMMC/
$(document).ready(function () {
var data = {
data: [{"name":"R-24","series":"Moving","Idle":0,"Moving":1396,"Stopped":0,"count":"0.39"},
{"name":"R-25","series":"Moving","Idle":0,"Moving":6795,"Stopped":0,"count":"1.89"},
{"name":"P-24","series":"Moving","Idle":0,"Moving":2622,"Stopped":0,"count":"0.73"},
{"name":"RF-24","series":"Stopped","Idle":0,"Moving":0,"Stopped":796,"count":"0.22"},
{"name":"RF-25","series":"Stopped","Idle":0,"Moving":0,"Stopped":27024,"count":"7.51"},
{"name":"P-24","series":"Stopped","Idle":0,"Moving":0,"Stopped":26430,"count":"7.34"}
],
group: [{
field: 'series'
}],
sort: [{
field: "series",
dir: "asc"
}]
};
$("#chart").kendoChart({
dataSource: data,
series: [{
field: 'count',
stack: true,
type: 'bar'
}],
categoryAxis: [{
field: 'name'
}],
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
});
I have a simple data source that I'm trying to load into a kendoui grid and it does not show - what am I doing wrong?
$(document).ready(function () {
var hisGrid = $("#hisGrid").kendoGrid({
dataSource: {
data: hisDS,
schema: {
model: {
id: "ID",
fields: {
HIS_DT: {
type: "string",
editable: false
},
HIS_VAL: {
type: "string",
editable: false
}
}
}
},
pageSize: 10
},
height: 500,
scrollable: true,
sortable: true,
selectable: true,
columns: [{
field: "HIS_DT",
title: "Date/Time",
width: 10
}, {
field: "HIS_VAL",
title: "History",
width: 5
}]
}).data("kendoGrid");
});
Here's a jsfiddle to the example
Would appreciate a fresh pair of eyes!
Thanks
It is a problem with jQuery version. If you include jQuery 1.8.3 it works fine.
But as recommendation, try using the one distributed with KendoUI so you make sure that they are compatible.
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.2.710/js/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
Fixed version here : http://jsfiddle.net/5mFsG/27/
I am facing an issue while using Kendo gird with both grouping & column menu enabled.
when we select any one of the columns for grouping(say ShipCountry) ,collapse all the rows,de-select any column from the columns menu(right corner of columns) and expand the rows .
the de-selected columns are visible in the inner grid & the column name is not visible in the header.
we even tried handling the check events of the columns menu ,show or hide columns manually
but that did not work out.Can some body help to fix this issue.
Below is the code snippet of my implementation.
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipName: { type: "string" },
ShipAddress: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 250,
sortable: true,
filterable: true,
columnMenu: true,
pageable: true,
groupable:true,
columns: [
"OrderID",
"ShipCountry",
"ShipName",
{
field: "ShipAddress",
filterable: false
}
]
});
});
</script>
</div>
</body>
</html>
I confirm this is a bug. I have logged it for fixing.