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>
Related
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 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
enter image description hereI´m trying to use a treeview with checkboxes for definition User Rights. (2 actions - enabled/disabled right)
How can I to get value (id) from parent node ?
Kendo tree view
This example will return the parent id for the selected node.
treeView.select().parentNode().id;
If you need to find the parent for a specific node, you must specify a selector in the select() function: treeView.select($("search criteria"))
If you want to loop in the parent, you can do this
var parentNode = treeView.select().parentNode();
while (parentNode) {
//Add your parent logic here
//...
parentNode = parent.parentNode();
}
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="treeview"></div>
<p id="result">No nodes checked.</p>
<script>
$(document).ready(function () {
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
check: onCheck,
dataSource: [{
id: 1, text: "1", expanded: true, items: [
{
id: 2, text: "2", expanded: true, items: [
{ id: 3, text: "3" },
{ id: 4, text: "4" },
{ id: 5, text: "5" }
]
},
{
id: 6, text: "6", expanded: true, items: [
{ id: 7, text: "7" },
{ id: 8, text: "8" },
]
},
{
id: 9, text: "9", expanded: true, items: [
{ id: 10, text: "10" },
{ id: 11, text: "11" },
{ id: 12, text: "12", expanded: true, items: [{ id: 13, text: "13", expanded: true, items: [{ id: 14, text: "14" }, { id: 15, text: "15" }] }] }
]
}
]
}]
});
});
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
getParentIds(nodes[i], checkedNodes);
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
function getParentIds(node, checkedNodes) {
if (node.parent() && node.parent().parent() && checkedNodes.indexOf(node.parent().parent().id) == -1) {
getParentIds(node.parent().parent(), checkedNodes);
checkedNodes.push(node.parent().parent().id);
}
}
// show checked node IDs on datasource change
function onCheck() {
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
}
</script>
</body>
</html>
Let me know if any concern.
I have a grid with editable fields. If I add a new record I see the selected entry as [object Object]. But what I want is the "text" of the entry. How to achieve this?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<h3>Kendo UI Grid DropDown-Editor: How to access the selected text/value?</h3>
<div id="grid"></div>
<script>
function nameDropDownEditor(container, options) {
$('<input data-text-field="nameText" data-value-field="nameValue" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataSource: [
{ nameText: "Jane", nameValue: 100 },
{ nameText: "Mike", nameValue: 200 },
{ nameText: "Harry", nameValue: 300 }
],
});
}
$("#grid").kendoGrid({
toolbar: ["create"],
columns: [
{ field: "id" },
{ field: "name", editor: nameDropDownEditor },
{ field: "age" }
],
dataSource: [
{ id: 3030, name: "Jane", age: 30 },
{ id: 5353, name: "Harry", age: 53 }
],
editable: "popup"
});
</script>
</body>
</html>
This screenshot shows the result after a selection:
http://i.imgur.com/PEhRt47.png
Have you tried giving the dropdown an id and binding to the save event:
...grid markup
.Events(events => events.Save("Grid_Save")
and in the save event
function Grid_Save(e) {
var nameValue = $("#dropdownName").data().kendoDropDownList.value();
//do something with the value
}
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;
};