Develop Reference

Kendo Grid Separate Popup Window Title & Buttons for Create & Edit

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 )

Modifying Group Header to include children count Kendo UI Grid

I have a Kendo UI Grid created in javascript. I have a defalut grouping, then the user can select other groupings. Ineed help with a couple things:
1.I would like to make a custom group header so it includes a count of the children rows.
On mouseover of the Group Header I need to change the related marker on a Google Maps instance. (The group contains the lat and long of the client.
function loadGrid(dataItem) {
$("#grid").kendoGrid({
dataSource: {
dataType: "json",
transport: {
read: {
url: serviceUrl",
dataType: "json",
},
},
schema: {
data: "result.results",
},
group: {
field: "siteName", field: "siteName",
},
},
dataBound: onDataBound,
pageSize: 20,
height: 550,
filterable: true,
groupable: true,
sortable: true,
pageable: true,
collapse: true,
columns: [
{
field: "dirId",
title: "Dir Id",
hidden: true
},
{
field: "dirName",
Title: "Dir Name",
hidden: true
},
{
field: "siteId",
title: "Site Id",
hidden: true
},
{
field: "siteName",
title: "Site Name",
//hidden: true
},
{
field: "appTypeRefId",
title: "App Type Ref Id",
hidden: true
},
{
field: "appInstName",
title: "App Instance Name",
},
{
field: "appTypeName",
title: "App Type",
},
{
field: "unitId",
title: "Unit Id",
hidden: true
},
{
field: "unitName",
title: "Unit Name"
},
{
field: "controlSystemId",
title: "Control System Id",
hidden: true
},
{
field: "controlSystemName",
title: "Control System Name"
},
{
field: "longitude",
title: "Longitude",
hidden: true
},
{
field: "latitude",
title: "Latitude",
hidden: true
},
],
})
}
Thanks a ton!
Ron

Kendo grid with button in title to access data

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"
}]});

Pagination does not work in Kendo UI grid after adding data

I am using a Kendo UI grid in my AngularJS app, I am adding, editing and displaying records but I am not able to get the pagination to work. Currently I have set the pageSize to 2 and if I add a new record to the data it shows it on the same page instead of a new one.
Following is my angular js controller code for configuring the Kendo UI grid:
$scope.keyPersonList = new kendo.data.ObservableArray([
{person1: 'Kiran', policyStatusID: 1 },
{person1: 'Kadam', policyStatusID: 2 }]);
$scope.mainGridOptions = {
dataSource: {
pageSize: 2,
schema: {
model:
{
id: "id",
fields: {
person1: { editable: true, type: "string" },
policyStatusID: { editable: true, valuePrimitive: true }
}
}
}
//total: 10,//function () { return $scope.keyPersonList.length; },
//serverPaging: false,
//serverSorting: false
},
selectable: "row",
//toolbar: kendo.template(angular.element("#toolbarTemplate").html()),
toolbar: '<button class="btn btn-default mrn-10-lft" id="btnAddNewPerson" name="btnAddNewPerson" type="button" role="button" ng-click="addNewPerson($event)">Add New<span class="glyphicon glyphicon-plus color-green pad-10-lt"></span></button>',
sortable: true,
pageable: {
previousNext: true,
numeric: true,
messages: {
empty: "No items",
display: "{2} items",
pageSizes: true
}
},
height: 400,
columns: [
{
hidden: true,
field: "id"
}, {
field: "person1",
title: "Person 1",
width: "200px",
type: "string",
validation: {
required: true
}
}, {
field: "policyStatusID",
title: "Policy Status",
width: "75px",
editor: function (container, options) {
var input = $('<input id="ctrlPolicyStatus" name="policyStatusID" data-text-field="name" data-value-field="name" data-bind="value:' + options.field + '" k-ng-model="policyStatusID">');
input.appendTo(container);
// initialize a dropdownlist
input.kendoDropDownList({
dataSource: dropDownDataSource,
valuePrimitive: true
}).appendTo(container);
},
validation: {
required: true
}
},
{
command:
[{ text: "customDelete", className: "btn-person btn-person-Delete", click: deletePersonData },
{ text: "customArchive", className: "btn-person btn-person-archive", click: archivePersonData },
{ text: "customUnarchive", className: "btn-person btn-person-unarchive", click: unArchivePersonData }],
title: "",
width: "40px"
}
],
editable: true
};
Following is my HTML code:
<kendo-grid k-options="mainGridOptions" id="grdKeyPeople"
k-data-source="keyPersonList"
k-on-change="selected = data">
</kendo-grid>
Thank you for your help in advance.

The issue was, I had set the data source both in the mainGridOptions and also in the directive k-data-source. I removed the directive k-data-source and it worked for me.

Kendo Tooltip content chnages dynamically depending on the other 2 row data

I have grid which has around 8 columns, 8th column has the delete button. When the user hovers over the delete button tooltip should appear with some content. Now the content in the tooltip depends on the row value from 6th and 7th column. Consider if the row value of 6th column is 'Yes' and row value of 7th column is "No", tooltip content will be Hello and as the row value of 6th and 7th column changes tooltip content will also change. Below is my code, but i am unable to get that.
function initializeGrid() {
$("#wellboreGrid").kendoGrid({
filterable: true,
resizeable: true,
reorderable: true,
columnMenu: true,
scrollable: false,
dataBound: function (e) {
debugger;
$("#wellboreGrid").find(".k-button").kendoTooltip({
content:e.data.item.ExistingAssn=="Yes" && e.data.item.ExistingGeologic=="NO" ? "Hello" : e.data.item.ExistingAssn=="Yes" && e.data.item.ExistingGeologic=="YES" ? "EXIT":e.data.item.ExistingAssn=="No" && e.data.item.ExistingGeologic=="YES" ? "WHAT" : Error,
width: 100,
height: 60,
position: "bottom",
});
},
columns: [
{ field: "FacilityId", title: "", hidden: true },
{ field: "FacilityName", title: "Shell Name" },
{ field: "shortName", title: "Shell Short Name" },
{ field: "ApiNumber", title: "API Number" },
{ field: "InService", title: "Service Status" },
{ field: "State", title: "State" },
{ field: "ExistingAssn", title: "Existing Association", format: "{0:c}" },
{ field: "ExistingGeologic", title: "Existing Geologic", format: "{0:c}" },
{ field: "LithoStratColoumnId", title: "", hidden: true },
{ field: "GeoIntervalId", title: "", hidden: true },
{ command: [{ click: deleteItem, text: "X" }], title: "Delete" }
]
});
$("#dvshowWellbore").attr("style", "display:inline;float: left;font-weight:bolder;font-style:italic;padding-bottom:10px;padding-left:15px;font-size:15px;");
$("#wellboreGrid").find('.k-grid-header .k-header').css('font-weight', 'bold');
};