Develop Reference

JSGrid Callback Methods

I am building grid using JSGrid (js-grid.com). I want call back methods to implement validations before adding new record or updating record. Documentation provided on website is not clearly mentioned how to implement one. Please refer http://js-grid.com/docs/#callbacks.
I need help how can i implement callback method cause i am new to JSGrid & Scripting. Following is my sample code. Please guide me where to put callback methods.
$(function() {
$("#jsGrid").jsGrid({
height: "90%",
width: "100%",
filtering: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
});
Thanks in advanced.

$(function() {
$("#jsGrid").jsGrid({
height: "90%",
width: "100%",
// added for demo
onItemInserting: function(args) {}, // before controller.insertItem
onItemInserted: function(args) {}, // on done of controller.insertItem
onItemUpdating: function(args) {}, // before controller.updateItem
onItemUpdated: function(args) {}, // on done of controller.updateItem
onItemDeleting: function(args) {}, // before controller.deleteItem
onItemDeleted: function(args) {}, // on done of controller.deleteItem
filtering: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
});

Kendo Grid Popup Edit mode not displaying ComboBox data

I have an issue displaying combobox data on the dropdown when I am in popup
edit mode in my kendo grid. When the editable parameter in the grid is changed to 'inline', the combobox behaves like it should. I think that the problem is in the custom popup template, but many changes have still produced no result.
Here's the script in the .cshtml file:
<script id="popup_editor" type="text/x-kendo-template">
<label for="name">Page Name</label>
<input name="name"
data-bind="name"
data-value-field="id"
data-text-field="name"
data-role="combobox" />
</script>
Here's the javascript:
var griddata = new kendo.data.DataSource({
transport: {
read: {
url: serviceRoot + "Approval/Get",
type: "POST",
contentType: jsonType,
cache: false
},
destroy: {
url: serviceRoot + "Approval/Delete",
type: "PUT",
complete: function(e) {
refreshData();
}
},
create: {
url: serviceRoot + "Approval/Create",
type: "PUT",
complete: function(e) {
refreshData();
}
},
update: {
url: serviceRoot + "Approval/Inline",
type: "PUT",
complete: function(e) {
refreshData();
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
scrollable: true,
height: 700,
schema: {
data: "list",
total: "total",
model: {
id: "id",
fields: {
id: { editable: false, nullable: false },
name: { editable: true, nullable: false, validation: { required: true }, type: "string" },
keyName: { editable: true, nullable: false, validation: { required: true }, type: "string" },
countryName: { editable: true, nullable: false, validation: { required: true }, type: "string" },
}
}
}
});
$("#grid").kendoGrid({
dataSource: griddata,
selectable: "row",
allowCopy: true,
scrollable: true,
resizable: true,
reorderable: true,
sortable: {
mode: "single",
allowUnsort: true
},
toolbar: [{ name: "create", text: "Create New Content" }}],
edit: function(e) {
if (e.model.isNew() === false) {
$('[name="PageName"]').attr("readonly", true);
}
},
columns: [
{ field: "id", hidden: true },
{ field: "name", title: "Page Name", editor: PageNameComboBoxEditor, width: "200px" },
{
command: [
{ name: "edit" },
{ name: "destroy" }
],
title: " ",
width: "250px"
}
],
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
},
pageable: {
refresh: true,
pageSizes: [5, 10, 15, 20, 25, 1000],
buttonCount: 5
},
cancel: function(e) {
$("#grid").data("kendoGrid").dataSource.read();
}
});
function PageNameComboBoxEditor(container, options) {
ComboBoxEditor(container, options, "name", "id", "ApprovalPage/Get", options.model.id, options.model.name);
}
function ComboBoxEditor(container, options, textfield, valuefield, url, defaultid, defaultname) {
$("<input required data-text-field=\"" + textfield + "\" data-value-field=\"" + valuefield + "\" data-bind=\"value:" + options.field + "\"/>")
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataTextField: textfield,
dataValueField: valuefield,
text: defaultname,
value: defaultid,
select: function(e) {
var dataItem = this.dataItem(e.item);
var test = dataItem;
},
dataSource: {
transport: {
read: {
url: serviceRoot + url,
type: "GET"
}
}
}
});
}
Any direction would be appreciated!

First i noticed that you have typo and some double initialization and it's value specified different which cause problem (not sure if this is your problem so please try remove it),
<input name="name"
data-bind="name" -> typo maybe? no data-binding declaration like these
data-value-field="id" -> double init, you have it on your ComboBoxEditor function dataValueField: valuefield,
data-text-field="name" -> double init, you have it on your ComboBoxEditor function dataTextField: textfield,
data-role="combobox" />
But sure way to make it works i'm usually customize the edit function to declare the kendo widget for mode: popup like this :
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing-popup">
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script id="popup_editor" type="text/x-kendo-template">
<div>
<label for="name">Page Name</label>
<input id="combo_box" name="name" data-role="combobox" />
</div>
</script>
<script>
$(document).ready(function() {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
editable: false,
nullable: true
},
ProductName: {
validation: {
required: true
}
},
UnitPrice: {
type: "number",
validation: {
required: true,
min: 1
}
},
Discontinued: {
type: "boolean"
},
UnitsInStock: {
type: "number",
validation: {
min: 0,
required: true
}
}
}
}
}
});
dataSource.fetch();
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
},
edit: function(e) {
$("#combo_box").kendoComboBox({
autoBind: false,
dataTextField: 'ProductName',
dataValueField: 'ProductID',
filter: "contains",
text: e.model.ProductName,
value: e.model.ProductID,
dataSource: ({
type: "jsonp",
serverFiltering: true,
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
}
})
});
},
columns: [{
field: "ProductName",
title: "Product Name"
}, {
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "120px"
}, {
field: "UnitsInStock",
title: "Units In Stock",
width: "120px"
}, {
field: "Discontinued",
width: "120px"
}, {
command: ["edit", "destroy"],
title: " ",
width: "250px"
}],
});
});
</script>
</div>
</body>
</html>

Typescript Kendo UI grid column type error

I have a problem with Kendo UI using Typescript in my project. I have a grid which filtering mode doesn't work on some column types, like integer. I tried to add the type in the columns directly, but it's not working at all.
And it's not filtering on links either.
[EDIT] Here's my function code that create the grid :
private _createInfoGridOptions(): kendo.ui.GridOptions {
return {
dataSource: {
serverPaging: true,
serverSorting: true,
pageSize: 15,
},
resizable: true,
selectable: 'row',
filterable: true,
columnMenu: true,
sortable: true,
scrollable: {
virtual: true
},
groupable: true,
height: 450,
columns: [
{ field: 'subTaskId', type: "number", title: 'Subtask Id', width: '80px' },
{ field: 'reportDate', type:"date", title: 'Report Date', width: '100px', template: '#= moment.utc(reportDate).local().format("yyyy/mm/dd") #' },
{ field: 'prog', type: "string", title: 'prog', width: '60px', template: "#=prog#" },
{ field: 'state', type:"string", title: 'status', width: '130px' },
{ field: 'maxTemps', type: 'number', title: 'Max Temps', width: '100px' }
]
};
}
I have this error on Chrome:
Uncaught TypeError: (d.prog || "").toLowerCase is not a function
and this one on Firefox:
TypeError: "".toLowerCase is not a function.
I did a plunker to test my code translated in javascript, but the type property works.
$("#grid").kendoGrid({
dataSource:
{
data : [
{id: 36308,reportDate:"2015-02-01",prog: 58,state: "Waiting",maxTemps: 0},
{id: 36309,reportDate:"2015-02-01",prog: 34,state: "Complete",maxTemps: 86400},
{id: 36310,reportDate:"2015-02-01",prog: 116,state: "Complete",maxTemps: 86400},
{id: 36311,reportDate:"2015-02-02",prog: 58,state: "Complete",maxTemps: 86400}
],
serverPaging: true,
serverSorting: true,
pageSize: 15
},
filterable: true,
columnMenu: true,
columns: [
{ field: 'id', type:'number', title: 'Id', width: '80px' },
{ field: 'reportDate', title: 'Report Date', width: '100px' },
{ field: 'prog', type:'number', title: 'Prog', width: '60px' },
{ field: 'state', title: 'Status', width: '130px' },
{ field: 'maxTemps', type:'number', title: 'Max Temps', width: '100px' }
]
});
So it's working in Javascript but not in Typescript, I'm using AngularJS with Kendo UI.
Any ideas why it's not woking ?
Thanks !
Ginwu

So it's working in Javascript but not in Typescript
The typescript you have shared is not the same as the JavaScript that you have shared. Specifially dataSource is vastly different. I would make the TS similar to the JS and that should fix the error.

Try this solution Plunker,
<!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.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.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>
<div id="grid"></div>
<script>
$(document).ready(function() {
var data = [{
id: 36308,
reportDate: new Date("2015/02/01"),
prog: 58,
state: "Waiting",
maxTemps: 0
}, {
id: 36309,
reportDate: new Date("2015/02/01"),
prog: 34,
state: "Complete",
maxTemps: 86400
}, {
id: 36310,
reportDate: new Date("2015/02/01"),
prog: 116,
state: "Complete",
maxTemps: 86400
}, {
id: 36311,
reportDate: new Date("2015/02/02"),
prog: 58,
state: "Complete",
maxTemps: 86400
}];
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
model: {
fields: {
prog: {
type: "number"
},
reportDate: {
type: "date"
}
}
}
}
},
scrollable: true,
columnMenu: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
columns: [{
field: 'id',
type: 'number',
title: 'Id',
width: '80px'
}, {
field: 'reportDate',
title: 'Report Date',
width: '100px',
format: "{0:yyyy/MM/dd}",
filterable: {
ui: "datepicker"
}
}, {
field: 'prog',
title: 'Prog',
width: '60px',
template: '#= prog #'
}, {
field: 'state',
title: 'Status',
width: '130px'
}, {
field: 'maxTemps',
type: 'number',
title: 'Max Temps',
width: '100px'
}]
});
});
</script>
</body>
</html>

How can we configure Kendo-UI ComboBox with Grid.

I have a problem to configure the Kendo-Ui with Combo-box with custom values. I have seen this question How to use ComboBox as Kendo UI grid column? but we are unable to configure the whole ...
Please look at the codes.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.js"></script>
<link href="css/kendo.common.css" rel="stylesheet" />
<link href="css/kendo.default.css" rel="stylesheet" />
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function (){
// var crudServiceBaseUrl = "http://localhost/kendo-prac/",
dataSource = new kendo.data.DataSource({
transport: {
read:{
url: "http://localhost/kendo-prac/data/employees.php",
dataType: "jsonp"
},
update: {
url: "http://localhost/kendo-prac/data/update.php",
dataType: "jsonp"
},
destroy: {
url:"http://localhost/kendo-prac/data/delete.php",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "ID",
fields: {
Name: { editable: false, nullable: false },
Title: { editable: true, nullable: false },
URL: { editable: true, nullable: false },
FTP: { editable: true, nullable: false },
// date: { editable: false, nullable: false },
Status: { type: "string", editable:false},
Remarks: { editable: false, nullable: false }
}
}
}
});
// template: ('<select id="combobox" name="Status"/><option value="#=Status#">#=Status#</option><option value="Added">Added</option><option value="Rejected">Rejected</option></select>')
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 650,
scrollable: true,
sortable: true,
toolbar: ["save", "cancel"],
columns: [
{ field: "Name", width: "60px" },
{ field: "URL", width: "350px" },
{ field: "Title", width: "150px" },
{ field: "FTP", width: "150px" },
// { field: "Date", width: "150px" },
// { field: "Status", width: "100px" },
{field: "Status", width:"150px", template: ('<select id="combobox" name="Status"/><option value="#=Status#">#=Status#</option><option value="Added">Added</option><option value="Rejected">Rejected</option></select>')},
// { field: "Action", width: "100px" },
// { field: "Code", width: "100px" },
{ field: "Remarks", width: "50px",template:('#=Remarks#')},
{ command: "destroy", title: "Delete", width: "100px" }],
editable: true
});
$("#com").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Cotton", value: "1" },
{ text: "Polyester", value: "2" },
{ text: "Cotton/Polyester", value: "3" },
{ text: "Rib Knit", value: "4" }
],
filter: "contains",
suggest: true,
index: 3
});
});
</script>
</div>
</body>
</html>
We have not implement able to configure the Combobox. we can simply built the select box with following options. We just update the Status from Combobox.
Thanks
Alen

You can refer to this official example off the KendoUI demos to set the custom editor up correctly.

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);
},
}