I recently tried the facility for CRUD data using inline editing, I just tried to run the save command but failed. I combine three files:
1. SQL to store data that has been inputted
function spGroup($data){
$db=pDatabase::getInstance();
$inventorygroupname=stripslashes(strip_tags($data[1]));
$query="INSERT INTO inventorygroup (inventorygroupname, status)VALUES('$inventorygroupname',0)";
$rs=$db->query($query);
if($rs){
return true;
}else{
return false;
}
}
2. Javascript to run commands on kendo ui.
var group=(function(){
return{
load:function(){
var ik_data = {
ajax: 1,
mode: "pages",
cl: "inventorygroup",
ikdata: {0:"getGroup"}
};
$.ajax({
url: lokal+"ajax.php",
type: "POST",
dataType: "json",
async:true,
data: ik_data,
success: function(e){
if(e!=false){
var dataSource = new kendo.data.DataSource({
schema: {
model: {
id: "idinventorygroup",
fields: {
idinventorygroup: { editable: false, nullable: true },
inventorygroupname: { validation: { required: true } }
}
}
},
transport: {
read: function (s) {
s.success(e);
},
update: function (s) {
url:group.editgroup();
s.success();
},
create: function (s) {
url:group.save();
s.success();
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 10
});
$("#grid_group").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
toolbar: ["create", "save", "cancel"],
columns: [
{ field:"inventorygroupname", title: "Group Name" },
//{ title:"Status", format: "{0:c}", width: "120px", template: kendo.template($("#status").html())},
{
title: "Action",
width: 50,
template: kendo.template($("#edit").html())
},
{ command: [
{
name: "edit",
text: {
edit: "Edit Data",
update: "Update",
cancel: "Cancel"
}
},
{
name: "destroy",
text: "Delete Data"
}
], title: " ", width: "250px" }],
editable: {
mode: "inline",
}
});
}
}
});
},
save:function(a,b){
var inventorygroupname=a;
var idinventorygroup=b;
var ik_data = {
ajax: 1,
mode: "pages",
cl: "inventorygroup",
ikdata: {0:"spGroup",1:inventorygroupname}
};
$.ajax({
url: lokal+"ajax.php",
type: "POST",
dataType: "json",
async:true,
data: ik_data,
success: function(e){
if(e!=false){
group.load();
}
}
});
},
3. PHP as an object that is used as a variable for the operation of the data.
<script type="text/x-kendo-template" id="edit">
<button class="btn btn-default btn-sm" type="button" onclick="group.save('${inventorygroupname}')">Edit Data</button>
</script>
I have successfully used this concept to the method of the popup, but for my inline application failed. ask for help. Thank you
1. SQL to store data that has been inputted
function spGroup($data){
$db=pDatabase::getInstance();
$inventorygroupname=stripslashes(strip_tags($data[1]));
$query="INSERT INTO inventorygroup (inventorygroupname, status)VALUES('$inventorygroupname',0)";
$rs=$db->query($query);
if($rs){
return true;
}else{
return false;
}
}
2. Javascript to run commands on kendo ui.
var group=(function(){
return{
load:function(){
var ik_data = {
ajax: 1,
mode: "pages",
cl: "inventorygroup",
ikdata: {0:"getGroup"}
};
$.ajax({
url: lokal+"ajax.php",
type: "POST",
dataType: "json",
async:true,
data: ik_data,
success: function(e){
if(e!=false){
var dataSource = new kendo.data.DataSource({
schema: {
model: {
id: "idinventorygroup",
fields: {
idinventorygroup: { editable: false, nullable: true },
inventorygroupname: { validation: { required: true } }
}
}
},
transport: {
read: function (s) {
s.success(e);
},
update: function (s) {
url:group.editgroup();
s.success();
},
create: function (s) {
url:group.save();
s.success();
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 10
});
$("#grid_group").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
toolbar: ["create", "save", "cancel"],
columns: [
{ field:"inventorygroupname", title: "Group Name" },
//{ title:"Status", format: "{0:c}", width: "120px", template: kendo.template($("#status").html())},
{
title: "Action",
width: 50,
template: kendo.template($("#edit").html())
},
{ command: [
{
name: "edit",
text: {
edit: "Edit Data",
update: "Update",
cancel: "Cancel"
}
},
{
name: "destroy",
text: "Delete Data"
}
], title: " ", width: "250px" }],
editable: {
mode: "inline",
}
});
}
}
});
},
save:function(a,b){
var inventorygroupname=a;
var idinventorygroup=b;
var ik_data = {
ajax: 1,
mode: "pages",
cl: "inventorygroup",
ikdata: {0:"spGroup",1:inventorygroupname}
};
$.ajax({
url: lokal+"ajax.php",
type: "POST",
dataType: "json",
async:true,
data: ik_data,
success: function(e){
if(e!=false){
group.load();
}
}
});
},
3. PHP as an object that is used as a variable for the operation of the data.
<script type="text/x-kendo-template" id="edit">
<button class="btn btn-default btn-sm" type="button" onclick="group.save('${inventorygroupname}')">Edit Data</button>
</script>
I have successfully used this concept to the method of the popup, but for my inline application failed. ask for help. Thank you