Hi,
I have recently started to use Kendo UI technology and currently i am trying to create a grid using the Kendo Grid. For binding the data to the grid, i found two ways:
1. Transport
2. $.ajax( { } );
My requirement is to have a grid that will display the data and that can be auto-refreshed every time i change, create or delete the data in the grid. For this, i have tried the $.ajax( { } ) call as below:
I am unable to proceed further because i have no idea how to bind only
transport: { create: { } }
to the "Add Music" button and similary for update and destroy.
Also, i would like to know what are the differences between transport and $.ajax({}), what are the pros and cons of each and when to use transport and $.ajax({}).
Thanks in advance,
Pratap
I have recently started to use Kendo UI technology and currently i am trying to create a grid using the Kendo Grid. For binding the data to the grid, i found two ways:
1. Transport
2. $.ajax( { } );
My requirement is to have a grid that will display the data and that can be auto-refreshed every time i change, create or delete the data in the grid. For this, i have tried the $.ajax( { } ) call as below:
var
myDataSource =
null
;
function
loadGrid() {
$(
"#body"
).empty();
$.ajax({
autoSync:
true
,
url: "api/musicController/?Id=3",
type:
'GET'
,
dataType:
'json'
,
success:
function
(data) {
displayDataInGrid(data);
},
error:
function
(e) {
alert(e.responseText);
}
});
}
function
displayDataInGrid(musicData) {
myDataSource =
new
kendo.data.DataSource({
data: musicData,
pageSize: 5,
sort: { field:
"Id"
, dir:
"desc"
},
width:
"50"
,
schema: {
model: {
id:
"MusicId"
,
fields: {
Id: { validation: { required:
false
}, editable:
false
},
Title: { validation: { required:
false
} },
Description: { validation: { required:
false
} },
MusicType: { defaultValue: { Id: 1, Value: 1 } }
}
}
}
});
myDataSource.read();
$(
"#body"
).kendoGrid({
dataSource: myDataSource,
toolbar: [
{ text:
"Add Music"
, className:
"clsAddMusic"
},
{ text:
"Save Changes"
, className:
"clsSaveChanges"
},
{ text:
"Remove Music"
, className:
"clsRemoveMusic"
}
],
columns: [
{ field:
"Id"
, title:
"Music Id"
},
{ field:
"Title"
, title:
"Title"
},
{ field:
"Description"
, title:
"Description"
},
{ field:
"MusicType"
, title:
"Music Type"
}
],
scrollable:
true
,
navigatable:
true
,
pageable:
true
,
groupable:
true
,
filterable:
true
,
sortable:
true
,
selectable:
"multiple"
,
editable:
true
});
// Bind function to click event of "Add Music" button.
$(
".clsAddMusic"
).click(
function
() {
addMusic();
});
// Bind function to click event of "Save Changes" button.
$(
".clsSaveChanges"
).click(
function
() {
saveMusic();
});
// Bind function to click event of "Remove Music" button.
$(
".clsRemove Music"
).click(
function
() {
remove Music();
});
}
Using the above functions, i am able to create, delete and change the data that gets displayed in the grid immediately as autoSync is set to true.
Now the transport feature:
$.support.cors =
true
;
var
i = 1;
$(document).ready(
function
() {
var
myDataSource =
new
kendo.data.DataSource({
autoSync:
true
,
pageSize: 5,
batch:
false
,
transport: {
read: {
url:
"api/music"
,
// GetAllMusic
contentType:
"application/json"
,
type:
"GET"
},
create: {
url:
"api/music"
,
// AddMusic
contentType:
"application/json"
,
type:
"POST"
,
},
update: {
url:
"/api/music/3"
,
// UpdateMusic
contentType:
"application/json"
,
type:
"PUT"
},
destroy: {
url:
"/api/music/3"
,
// DeleteMusic
contentType:
"application/json"
,
type:
"DELETE"
}
},
schema: {
model: {
id:
"MusicId"
,
fields: {
Id: { editable:
false
, type:
"number"
},
Title: { validation: { required:
true
}, type:
"string"
},
Description: { validation: { required:
true
}, type:
"string"
},
MusicType: { validation: { required:
true
}, type:
"string"
}
}
}
},
});
$(
"#grid"
).kendoGrid({
height: 300,
toolbar: [
"create"
,
"save"
,
"cancel"
],
columns: [
{ field:
"Id"
, title:
"Music Id"
},
{ field:
"Name"
, title:
"Music Name"
},
{ field:
"Description"
, title:
"Description"
},
{ field:
"ParameterType"
, title:
"Music Type"
},
{ command:
"destroy"
}
],
pageable:
true
,
sortable:
true
,
filterable:
true
,
editable:
true
,
dataSource: dataSource
});
});
// I want to bind the below function to my html button's click event.
function
addMusic() {
// How and what to add here?
}
// I want to bind the below function to my html button's click event.
function
removeMusic() {
// How and what to add here?
}
// I want to bind the below function to my html button's click event.
function
editRow() {
// How and what to add here?
}
I am unable to proceed further because i have no idea how to bind only
transport: { create: { } }
to the "Add Music" button and similary for update and destroy.
Also, i would like to know what are the differences between transport and $.ajax({}), what are the pros and cons of each and when to use transport and $.ajax({}).
Thanks in advance,
Pratap