This is a migrated thread and some comments may be shown as answers.

Update Grid Kendo Ui with Json

1 Answer 17 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Almir
Top achievements
Rank 1
Almir asked on 18 Mar 2019, 02:14 PM

I would like to know how do I get my Json updated on the grid after saving and editing, the grid is only showing my Json files manually added

 

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Grid</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<link href="styles/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>

<h1 style="position: center">Cadastro de Alunos</h1>
<div class="container">
<button id="abrirModal" class="k-button k-primary" style=" float: left">Cadastrar</button>
</div>
<br>
<br>

<div id="grid"></div>
<div id="kendoModal">
<div id="window">
<div class="col-sm-2">
<div class="form-group">
<label for="">Matrícula</label>
<input type="text" class="form-control" id="txtMatricula">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Nome</label>
<input type="text" class="form-control" id="txtAluno">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Idade</label>
<input type="text" class="form-control" id="txtIdade">
</div>
</div>
<button id="#btnSalvar" class="k-primary" onclick="salvarTeste()">Salvar</button>
</div>

<div class="responsive-message"></div>
<style>
#kendoModal {
min-height: 500px;
}
#undo {
text-align: center;
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
}
.armchair {
float: left;
margin: 30px 30px 120px 30px;
text-align: center;
}
.armchair img {
display: block;
margin-bottom: 10px;
}
.k-window-content a {
color: #BBB;
}
.k-window-content p {
margin-bottom: 1em;
}
@media screen and (max-width: 1023px) {
div.k-window {
display: none !important;
}
}
</style>
</div>
<div id="kendoModal">
<div id="windowEditar">
<div class="col-sm-2">
<div class="form-group">
<label for="">Matricula</label>
<input type="text" class="form-control" id="editarMatricula">
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="">Aluno</label>
<input type="text" class="form-control" id="editarAluno">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Idade
</label>
<input type="text" class="form-control" id="editarIdade">
</div>
</div>
<button id="#btnSalvar" class="k-primary" onclick="salvarEditar()">Salvar</button>
</div>

<div class="responsive-message"></div>
<style>
#kendoModal {
min-height: 500px;
}
#undo {
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
}
.armchair {
float: left;
margin: 30px 30px 120px 30px;
text-align: center;
}
.armchair img {
display: block;
margin-bottom: 10px;
}
.k-window-content a {
color: #BBB;
}
.k-window-content p {
margin-bottom: 1em;
}
@media screen and (max-width: 1023px) {
div.k-window {
display: none !important;
}
}
</style>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="js/kendo.all.min.js"></script>
<script>
var json = [
{
matricula: '1',
aluno: 'Almir',
idade: '21'
},
{
matricula: '2',
aluno: 'Carlos',
idade: '18 '
},
{
matricula: '3',
aluno: 'Batista',
idade: '38'
},
{
matricula: '4',
aluno: 'Maria',
idade: '39'
},
{
matricula: '5',
aluno: 'Valeria',
idade: '41'
},
{
matricula: '6',
aluno: 'Douglas',
idade: '32'
},
{
matricula: '7',
aluno: 'Cida',
idade: '18'
},
{
matricula: '8',
aluno: 'Joana',
idade: '18'
},
{
matricula: '9',
aluno: 'Luis',
idade: '18'
},
{
matricula: '10',
aluno: 'Daiane',
idade: '48'
}
];
var db = JSON.parse(localStorage.getItem('json'));
if (!db) {
db = json
};
var modeloGrid = {
fields: {
matricula: { type: "string", editable: false },
aluno: { type: "string", editable: false },
idade: { type: "string", editable: false },

}
};
var colunasGrid = [
{ field: "matricula", title: "Matricula", width: 250 },
{ field: "aluno", title: "Nome", width: 250 },
{ field: "idade", title: "Idade", width: 250 },
{ command: { text: "Editar", click: (e) => { funcaoEditar(e) }, imageClass: "k-icon k-i-plus" }, title: " ", width: "100px" },
//{ command: { text: "Excluir", click: () => { eliminarTeste() }, imageClass: "k-icon k-i-plus" }, title: " ", width: "100px" },
{
command: [{
name: "Delete", imageClass: "k-icon k-i-close", click: function (e) {
e.preventDefault();
var dataItem = this.dataItem($(e.target).closest("tr"));
if (kendo.confirm("Deseja excluir?").then(function () {
kendo.alert("Aluno excluido com sucesso.");
}, function () {
kendo.alert("You chose to Cancel action.");
})) {
var dataSource = $("#grid").data("kendoGrid").dataSource;
dataSource.remove(dataItem);
dataSource.sync();
}
}
}], title: "&nbsp;", width: "200px"
}
];
function kendoGridGetId(e, idGrid, keyName) {
var cell = $(e.currentTarget);
var cellIndex = cell[0].cellIndex;
var grid = $(idGrid).data("kendoGrid");
var column = grid.columns[cellIndex];
var dataItem = grid.dataItem(cell.closest("tr"));
return dataItem[keyName];
}

//função editar
function funcaoEditar(e) {
$('#windowEditar').data('kendoWindow').open();
var matricula = kendoGridGetId(e, '#grid', 'matricula');
var aluno = kendoGridGetId(e, '#grid', 'aluno');
var idade = kendoGridGetId(e, '#grid', 'idade');
$("#editarMatricula").val(matricula);
$("#editarAluno").val(aluno);
$("#editarIdade").val(idade);
}

//função salvar
let salvarTeste = () => {
let db = localStorage.info == null ? [] : JSON.parse(localStorage.info);
let matricula = document.querySelector("#txtMatricula").value;
let aluno = document.querySelector("#txtAluno").value;
let idade = document.querySelector("#txtIdade").value;

db.push({
'matricula': matricula,
'aluno': aluno,
'idade': idade
});

localStorage.info = JSON.stringify(db);
$('#grid').data('kendoGrid').dataSource.read();
$('#grid').data('kendoGrid').refresh();
kendo.alert("Salvo com Sucesso!").center();
console.log(db);
}
let salvarEditar = () => {
let db = localStorage.info == null ? [] : JSON.parse(localStorage.info);
let matricula = document.querySelector("#editarMatricula").value;
let aluno = document.querySelector("#editarAluno").value;
let idade = document.querySelector("#editarIdade").value;

db.push({
'matricula': matricula,
'aluno': aluno,
'idade': idade
});

var dataSource = $("#grid").data("kendoGrid").dataSource;
dataSource.refresh(db);
localStorage.info = JSON.stringify(db);

kendo.alert("Modoficado com Sucesso!").center();
console.log(db);
}
//função excluir
let eliminarTeste = () => {
let db = localStorage.info == null ? [] : JSON.parse(localStorage.info)
let resultadoIndex = db.findIndex(e => e.matricula == doc);
//verifica se encontrou o objeto
if (resultadoIndex != -1) {
db.splice(resultadoIndex, 1);
localStorage.info = JSON.stringify(db);
} else {
alert("Não encontrado!");
}
}

$(document).ready(function () {
var myWindow = $("#window"),
undo = $("#abrirModal");
undo.click(function () {
myWindow.data("kendoWindow").open();
undo.fadeOut();
});
function onClose() {
undo.fadeIn();
}
myWindow.kendoWindow({
width: "600px",
title: "Cadastro de Alunos",
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
close: onClose
}).data("kendoWindow").center();
});


//modal kendol
$(function () {
var myWindow = $("#windowEditar"),
undo = $("");
undo.click(function () {
myWindow.data("kendoWindow").open();
undo.fadeOut();
});
function onClose() {
undo.fadeIn();
}
myWindow.kendoWindow({
width: "600px",
title: "Editar Alunos",
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
close: onClose
}).data("kendoWindow").center();

//criando grid
$('#grid').kendoGrid({
dataSource: {
type: "odata",
data: json,
schema: {
model: modeloGrid,
data: function (data) {
return data;
},
total: function (data) {
return data.length;
}
}
},
excel: {
allPages: true,
fileName: 'arquivo_' + $.now() + ".xlsx"
},
height: 500,
resizable: false,
scrollable: true,
sortable: true,
filterable: true,
groupable: true,
selectable: "row",
filterable: true,
navigatable: true,
reorderable: true,
editable: { mode: "inline", confirmation: false },
columns: colunasGrid
});
});



</script>

</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 20 Mar 2019, 12:02 PM
Hi Almir,

In order to have editing in the Grid the widget should be configured for editing. Also the dataSource definition should have the respective update, create and delete actions defined. Thus when a modification is made and the users submit the changes the relevant server action will be called. 

Please check out the resources below that describe in more detail on how to configure editing in the Grid:





Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Almir
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or