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 )

KendoUI Grid row filter with dropdown for boolean

The Filter basically works fine but,
The select does not seem to fire the first selection
this happens every time the filter is reset as well.
I meddled with it for two days now...
here is the Fiddle
<script src="../content/shared/js/products.js"></script>
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: {
mode: "row"
},
pageable: {
input: true,
numeric: false
},
columns: [
{
field: "ProductName",
title: "Product Name",
filterable: {
cell: {
operator: "contains",
showOperators: false
}
}
}, {
field: "Discontinued", title: "Discontinued",
filterable: {
mode: "row",
cell: {
showOperators: false,
template: function (args) {
args.element.kendoDropDownList({
autoBind:false,
dataTextField: "text",
dataValueField: "value",
dataSource: new kendo.data.DataSource({
data: [{ text: "Yes", value: "true" },
{ text: "No", value: "false" }]
}),
index: 0,
optionLabel: {
text: "Filter",
value: ""
},
valuePrimitive: true
})
}
}
}
}
]
});
});
</script>

Kendo UI 2015 Q1 has a lot of bug on it, especially on dropdown family widget like autocomplete, multiselect, dropdown, etc..
Change your kendo library to 2014 or previous version will make it works fine,
check this dojo

kendo UI grid update function wont fire

$('#usersGrid').kendoGrid({
columns: [
{ field: "UserName", title: "Display name", width: "140px" },
{ field: "Unit", title: "Unit", width: "140px" },
{ field: "Email", title: "E-mail", width: "140px" },
{ field: "Indienst", title: "Indienst", width: "140px" },
{ field: "Uitdienst", title: "Uitdienst", width: "140px" },
{ field: "Roles", title: "Roles" },
{ command: { text: "edit", click: openEdit } }
],
editable: {
update: true,
create: true
},
dataSource: {
transport: {
read: function (options) {
$.ajax({
url: "/Administration/GetUserList",
dataType: "json",
data: {
indienst: function () {
return indienst;
}
},
success: function (data) {
$("#usersGrid").data('kendoGrid').dataSource.data(data);
}
});
},
update: function (options) {
alert('not firing');
}
}
},
schema: {
model: {
id: "UserId",
fields: {
UserId: { editable: false, type: "int" },
UserName: { type: "string" },
Unit: { editable: false, type: "string" },
Email: { type: "string" },
Indienst: { type: "string" },
Uitdienst: { type: "string" },
Roles: { editable: false, type: "string" }
}
}
}
});
This is my kendo UI grid. It's reading fine, but the problem is that it wont fire the datasource.transport.update call when I change a grid cell inline. Why won't it?
I've made sure I specified an id column and that the transport CRUD functions are all of the same type (functions here, not urls), but I've tried to have it work with urls as well. Only transport.read will fire...
when I check the console logs there are no errors given.
So I want to edit it inline. Click on a cell on the grid, and change the value, when u leave focus of the cell I want dataSource.transport.update() to run, or any function at all.
http://jsfiddle.net/8tzgc/135/
Edit:
After doing some research on the docs I've found out about the change() event. By checking what kind of change event it is we can figure out if its an update event and run the function we want ourselves. Here's my updated jsfiddle:
http://jsfiddle.net/8tzgc/140/
If anyone figures out a way that does not require calling the update function yourself, then I'm all ears.

To edit inline, you can just leverage the example from the telerik demo site.
Change your command column to:
{ command: ["edit", "destroy"], title: " ", width: "160px" }
And change your editable specification to "inline":
editable: "inline",
I have edited your fiddle with the solution: http://jsfiddle.net/8tzgc/136/
In order to fully flesh this out, you would have to provide implementation for the associated methods from the command, such as update, create, etc... You can see those examples in the telerik demo.
If you would like to do cell-click editing with custom editors (dropdowns, etc), here is another telerik example.
There is also this example of batch editing.

try to change
command: { text: "edit", click: openEdit }
to
command: ["edit"]

If you are using editable:popup then try the following:
command: [
{ name: "view", template: "<a class='k-button k-button-icontext selectDiscountPercentage' title='Discount Percentage' ><i class='k-icon k-i-view'></i></a>", text: "", },
{ name: "edit", text: "" },
{ name: "destroy", text: " "}
], title: " ", width: "160px"
The trick here is to give empty space(" ") to the text key inside command array

Kendo UI grid not triggering transport create URL

Ive a kendoUI grid doing CRUD from a web service. For some reason, read command works perfectly and populates my grid.
But when I try to create a new record, despite that it shows the new record in the grid and i can edit its fields, button save does not trigger the web service.
Checking out http logs, I see no hit on the service. Only on "read".
This is the grid's code:
$(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "libyMsg.php?way=getUsrMsgList"
},
create: {
url: "libyMsg.php?way=createMsg",
type: "PUT"
},
update: {
url: "libyMsg.php?way=updateeMsg",
type: "PUT"
},destroy: {
url: "libyMsg.php?way=destroyMsg",
type: "PUT"
},
batch: true,
pageSize: 10,
schema: {
data: "data",
model: {
id: "msg_id",
fields: {
msg_id: { editable: false, nullable: true },
msg_title: { validation: { required: true } },
msg_content: { validation: { required: true } },
msg_type: { type: "number", validation: { min: 0, required: true }},
msg_date: { type: "date", validation: { required: true } },
msg_status: { type: "number", validation: { min: 0, required: true } }
}
}
},
},
columns: [{ field: "msg_id", width: 40,title: "ID" },
{ field: "msg_title",width: 300, title: "Title" },
{ field: "msg_content", width: 300,title: "Content" },
{ field: "msg_type", width: 40,title: "Type" },
{ field: "msg_date", width: 300,title: "Date" },
{ field: "msg_status", width: 40,title: "Status" }],
scrollable: true,
sortable: true,
editable:true,
pageable: {
refresh: true,
pageSizes: true
},
toolbar: ["create", "save", "cancel"],
});
});
This is driving me crazy. Anyone?
Ty/M

Your transport is wrong. Try this instead:
transport:{
read :"libyMsg.php?way=getUsrMsgList",
create :{
url :"libyMsg.php?way=createMsg",
type:"PUT"
},
update :{
url :"libyMsg.php?way=updateeMsg",
type:"PUT"
},
destroy:{
url :"libyMsg.php?way=destroyMsg",
type:"PUT"
}
},
create, update and destroy should be part of transport.

Is it possible to have full CRUD functions in kendo grid with local data

I'm currently implementing a kendo grid and i'm populating it with local data.
That is; I have generated a JSON string from my action and supplying that string on the view page.
In the end i would like to know if it is possible to implement full CRUD functions with local data?
here's a sample of the code written so far;
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function() {
var myData = ${coursemodules},
dataSource = new kendo.data.DataSource({
data: myData,
batch: true,
pageSize: 30,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true},
name: { type: "string", validation: { required: true }},
qualificationLevel: { type: "string", validation: { required: true }},
description: { type: "string", validation: { required: true }},
published: { type: "boolean" },
gateApprove: { type: "boolean" },
duration: { type: "number", validation: { min: 1, required: true } },
academicBody: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 350,
scrollable: true,
sortable: true,
pageable: true,
toolbar: ["create", "save", "cancel"],
columns: [
{
field: "id",
title: "ID",
width: '3%'
},
{
field: "name",
title: "Course Title",
width: '20%'
},
{
field: "description",
title:"Description",
width: '35%'
},
{
field: "published",
title: "Published",
width: '7%'
},
{
field: "gateApprove",
title: "Gate Approve",
width: '7%'
},
{
field: "duration",
title: "Duration",
width: '5%'
},
{
field: "academicBody.shortName",
title: "Academic Body",
width: '10%'
}
],
editable: true
});
});
</script>
</div>
I have realise that for the datasource, you have to declare transport to implement the CRUD. However, I need to declare "data". I tried declaring both transport and data. That doesn't seem to work.

Yes you can Here is JSFiddle Hope this will help you.
// this should be updated when new entries are added, updated or deleted
var data =
[{
"ID": 3,
"TopMenuId": 2,
"Title": "Cashier",
"Link": "www.fake123.com"},
{
"ID": 4,
"TopMenuId": 2,
"Title": "Deposit",
"Link": "www.fake123.com"}
];
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function(options) {
options.success(data);
},
create: function(options) {
alert(data.length);
},
update: function(options) {
alert("Update");
},
destroy: function(options) {
alert("Destroy");
alert(data.length);
}
},
batch: true,
pageSize: 4,
schema: {
model: {
id: "ID",
fields: {
ID: {
editable: false,
nullable: true
},
TopMenuId: {
editable: false,
nullable: true
},
Title: {
editable: true,
validation: {
required: true
}
},
Link: {
editable: true
}
}
},
data: "",
total: function(result) {
result = result.data || result;
return result.length || 0;
}
}
},
editable: true,
toolbar: ["create", "save", "cancel"],
height: 250,
scrollable: true,
sortable: true,
filterable: false,
pageable: true,
columns: [
{
field: "TopMenuId",
title: "Menu Id"},
{
field: "Title",
title: "Title"},
{
field: "Link",
title: "Link"},
{
command: "destroy"}
]
});

When binding local data, the Grid widget utilizes an abstraction that represents a local transport. Therefore, it does not require a custom transport; modifications made in the grid are reflected to the bound data source. This includes rollbacks through a cancellation.

There is fully functional example of this in telerik documentation
What you need is define transport block in dataSource object with custom CRUD funtions which update local source.
transport: {
create: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.data.ID = localData[localData.length-1].ID + 1;
localData.push(options.data);
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
read: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.success(localData);
},
update: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID == options.data.ID){
localData[i].Value = options.data.Value;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
destroy: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID === options.data.ID){
localData.splice(i,1);
break;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(localData);
},
}