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/
Related
I have implemented kendo grid in my project. To show the footer values, I have added footer template to my grids. I have also added no record template to display message to user when data is not present. It is working as expected but when this functionality is implemented for hierarchy grid then it shows weird behavior.
It shows the "No record" template below footer while it should display between header and footer. Here is the sample code.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/hierarchy">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.bootstrap.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
]
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
// data: [{
// OrderID: 1,
// ShipCountry: 'First Country',
// ShipName: 'Ship Name',
// ShipAddress: 'SHip Address'
//}],
data: [],
pageSize: 10
},
noRecords: {
template: "No data available on current page."
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", width: "110px", footerTemplate: 'This is footer.' },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "300px" }
]
});
}
</script>
</div>
</body>
</html>
Below sample has static footer while in my application I am binding aggregate functions. Here is the dojo for the implementation. Am I doing something wrong or this is kendo API related issue?
Setting scrollable: true in the detail grid will cause the noRecords template to be rendered above the columns footerTemplate
Starting with Kendo-UI 2017, I've noticed that the row filter now shows two "x" buttons to clear the filter (one inside the text box and one to the right of the text box). Why are there two rather than only one like in the older versions? More importantly,
is there a setting to remove the clear button from inside the text box without resorting to using CSS?
$("#grid").kendoGrid({
columns: [
{
field: "name",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{ field: "age", filterable: false }],
filterable: { mode: "row" },
dataSource: [{ name: "Jane", age: 30 }, { name: "John", age: 33 }]
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<script src="//kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<div id="grid"></div>
The AutoComplete widget for filtering is to blame. I ended up using CSS anyway to hide it:
.k-clear-value {
display: none !important;
}
But the JavaScript answer was to put the following in the dataBound event:
this.element.find(".k-filtercell .k-autocomplete .k-clear-value").remove();
Here is the updated code:
$("#grid").kendoGrid({
columns: [
{
field: "name",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{ field: "age", filterable: false }],
filterable: { mode: "row" },
dataBound: function(e) {
this.element.find(".k-filtercell .k-autocomplete .k-clear-value").remove();
},
dataSource: [{ name: "Jane", age: 30 }, { name: "John", age: 33 }]
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<script src="//kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<div id="grid"></div>
Source
I came across this, and i really don´t know how to change it. I have column field like this:
{ field: "nome", title: "Nome", width: "20px", template: '<span><img id=idIconRowFolder src="icon_rowFolder.png" style="float: left;width: 20%;height: 16px;width: 16px;margin-top: 2%;"/></span>#= nome #',hideMe: true},
As you can see, i´m using a template and inside it there´s an image...it´s basically a icon that appears on the left side of the text in each row. What i want is to change this icon dinamically, so i know i have to use the dataBound function, and iterate through rows, and i´m actually doing this, but i don´t know how to access the template and his content:
my dataBound:
var grid = this;
grid.tbody.find('>tr').each(function()
{
var dataItem = grid.dataItem(this);
console.log(dataItem);
if(dataItem.tipo === 'pdf')
{
"what do i do here" ?
}
});
Thanks for your time, regards.
EDIT:
Hi everyone, thanks to your suggestions, i found a way, here it is for someone who could have the same problem:(in the databound put this)
var grid = $("#gridBaseDados").data("kendoGrid");
$(grid.tbody).find('tr').each(function ()
{
var dataItem = grid.dataItem(this).tipo;
var ficheiroValExtension = dataItem.split('.').pop();
if(ficheiroValExtension === 'pdf')
{
$(this).find('img').prop('src', 'index.hyperesources/icon_rowPdf.png').css('width','17px').css('height','22px');
}
}
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="Grid">
</div>
<script>
$(document).ready(function () {
$("#Grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
dataType: "jsonp"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
dataBound: onDataBound,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
template: '<img id=idIconRowFolder src="icon_rowFolder.png" style="float: left;width: 20%;height: 16px;width: 16px;margin-top: 2%;"/>'
}
]
});
});
function onDataBound(e) {
var grid = $("#Grid").data("kendoGrid");
$(grid.tbody).find('tr').each(function () {
$(this).find('img').prop('src', 'Your new image src');
//Below syntax will return orderID
//$($(this).find('td').get(0)).html()
});
}
</script>
</body>
</html>
Let me know if any concern.
As i understand you want to show specific image corresponding to each data item. Then you have two options:
1.Additional field in dataSource that represents img.src
{
field: "nome",
title: "Nome",
width: "20px",
template: '<span><img src="#=imgSrc#" .../></span>#= nome #',
hideMe: true
}
2.Use clientSide function that return image source dependent on data item:
{
field: "nome",
title: "Nome",
width: "20px",
template: '<span><img src="#=getImgSrc(data)#" .../></span>#= nome #',
hideMe: true
}
and function itself:
var getImgSrc = function(item)
{
if(item.tipo === 'pdf') { return ... }
...
}
Update: of course for that no need to iterate dataSource in dataBound event
I currently have a grid with three columns: qty, price and totalPrice. What I have done is only made the qty column editable. What I want is that when the qty cell is changed for the totalPrice column to automatically be updated (doing qty * price). I have tried adding a template to the totalPrice column as follow :
template: "#= qty * price #"
but this is not working.
Can anyone help please??
grid = $("#grid").kendoGrid({
dataSource: dsDataSource,
height: 500,
editable: "incell",
groupable: false,
sortable: false,
selectable: true,
pageable: false,
scrollable: true,
navigatable: false,
change: function(e){
},
columns:
[
{field: "qty", editable: true, title: "Qty", width: "20px", headerAttributes: {style:"text-align:center;"}, attributes: {style:"text-align:right;" } },
{field: "price", editable: false, title: "Price", width: "20px", headerAttributes: {style:"text-align:center;"}, attributes: {style:"text-align:right;" } },
{field: "totalPrice", editable: false, title: "Total", width: "20px", headerAttributes: {style:"text-align:center;"}, attributes: {style:"text-align:right;" }, template: "#= qty * price#" }
]
}).data("kendoGrid");
You can achieve the same result without template
$("#grid").kendoGrid({
columns: [
{ field: "qty",editable: true, title: "Qty",width: "20px" },
{ field: "price",editable: false, title: "Price", width: "20px" },
{ field: "totalPrice", editable: false, title: "Total", width: "20px" }
],
dataSource: {
data:[
{ id: 1, qty: 1, price: 30, totalPrice:30},
{ id: 2, qty: 2, price: 33, totalPrice:66}
],
schema: {
model: { id: "id" }
}
},
editable: "incell",
edit: function(e) {
var price =e.container.find("input[name=price]").data("kendoNumericTextBox");
var totalPrice =e.container.find("input[name=totalPrice]").data("kendoNumericTextBox");
if(price != null || totalPrice != null)
this.closeCell();
},
save: function(e) {
if (e.values.qty != null)
e.model.totalPrice = e.values.qty * e.model.price;
e.sender.refresh();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
You can add eventhandler
save: function(e) { e.sender.refresh(); }
which refreshes the grid.
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.