I'm currently using the grid from Kendo UI version v2016.2.504 and have incorporated the pager functionality.
When clicking the "last page" button I'm looking to see how I can identify the source or sender is definitely the "last page" button when using change event in kendo's datasource. I don't see any discernible way in the "e" event or sender property. Does anyone know?
kendouipager
var dataSource = new kendo.data.DataSource({
data: $scope.datasource,
pageSize: 15,
change: function (e) {
var sender = e.sender; // help
},
});
You can add an event listener to the button and then either do the what you want to do in the callback or raise a flag and handle it in the page event handler.
See the snippet for a demo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var isLast = false;
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 35 },
{ id: 3, name: "John Smith", age: 40 }
],
pageSize: 1,
schema: {
model: { id: "id" }
}
},
pageable: true,
page: function(e) {
console.log("Page change", e.page);
console.log("isLast", isLast);
if (isLast) {
// You can do what you want to do here - option 2
}
isLast = false;
}
});
document.getElementsByClassName("k-pager-last")[0].addEventListener("click", (e) => {
isLast = true;
// You can do what you want to do here - option 1
});
</script>
</body>
</html>
I have a Kendo grid with paging enabled. Currently, if i'm at the 20th page for example, then the paging looks like this:
|< < ... 11 12 13 14 15 16 17 18 19 [20] ... > >|
I'd like the current page to always be displayed at the middle:
|< < ... 15 16 17 18 19 [20] 21 22 23 24 25 ... > >|
Is it possible to do this?
I've looked into the grid paging in Kendo API Documentation but I can't find any option that might enable this feature. I also couldn't find anyone else with a similar problem in stackoverflow, nor any way to change the grid paging behavior (other than server side paging).
Thanks in advance for any help!
After some work and with some insight from this article, I managed to implement this feature using the databound event.
If anyone wants to try it out, just paste the folowing code to a Kendo UI Dojo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Cheese", category: "Food" },
{ productName: "Milk", category: "Beverages" },
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Cheese", category: "Food" },
{ productName: "Milk", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Cheese", category: "Food" },
{ productName: "Milk", category: "Beverages" },
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" }
],
pageable: {
pageSize: 1,
responsive: false
},
dataBound: onDataBound
});
function onDataBound(e) {
var grid = e.sender
var pager = grid.element.find('ul.k-pager-numbers').first();
if(pager.length){
var max = grid.dataSource.totalPages();
var center = grid.dataSource.page();
var left, right;
if(max <= 11){
left = 1;
right = max;
} else {
left = center-5;
right = center+5;
if(left<1){
right += (1-left);
left = 1;
}
if(right > max){
left -= (right-max);
right = max;
}
}
var new_pager = '<ul class="k-pager-numbers k-reset">';
new_pager += '<li class="k-current-page"><span class="k-link k-pager-nav">'+center+'</span></li>';
for (var l = left; l<center; l++){
new_pager += '<li><a tabindex="-1" href="#" class="k-link" data-page="'+l+'">'+l+'</a></li>';
}
new_pager += '<li><span class="k-state-selected">'+center+'</span></li>';
for (var r = center+1; r<=right; r++){
new_pager += '<li><a tabindex="-1" href="#" class="k-link" data-page="'+r+'">'+r+'</a></li>';
}
new_pager += '</ul>';
pager.replaceWith(new_pager);
}
}
</script>
</body>
</html>
Tried this How to customize edit event in JsGrid as below. But doesnt seem to work
$("#jsgrd").jsGrid({
data: ds,
fields: [{
type: "control",
editItem: editrow(item)
}, ]
});
function editrow(item) {
var $row = this.rowByItem(item);
if ($row.length) {
console.log('$row: ' + JSON.stringify($row)); // I modify this
this._editRow($row);
}
}
The error I get now is "item" not defined.
What I m looking for is, when user clicks edit, I want to get the rowid stored in a hidden col and use it to fetch more data from server and populate outside jsgrid. And avoid changing the row to edit mode
You are not using the documented way. You should use editTemplate.
A simple working example is:
$(document).ready(function() {
$("#grid").jsGrid({
width: "100%",
editing: true,
autoload: true,
data: [ { id:1, name:"Tom"}, {id:2, name:"Dick"}],
fields: [
{ name: "id", type: "text", title: "Id"},
{ name: "name", type: "text", title: "Name",
editTemplate: function(item) {
return "<input type='checkbox'>" + item;
}},
{ type: "control"}
]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="grid">
Test
</div>
For the purpose of illustration, I turn the edit of the name field from the standard text box into a check box.
You could use itemTemplate to get the required result.
itemTemplate is a function to create cell content. It should return markup as string, DomNode or jQueryElement. The function signature is function(value, item), where value is a value of column property of data item, and item is a row data item.
Inside of itemTemplate you can customise your dom element based on your requirement.
Run Demo
$("#jsGrid").jsGrid({
width: "100%",
height: "auto",
paging: false,
//for loadData method Need to set auto load true
autoload: true,
noDataContent: "Directory is empty",
controller: {
loadData: function(filter) {
var data = [{
id: 1,
nickname: "Test",
email: "t#gmail.com"
}, {
id: 2,
nickname: "Test 1",
email: "t1#gmail.com"
}, {
id: 3,
nickname: "Test 2",
email: "t2#gmail.com"
}, {
id: 4,
nickname: "Test 3",
email: "t3#gmail.com"
}];
return data;
}
},
fields: [{
name: "nickname",
type: "text",
width: 80,
title: "Name"
}, {
name: "email",
type: "text",
width: 100,
title: "Email Address",
readOnly: false
}, {
type: "control",
itemTemplate: function(value, item) {
var editDeleteBtn = $('<input class="jsgrid-button jsgrid-edit-button" type="button" title="Edit"><input class="jsgrid-button jsgrid-delete-button" type="button" title="Delete">')
.on('click', function (e) {
console.clear();
if (e.target.title == 'Edit') {
//Based on button click you can make your customization
console.log(item); //You can access all data based on item clicked
e.stopPropagation();
} else {
//Based on button click you can make your customization
console.log('Delete')
}
});
return editDeleteBtn; //
},
}]
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="jsGrid"></div>
I have a kendo grid with a column template. I try to pass a value from the current row as a parameter for my javascript function. My code:
{
field: "CrmTaskId",
title: "Crm ",
template: '<a href="javascript:hrefTest(#=CrmTaskId#);" ># if( CrmTaskId==null) {#<span><span># } else {#<span>#: CrmTaskId#<span>#} #</a>'
}
hrefTest is javascript function with one param. But it's not working. Any ideas?
It can be done like this
.ClientTemplate("<a href='javascript: void(0);'
onclick=\"return YourJSFunction('#= OpportunityUrl #');\">#= OpportunityName #</a>")
This is part of the column definition, so what it is saying is...Make the OpportunityName
clickable and pass in the OpportunityUrl. #= Field # is the syntax for pulling values off of the Model.
I have tried with your code but not able to reproduce this issue. Please create new HTML/CSHTML page and check it.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var movies = [
{ "CrmTaskId": 1, "rating": 9.2, "year": 1994, "title": "The Shawshank Redemption"},
{ "CrmTaskId": 2, "rating": 9.2, "year": 1972, "title": "The Godfather"},
{ "CrmTaskId": null, "rating": 9, "year": 1974, "title": "The Godfather: Part II" },
{ "CrmTaskId": '', "rating": 9.9, "year": 1874, "title": "The Godmother: Part III" }
];
function hrefTest(CrmTaskId)
{
alert("CrmTaskId is: " + CrmTaskId);
}
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: movies,
pageSize: 10
},
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [{
field: "CrmTaskId",
title: "Crm"
}, {
field: "title",
title: "title"
},
{
template: '<a href="javascript:hrefTest(#=CrmTaskId#);" ># if( CrmTaskId==null) {#<span><span># } else {#<span>#: CrmTaskId#<span>#} #</a>'
}
]
});
});
</script>
</body>
</html>
Please try with the below code snippet.
Use this :
{
field: "Field",
editable: true,
title: "Title",
template: showRelatedLink,
allownull: true,
width: 100
}
and then in your function :
function showRelatedLink(container, options)
{
var yourVariable = container.YourField;
}
You can pass a field to a function like this too:
Grid:
columns: [
{ field: "ProductTypeID", title: "Type", template: "#=product_type_to_name(ProductTypeID)#" },
]
Function:
function product_type_to_name(product_type_id) {
console.log(product_type_id);
var name = "";
// convert ID to name
return name;
}
I have tried this
{
field: "DisplayChangedFrom",
title: "From",
template:"#=generateTemplate(DisplayChangedFrom)#
},
Then the function
function generateTemplate(items) {
var html = "<ul>";
if (items !== null && items.length > 0) {
for (var x = 0; x < items.length; x++) {
html += "<li>";
html += items[x];
html += "</li>";
}
}
html += "</ul>";
return html;
};
I have a requirement i.e based on the tree view check box selection the value axis need to update.I am using 4 check boxes with 4 value axis.when ever I check the first item corresponding value axis should be changed .3 other axis should in invisible state.
Here I tried with some of the code and updated .
Code:
<div id="treeview"></div>
<div id="example" class="k-content">
<div class="chart-wrapper">
<div id="chart"></div>
</div>
</div>
var valueAxes = [
{ name: "KM",visible:false,
title: { text: "KM" ,visible:false}
},
{ name: "Miles Per Gallon",
title: { text: "Miles Per Gallon" }
},
{
name: "Miles",
title: { text: "Miles " }
},
{
name: "liters per 100km",
title: { text: "liters per 100km" }
}
];
function createChart() {
$("#chart").kendoChart({
legend: {
position: "top"
},
series: [{
type: "column",
data: [20, 40, 45, 30, 50],
stack: true,
name: "on battery",
color: "#003c72"
}, {
type: "column",
data: [20, 30, 35, 35, 40],
stack: true,
name: "on gas",
color: "#0399d4"
}, {
type: "area",
data: [30, 38, 40, 32, 42],
name: "mpg",
color: "#642381"
}, {
type: "area",
data: [7.8, 6.2, 5.9, 7.4, 5.6],
name: "l/100 km",
color: "#e5388a"
}],
valueAxes:valueAxes,
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
axisCrossingValues: [0, 0, 10, 10]
}
});
}
$(document).ready(function() {
createChart();
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1,
text: "Value axis",
expanded: true,
items: [{
id: 2,
text: "KM"
},
{
id: 3,
text: "Miles Per Gallon"
},
{
id: 4,
text: "Miles "
},
{
id: 5,
text: "liters per 100km"
}]
}]
}).data("kendoTreeView");
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
$("#treeview").find(":checked").each(function() {
var nodeText =$(this).parent().parent().text();
$.each(valueAxes, function(index, valueAxes) {
if (valueAxes.name == nodeText) {
checkedSeries.push(valueAxes);
checkedSeries.visible==="true";
checkedSeries.title.visible===true;
}
});
});
chart.options.valueAxes = checkedSeries;
chart.refresh();
});
});
jsbin: Value axis change
Yes , it is possible to bind and unbind value axis and series at a time.
Change your scripts like below
var valueAxes = [
{
name: "KM", labels: {
format: "{0}"
}, min: 0,
max: 9,
title: { text: "KM" }
},
{
name: "Miles Per Gallon", labels: {
format: "{0}%"
}, min: 0,
max: 5,
title: { text: "Miles Per Gallon" }
},
{
name: "Miles", labels: {
format: "{0}%"
},
title: { text: "Miles " }
},
{
name: "liters per 100km", min: 0,
max: 1,
title: { text: "liters per 100km" }
}];
var series = [{
type: "column",
axis: "KM",
data: [20, 40, 45, 30, 50],
stack: true,
name: "KM",
color: "#003c72"
}, {
type: "column",
data: [20, 30, 35, 35, 40],
axis: "Miles Per Gallon",
stack: true,
name: "Miles Per Gallon",
color: "#0399d4"
}, {
type: "column",
data: [30, 38, 40, 32, 42],
axis: "Miles",
name: "Miles",
color: "#642381"
}, {
type: "column",
axis: "liters per 100km",
data: [7.8, 6.2, 5.9, 7.4, 5.6],
name: "liters per 100km",
color: "#e5388a"
}];
function createChart(inputValueAxes, inputSeries) {
$("#chart").kendoChart({
legend: {
position: "top"
},
series: inputSeries,
valueAxes: inputValueAxes,
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
axisCrossingValues: [0, 0, 10, 10]
}
});
}
$(document).ready(function () {
createChart(valueAxes, series);
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1,
text: "Value axis",
expanded: true,
items: [{
id: 2,
text: "KM"
},
{
id: 3,
text: "Miles Per Gallon"
},
{
id: 4,
text: "Miles "
},
{
id: 5,
text: "liters per 100km"
}]
}]
}).data("kendoTreeView");
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
var checkedAxes = [];
if ($("#treeview").find(":checked").length !== 0) {
$("#treeview").find(":checked").each(function () {
var nodeText = $(this).parent().parent().text();
$.each(valueAxes, function (index, valueAxes) {
if (valueAxes.name == nodeText.trim()) {
checkedAxes.push(valueAxes);
checkedAxes.visible = true;
}
});
$.each(series, function (index, series) {
if (series.name == nodeText.trim()) {
checkedSeries.push(series);
}
});
});
createChart(checkedAxes, checkedSeries);
}
else {
createChart(checkedAxes, checkedSeries);
}
});
});
Refer this http://jsbin.com/eyibar/49/edit
For convenience, Intially i load all the chart axeses. Its working as you asked....
jsbin: http://jsbin.com/eyibar/37/edit
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<style>
#chart { width: 600px; }
</style>
</head>
<body>
<div id="treeview"></div>
<div id="example" class="k-content">
<div class="chart-wrapper">
<div id="chart"></div>
</div>
</div>
<script type="text/javascript">
var valueAxes = [
{
name: "KM",
title: { text: "KM" }
},
{
name: "Miles Per Gallon",
title: { text: "Miles Per Gallon" }
},
{
name: "Miles",
title: { text: "Miles " }
},
{
name: "liters per 100km",
title: { text: "liters per 100km" }
}];
function createChart(valueAxes) {
$("#chart").kendoChart({
legend: {
position: "top"
},
series: [{
type: "column",
data: [20, 40, 45, 30, 50],
stack: true,
name: "on battery",
color: "#003c72"
}, {
type: "column",
data: [20, 30, 35, 35, 40],
stack: true,
name: "on gas",
color: "#0399d4"
}, {
type: "area",
data: [30, 38, 40, 32, 42],
name: "mpg",
color: "#642381"
}, {
type: "area",
data: [7.8, 6.2, 5.9, 7.4, 5.6],
name: "l/100 km",
color: "#e5388a"
}],
valueAxes: valueAxes,
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
axisCrossingValues: [0, 0, 10, 10]
}
});
}
$(document).ready(function () {
createChart(valueAxes);
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1,
text: "Value axis",
expanded: true,
items: [{
id: 2,
text: "KM"
},
{
id: 3,
text: "Miles Per Gallon"
},
{
id: 4,
text: "Miles "
},
{
id: 5,
text: "liters per 100km"
}]
}]
}).data("kendoTreeView");
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
if ($("#treeview").find(":checked").length != 0) {
$("#treeview").find(":checked").each(function () {
var nodeText = $(this).parent().parent().text();
$.each(valueAxes, function (index, valueAxes) {
if (valueAxes.name == nodeText.trim()) {
checkedSeries.push(valueAxes);
checkedSeries["visible"] = true;
}
});
});
createChart(checkedSeries);
}
else {
createChart(checkedSeries);
}
});
});
</script>
</body>
</html>
I edited your code in that I can able to bind and unbind the valueaxis by calling the creatChart(checkedAxes) function in if condition with length==-1,at that time the series is not updated.
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
var checkedAxes = [];
if ($("#treeview").find(":checked").length !== -1){
$("#treeview").find(":checked").each(function () {
var nodeText = $(this).parent().parent().text();
$.each(valueAxes, function (index, valueAxes) {
if (valueAxes.name == nodeText) {
checkedAxes.push(valueAxes);
checkedAxes.visible = true;
}
});
$.each(series, function (index, series) {
if (series.name == nodeText) {
checkedSeries.push(series);
}
});
});
chart.options.series = checkedSeries;
chart.options.valeAxes = checkedAxes;
chart.refresh();
}
createChart(checkedAxes);
});
but if I tried by without calling the creatChart(checkedAxes) function,the series binded to the chart are updated.
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
var checkedAxes = [];
if ($("#treeview").find(":checked").length !== -1){
$("#treeview").find(":checked").each(function () {
var nodeText = $(this).parent().parent().text();
$.each(valueAxes, function (index, valueAxes) {
if (valueAxes.name == nodeText) {
checkedAxes.push(valueAxes);
checkedAxes.visible = true;
}
});
$.each(series, function (index, series) {
if (series.name == nodeText) {
checkedSeries.push(series);
}
});
});
chart.options.series = checkedSeries;
chart.options.valeAxes = checkedAxes;
chart.refresh();
}
});
I didn't get the both scenarios at a time.sorry,hope you find the solution.
Cheers,
Happy Coding...