I need to have a button in the header bar of a kendo grid. This button needs to be able to call a function (GetFoo) in the grid object.
UPDATE: Sorry for any confusion, but I only want one button on the table header row with the text "First Name", "Last Name" etc... So we'd have
[th]|First Name | Last Name | Title | button (calls getFoo())
[td]|Joe |Schmo |None |
[td]|Joe | Bob |None |
[End update]
Here is some modified code from kendo ui
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
getFoo:function(){
alert('bar');
},
pageable: true,
height: 550,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" },
{ field: '',title: "<button onClick='getFoo()' value='foo'>sdf</button>" }]
}).data("kendoGrid");
});
Any help is appreciated!
You could use the dataBound event and insert the button like this:
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
getFoo:function(){
alert('bar');
},
pageable: true,
height: 550,
dataBound: grid_dataBound,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" },
{ field: '',title: "<button onClick='getFoo()' value='foo'>sdf</button>" }]
}).data("kendoGrid");
});
function grid_dataBound(e) {
var grid = this;
var lastHeaderCell = grid.thead.find("th").last();
var button = $("<button value='foo'>sdf</button>");
lastHeaderCell.html(button);
$(button).click(function(){
grid.options.getFoo();
});
}
There are several ways to add custom buttons in a Kendo grid. One would be to add it as a toolbar item. You can read more about the implementation here Kendo custom command button in toolbars
.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='customCommand()' href='#'></span>Cutom Command</a>"))
Next would be to have one inline per row. You can read how to implement that one here Kendo grid custom commands
But the code you want to pay attention to:
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" },
{ command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
});
More so this line:
{ command: { text: "View Details", click: showDetails }
You can also use templates to customize Kendo grids. Check out this link to read more: Toolbar using templates
Hope this helps, and happy coding!
I usually use a Kendo template to achieve this.
in your JavaScript change that line to:
{ field: " " title: " ", template: kendo.template($("#button-template").html()) }
And in your HTML markup add:
<script id="button-template" type="text/x-kendo-template">
<button type="button" onClick='getFoo()' value='foo'>
Button Action
</button>
</script>
Or, here is how you can add a single button to the header of your grid:
Create your kendo template:
<script type="text/x-kendo-template" id="GridToolbar">
<div class="toolbar">
<button type="button" onClick='getFoo()' value='foo'>Button Action</button>
</div>
</script>
Set this property on your kendo grid in JS:
toolbar: kendo.template($("#GridToolbar").html()),
i think you can use headerTemplate for this
check this working example
dojo example
$("#grid").kendoGrid({
columns: [{
field: "name",
}, {
field: "FirstName",
title: "First Name",
width: "140px"
}, {
field: "LastName",
title: "Last Name",
width: "140px"
}, {
field: "Title",
headerTemplate: 'Title <button id="foo" onclick="foo()">foo</button>'
}],
dataSource: [{
name: "Jane Doe"
}, {
name: "John Doe"
}]});
Related
In the kendo ui treelist the headerTemplate works for a multi-column only in the lowest column of the hierarchy. Not in the root column.
Sample:
columns: [{
field: "FirstName", title: "First Name", width: 180
}, {
title: "Personal Info",
/* headerTemplate: "Personal Info Template", */ /* do not works */
columns: [{
field: "LastName", title: "Last Name", width: 120,
}, {
title: "Location",
columns: [{
field: "City", width: 140,
headerTemplate: "City Template", /* works */
}, {
field: "Country", width: 140
}]
}]
}]
Sample Link
How can a button/html be placed in the root column of a multi-column header?
I've checked the console and it has a runtime error when that headerTemplate was uncommented:
Uncaught TypeError: i.headerTemplate is not a function
So i suposed it was expecting a template function, like:
headerTemplate: kendo.template("Personal Info Template"),
And it works, hence you can use html in that template:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treelist/multicolumnheaders">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.bootstrap-v4.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.1.119/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function () {
var service = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportsTo",
fields: {
ReportsTo: { field: "ReportsTo", nullable: true },
EmployeeID: { field: "EmployeeId", type: "number" },
Extension: { field: "Extension", type: "number" }
},
expanded: true
}
}
},
height: 540,
sortable: true,
resizable: true,
reorderable: true,
columnMenu: true,
columns: [{
field: "FirstName", title: "First Name", width: 180
}, {
title: "Personal Info",
headerTemplate: kendo.template("Personal Info <button>Button</button>"),
columns: [{
field: "LastName", title: "Last Name", width: 120,
}, {
title: "Location",
columns: [{
field: "City", width: 140,
headerTemplate: "City Template", /* works */
}, {
field: "Country", width: 140
}]
}]
}]
});
});
</script>
</div>
</body>
</html>
Updated Dojo
I want to change the title of the editable popup window based on whether it is being used to create or edit a grid item (I want the fields to be the same for both of them, though).
I have set the popup window's title in editable
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
window: {
title: "Add"
}
}
But I'm not sure how to differentiate between Edit and Add. The Edit button is in the columns:
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
}
]
and the Add button in the toolbar:
toolbar: [{name: 'create'}]
Notably, I've tried this to no avail:
toolbar: [
{
name: 'create',
click: function(){
alert("test");
}
},
]
I've also seen e.model.isNew() used under edit, but according to my compiler, this is not a function.
I've looked all over the internet and Telerik and found nothing. Am I missing something?
EDIT: Someone asked for the entirety of my grid code:
var grid = $('#grid').kendoGrid({
//dataSource: this.source,
dataSource: this.testData,
height: 550,
filterable: true,
sortable: true,
pageable: {
pageSize: 30,
buttonCount: 1
},
//toolbar: ["create", "destroy", "search"],
toolbar: [
{name: 'create'},
{name: 'destroy'},
{name: 'search'},
{template: "<input id='category' type='search' style='width: 250px; float: right;'/>"}
],
resizeable: true,
columns: [
{
field: 'Name',
title: 'Name',
filterable: true,
},
{
field: 'MCN',
title: 'P/N',
filterable: false,
},
{
field: 'ID',
title: 'ID',
filterable: true,
},
{
field: 'Type',
title: 'Type',
filterable: true,
},
{
field: 'Subtype',
title: 'Subtype',
filterable: true,
},
{
field: 'Value',
title: 'Value',
filterable: false,
},
{
field: 'Tolerance',
title: 'Tolerance',
filterable: true, //Number/letter combination causes problem?
},
{
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
},
{
name: "copy",
text: "Copy",
//click: function
}
],
title: " ", width: "250px"
},
],
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
// window: {
// title: "Add"
// }
},
selectable: "multiple, row", // Select multiples by drag or Shift-Click
edit: function(e){
var container = e.container;
var model = e.model;
//console.log(model.get("ID"));
// Changing the size of the container
$(e.container).parent().css({
//width: "1000px",
//height: "500px"
});
//May be able to simplify this with a for loop
// Changing Type input to a dropdown
var input = $('#dropType');
input.kendoDropDownList({
dataTextField: "Type",
dataValueField: "dropType",
dataSource: [{Type: 'One'}, {Type: 'Two'}, {Type: 'Three'}],
}).appendTo(container);
// Changing Subtype input into a dropdown
var input = $('#dropSubtype');
input.kendoDropDownList({
dataTextField: "Subtype",
dataValueField: "dropSubtype",
dataSource: [{Subtype: 'One'}, {Subtype: 'Two'}, {Subtype: 'Three'}],
}).appendTo(container);
}
});
To change the title you should use edit function of the grid like this:
$("#grid").kendoGrid({
dataSource: {...},
height: 550,
toolbar: ["create"],
columns: [
{
field: "",
title: '',
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
},
{
command: [
{ name: "edit", text: 'Edit' },
],
title: 'tools',
width: "200px",
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
}
],
editable: {
mode: "popup",
template: $("#template").html(),
},
edit: function(e) {
if (e.model.isNew()) {
e.container.kendoWindow("title", "Createee");
} else {
e.container.kendoWindow("title", "Updateee");
}
}
});
And for using the template, see this answer : Kendo UI Grid popup
Edit:
According to kendo : Kendo Forum , isNew
The isNew method returns true or false depending on the id value of that model.
If the id is still set to the default value then it will assume it is a New Model.
So I think your problem is because of your dataSource, and you should fill id before the fields property. like this :
dataSource: {
transport: {
read: {
url: ...
type: "POST", // The request type.
dataType: "json", // The data type of the returned result.
},
create: {...},
update: {...},
destroy: {...}
},
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false },
BankName: { type: "string", validation: { required: true } },
....
}
}
},
pageSize: 20
},
And here are two Samples: ( Sample 1 , Sample 2 )
It is my kendo grid and i need to wrap pagination buttons into my custom wrapper, named
var grid = $("#taskTableKendo").kendoGrid({
dataSource: tasksData,
sortable: true,
scrollable: false,
autoBind: false,
pageable: {
refresh: true,
pageSizes: [20, 50, 100]
},
dataBound: tasksDataBound,
columns: [
{ field: "Responsibility_Code", title: " ", width: 30, encoded: false, template: '<span class="responsibility type#=Responsibility_Code#" title="#=Responsibility_Description#"></span>' },
{ field: "TaskRef", title: "Task Ref", encoded: false },
{ field: "Owner_FullName", title: "Owner", width: 80, template: "<span class='usercell'>#=Owner_FullName#</span>" },
{ field: "Property_PropertyRef", title: "Property Ref" },
{ field: "Property_Name", title: "Property Name" },
{ field: "Property_City", title: "City" },
{ field: "Property_Country_Name", title: "Country" },
{ field: "JobType_Name", title: "Job Type",width:700 },
{ field: "TaskStatus", title: "Status" },
{ field: "DueDate", title: "Due" },
{ field: "DateLogged", title: "DateLogged", hidden: true },
{ field: "Comments", hidden: true },
{ field: "Documents", hidden: true },
{
command: [{ text: "Click here to add a comment to this task", className: "addComment", click: addCommentCommand, template: '<div class="dropdown pull-right"><button class="btn btn-link dropdown-toggle text-green-lime" type="button" id="linkDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Actions <span class="caret"></span></button> <ul class="dropdown-menu" aria-labelledby="linkDropdown"><li> <span class="CommentsNumbers"></span></li>' },
{ text: "Click here to add a document to this task", className: "addFile", click: documentCommand, template: '<li><span class="DocumentsNumbers"></span> </li>' },
{ text: "Click here to reallocate this task to a different person", className: "reallocate", data: { field: "Id" }, click: reallocateCommand },
{ text: "Click here to close this task", className: "closeTask", click: completeTaskCommand },
{ text: "Click here to view and edit this task", className: "viewTask", click: editTaskCommand, template: ' </ul> </div>'}
],
title: " ",
width: 185
}
]
});
I just need to change, kendo's go to previous page, go to next page buttons to custom ones created by me in html.
I've found solution, just for changing prev/next buttons you can use
pageable: {
previousNext: true,
messages: {
display: "{0}-{1} of {2} total tasks",
select: "test",
empty: "No tasks to display",
first: "«",
last: "»",
next: "›",
previous: "‹"
},
I've searched all stack overflow, but haven't found correct answer for this.
It is possible to modify the HTML rendering of the Grid pager inside a setTimeout block (no timeout value is required) in the Grid's dataBound event.
Let's say we have a grid like in this Telerik example:
http://dojo.telerik.com/UkiH/2
Default info message for grid filter is: 'Show items with value that:'
Is there a way to change that message for only one specific column in grid, and others to remain with default messages?
Something like:
columns: [{
field: "OrderID",
title: "Order ID",
width: 120
}, {
field: "ShipCountry",
title: "Ship Country"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipAddress",
filterable: true,
messages: {
info: 'Show items custom message:'
}
}]
You should define messages inside filterable. Something as follows:
{
field: "ShipAddress",
filterable: {
messages: {
info: 'Show items custom message:'
}
}
}
I have the following code:
$("#grid").kendoGrid({
dataSource: {
type: "odata",
data: scannedResult.targetList,
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "proccess",
title: "Contact Name",
width: 200
}, {
field: "status",
title: "status"
}, {
field: "comment",
title: "comment"
}]
});
creating a kendo simple grid. for detail here is my plunker.
now the field status can be 1 of 3 values: passed, failed, skipped. I would like that the statuscolumn will show an icon instead of the value. While the code for that is rather simple, i do not know how to make the column a custom column.
Is there a way to make a column a custom column?
You should use a template definition. Something like:
Define the template.
<script id="status-template" type="text/kendo-templ">
# if (data.status === 1) { #
<span>Status1</span>
# } else if (data.status === 2) { #
<span>Status 2</span>
# } else { #
<span>Status 3</span>
# } #
</script>
Reference the template from the column definition
columns: [{
field: "proccess",
title: "Contact Name",
width: 200
}, {
field: "status",
title: "status",
template: $("#status-template").html()
}, {
field: "comment",
title: "comment"
}]
See it running here: http://jsfiddle.net/OnaBai/5x8wt0f7/
Obviously, the template can emit any HTML code, it might be links, images...
This has already been answered, but I want to show how I'd write this if people are confused when linking to jQuery selector.
// Custom Template that takes in entire Row object
function statusTemplate(dataRow) {
return `<span class="label label-${dataRow.status.toLowerCase()}">${dataRow.status}</span>`;
}
// Column definitions for grid
columns: [{
field: "proccess",
title: "Contact Name",
width: 200
}, {
field: "status",
title: "status",
template: statusTemplate
}, {
field: "comment",
title: "comment"
}]
http://jsfiddle.net/dentedio/hdokxme9/1/