I am trying to update a row in a datatable using editable cells. It works to update on the interface but the data does not go into the api and after I reload the page the modification dissapear.
function buildlist() {
var url = 'http://127.0.0.1:8000/api/sarcini-list/';
fetch(url).then(
res => {
res.json().then(
data => {
console.log(data);
var table
const createdCell = function(cell) {
let original;
cell.setAttribute('contenteditable', true)
cell.setAttribute('spellcheck', false)
cell.addEventListener("focus", function(e) {
original = e.target.textContent
})
cell.addEventListener("blur", function(e) {
if (original !== e.target.textContent) {
const row = table.row(e.target.parentElement);
$.ajax({
type: "PUT",
url: 'http://127.0.0.1:8000/api/sarcini-detail/' + row.data().idSarcina,
data: row.data()
})
console.log('Row changed: ', row.data())
}
})
}
table = $('#datatable').DataTable({
columnDefs: [{
targets: '_all',
createdCell: createdCell
}],
scrollX: true,
data: data,
columns: [
{ data: 'idSarcina' },
{ data: 'nr_tren' },
{ data: 'nr_locomotiva' },
{ data: 'plecare' },
{ data: 'ora_plecare1' },
{ data: 'ora_sosire1' },
{ data: 'angajat1' },
{ data: 'angajat2' },
{ data: 'schimb1' },
{ data: 'ora_plecare2' },
{ data: 'ora_sosire2' },
{ data: 'angajat3' },
{ data: 'angajat4' },
{ data: 'schimb2' },
{ data: 'ora_plecare3' },
{ data: 'ora_sosire3' },
{ data: 'angajat5' },
{ data: 'angajat6' },
{ data: 'sosire' },
{ data: 'ora_plecare4' },
{ data: 'ora_sosire4' },
{ data: 'angajat7' },
{ data: 'angajat8' }
],
});
}
)
}
)
}
$(document).ready(function() {
buildlist();
});
I modified the field "NUMAR TREN" and as you can see in the console in the api the change does not take place but in the interface it looks ok.
This is how it looks in console and interface
Related
I'm using SYMFONY + API PLATFORM + REACT JS.
I'm getting data from api inside my React Component :
useEffect(() => {
document.title = "IIG | Écran d'accueil";
asyncSecureGetHelper(resource, AUTH_TOKEN)
.then((response) => {
setLoading(false);
setProjects(response.data["hydra:member"]);
})
.catch((error) => {
setLoading(false);
});
}, []);
I created a datatables with projects :
var projectsDt = null;
function projectsDatatable() {
if (projectsDt !== null) {
projectsDt.destroy();
}
projectsDt = $("#projects_dt_table").DataTable({
destroy: true,
searching: false,
data: projects,
columns: [
{ data: "reference" },
{ data: "createdAt" },
{ data: "updatedAt" },
{ data: "user" },
{ data: "type" },
{ data: "status" },
// I NEED TO ADD SHOW AND EDIT LINKS HERE
],
});
}
if ($("#projects_dt_table").length) {
projectsDatatable();
}
I want to add show and edit links to datatables .
columns: [
{ data: "reference" },
{ data: "createdAt" },
{ data: "updatedAt" },
{ data: "user" },
{ data: "type" },
{ data: "status" },
{
edit // i want to add this
},
{
show / i want to add this
},
],
i will be grateful if someone could help me .
Thank you
Try like this:
columns: [
{ data: "reference" },
{ data: "createdAt" },
{ data: "updatedAt" },
{ data: "user" },
{ data: "type" },
{ data: "status" },
{ data: null, render: function() {
return ( edit );}
},
{ data: null, render: function() {
return ( show );}
},
],
It works for me :
columnDefs: [
{
targets: 0,
data: "reference",
render: function (data, type, row, meta) {
return 'Download';
},
},
{
targets: 1,
data: "createdAt",
render: function (data, type, row, meta) {
return 'Download';
},
},
{
targets: 2,
data: "updatedAt",
render: function (data, type, row, meta) {
return 'Download';
},
},
{
targets: 3,
data: "user",
render: function (data, type, row, meta) {
return 'Download';
},
},
{
targets: 4,
data: "type",
render: function (data, type, row, meta) {
return 'Download';
},
},
{
targets: 5,
data: "status",
render: function (data, type, row, meta) {
return 'Download';
},
},
{
targets: 6,
data: "id",
render: function (data, type, row, meta) {
return 'Download';
},
},
{
targets: 7,
data: "id",
render: function (data, type, row, meta) {
return 'Download';
},
},
],
I'm using the below code to generate the table, but I need to show code as link where I should able to run custom code to navigate to another record
$('#customerdt').DataTable({
"bInfo": false,
data: accountData,
columns: [
{ data: 'code' },
{ data: 'customerid' },
{ data: 'name' },
{ data: 'telephone' },
{ data: 'emailaddress' },
{ data: 'joiningdate' }
],
"bDestroy": true
});
Use the columns.render option
const table = $('#customerdt').DataTable({
"bInfo": false,
data: accountData,
columns: [
{
data: 'code',
render: (data, type, row) => `${data}`
}
{ data: 'customerid' },
{ data: 'name' },
{ data: 'telephone' },
{ data: 'emailaddress' },
{ data: 'joiningdate' }
],
"bDestroy": true
});
table.on('click', '.my-class', function() {
const emailAddress = this.getAttribute('data-email');
}
its over a week im dealing with a strange behavior of kendo grid ,let me split my problem, for better understanding ,i have a autocomplete text box ,after I press ENTER,it binds my grid,when I press "add new record" on my kendo grid,if I press cancel,the pop up will be closed,BUTTT after second search and the add new record,if press cancel,this time needs 2times pressing,3d time needs 3times pressing.......made me crazy,badly need your help
Here is the code
$(document).keypress(function (e) {
var myResult;
var modelProducerResult;
var temp = null;
var mydata;
var mydata_deviceType;
var modelProducerDrpList;
if (e.which == 13) {
var i = 0;
debugger;
var flag = 0;
// $('#turbingrid').data().kendoGrid.refresh();
var drp = document.getElementById('autocomplete').value;
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("turbineDeviceDetail","AdminTool")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "turbine": drp, }),
success: function (result) {
//debugger;
myResult = result;
var flg = "s";
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("producersDevice","AdminTool")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "flg": flg, }),
success: function (data) {
// debugger;
mydata = data;
}
})
var flg_dvType = "s";
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("deviceTypeList","AdminTool")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "flg": flg_dvType, }),
success: function (data) {
// debugger;
mydata_deviceType = data;
}
});
dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
options.success(result); // where data is the local data array
},
create: function (options) {
if ($("input[name='DeviceIP']").val() == "" || $("input[name='TurbineId']").val() == "") {
alert("DeviceIP and TurbineID could not be blank ");
$("input[name='DeviceIP']").css("background-color", "red");
$("input[name='TurbineId']").css("background-color", "red");
}
else
$.ajax({
type: "POST",
url: "#Url.Action("AddDeviceToTurbine","AdminTool")",
data: options.data.models[0],
dataType: "json",
success: function (data) {
options.success(data);
alert("New Device Has Been Inserted");
//var e = $.Event("keypress", { which: 13 });
//$('#autocomplete').trigger(e);
},
//error: function (data) {
// options.error(data);
// alert("Insert New Data Has Been Failed");
// alert(data);
//},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
},
update: function (options) {
if ($("input[name='DeviceIP']").val() == "" || $("input[name='TurbineId']").val() == "") {
alert("DeviceIP and TurbineID could not be blank ");
$("input[name='DeviceIP']").css("background-color", "red");
$("input[name='TurbineId']").css("background-color", "red");
}
else
$.ajax({
type: "POST",
url: "#Url.Action( "update_grid","AdminTool")",
data: options.data.models[0],
dataType: "json",
success: function (data) {
options.success(data);
alert("Update Has Been Done!");
var value = document.getElementById('autocomplete').value;
var e = $.Event("keypress", { which: 13 });
$('#autocomplete').trigger(e);
},
error: function (data) {
options.error(data);
alert("Update Failed!");
},
});
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 40,
schema: {
//data: employee,
model: {
id: "DeviceIP",
fields: {
DeviceIP: { editable: true, nullable: false },
//Producer: { type:"string" },
//3 Model: { type: "string" },
DeviceType: { type: "string" },
Description: { type: "string" },
Username: { type: "string" },
Password: { type: "string" },
PublicIP: { type: "string" },
ModelProducer: { type: "string" },
Model: { type: "string" },
Producer: { type: "string" },
TurbineId: { type: "string" }
//UnitPrice: { type: "number", validation: { required: true, min: 1} },
//Discontinued: { type: "boolean" },
//UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#turbingrid").kendoGrid({
// debugger;
dataSource: dataSource,
scrollable: false,
//toolbar: ["create"],
toolbar: [
{
name: "create",
text: "ADD NEW DEVICE"
}
],
columns: [
{ field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
{ field: 'Producer', title: 'Producer', width: '80px', id: 'Producer' },//editor: ProductNameDropDownEditor,
{ field: 'Model', title: 'Model', width: '220px', id: 'Model' },
// { field: 'DeviceType', title: 'DeviceType', width: '100px', id: 'DeviceType', editor: deviceTypesList },
{ field: 'Description', title: 'Description', width: '220px' },
{ field: 'Username', title: 'Username', width: '120px' },
{ field: 'Password', title: 'Password', width: '100px' },
{ field: 'PublicIP', title: 'PublicIP', width: '120px', id: 'PublicIP' },
{ field: 'TurbineId', title: 'TurbineId', width: '120px', id: 'TurbineId', hidden: true },
{ field: 'device_id', title: 'device_id', width: '120px', id: 'deviceid', hidden: true },
// { field: 'ModelProducer', title: 'Producer/Model', id: 'ModelProducer', hidden: true, editor: modelPro },
{
command: ["edit"], title: " "
}
],
editable: "popup",
});
}
})
}
});
//This Part Is For The AUTOCOMPLETE textbox
$(document).ready(function () {
var value = document.getElementById('autocomplete').value;
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("List_Turbine","AdminTool")",
contentType: "application/json; charset=utf-8",
//data: JSON.stringify({ "name": value ,}),
data: {},
success: function (result) {
$("#autocomplete").kendoAutoComplete({
dataSource: result,
dataTextField: "Text",
// filter: "contains"
});
}
})
});
I have a TreeView and I want to disable some nodes when they contain in their data a state_current != null like the "disable node" button in the demo.
my code is :
<script>
$(document).ready(function() {
var treeview = $('#Tree_view').kendoTreeView({
template: "#= item.name #",
dataSource: Parcours,
dataTextField: 'name',
loadOnDemand: true,
expand: onExpandedItem
});
});
function onExpandedItem(e) {
var id_user = #Model.id;
var item = $('#Tree_view').data('kendoTreeView').dataItem(e.node)
var type = item.fields.type;
if (item.level() > 0) {
item.id_parcours = item.parentNode().id_parcours;
if (item.level() == 2) {
item.id_promo = item.parentNode().id;
}
}
else item.id_parcours = item.Id;
switch (type) {
case 'parcours':
item.children.transport.options.read = {
url: '#Url.Action("Get_Session", "Users")' + '?user_id=' + id_user,
dataType: "json",
};
break;
case 'session':
item.children.transport.options.read = {
url: '#Url.Action("Get_Matiere")' + '?user_id=' + id_user,
dataType: "json"
};
break;
default:
break;
}
}
var Matiere = {
transport: {
read: {
url: '#Url.Action("Get_Matiere")',
type: 'GET',
dataType: 'json'
}
},
schema: {
model: {
fields: {
name: 'Name',
type: 'matiere'
},
hasChildren: false,
}
}
}
var Session = {
transport: {
read: {
url: '#Url.Action("Get_Session")',
type: 'GET',
dataType: 'json'
}
},
schema: {
model: {
fields: {
id: 'IdPromo',
name: 'NamePromo',
type: 'session',
date: 'Date',
state: 'State_current',
},
hasChildren: true,
children: Matiere
}
}
}
var Parcours = {
transport: {
read: {
url: '#Url.Action("Get_Parcours", "Users")',
data: {user_id: #Model.id},
type: 'GET',
dataType: 'json'
}
},
schema: {
model: {
fields: {
id: 'Id',
name: 'Name',
type: 'parcours'
},
hasChildren: true,
children: Session
}
}
};
</script>
Do this where you want to disable the nodes
var selectedNode = treeview.select();
treeview.enable(selectedNode, false);
Here treeview should be your treeview object, you can select it as below once the treeview is created. And instead of selectedNode you can give the node which you need to disable.
var treeview = $('#Tree_view').data("kendoTreeView");
If you want to do this while the treeview renders first you can check this in kendoTreeView databound event, or in select event if you want it while selecting.
I have followed this tutorial and brought up the sorting to work but now the crud operation is not working.
If i remove the grid sortable code then the crud is working, but no sort.
I have no idea where i am making mistake to make both sort and crud to work
THis is the code i have
$(document).ready(function () {
function dataSource_change(e) {
var data = this.data();
console.log(data.length); // displays "77"
}
var dataSource = new kendo.data.DataSource({
//pageSize: 20,
transport:{
read:{
url: function() {
return "/makes"},
dataType: "json",
cache: false
},
update: {
url: function (make) {
console.log(make)
return "/makes/"+ make.models[0].id
},
type: "PUT",
dataType: "json",
beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token',jQuery('meta[name="csrf-token"]').attr("content")); }
},
destroy: {
url: function (make) {
return "/makes/"+ make.models[0].id
},
type: "DELETE",
dataType: "json"
},
create: {
url: "/makes",
type: "POST",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
console.log(options)
return{"make": options.models[0]};
}
else{
return {"make":options};
}
}
},
batch: true,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
name: { validation: { required: true } },
}
}
}
});
dataSource.bind("change", dataSource_change);
dataSource.fetch();
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
pageable: false,
height: 550,
toolbar: [{name: "create", text: "Add New Make"}],
columns: [
{ field:"name",title:"Makes" },
{ command: ["edit", "destroy"], title: "Action", width: "250px" }],
editable: "inline"
}).data("kendoGrid");
grid.table.kendoSortable({
filter: ">tbody >tr",
hint: $.noop,
cursor: "move",
placeholder: function(element) {
return element.clone().addClass("k-state-hover").css("opacity", 0.65);
},
container: "#grid tbody",
change: function(e) {
console.log(grid)
var skip = grid.dataSource.skip(),
oldIndex = e.oldIndex + skip,
newIndex = e.newIndex + skip,
data = grid.dataSource.data(),
dataItem = grid.dataSource.getByUid(e.item.data("uid"));
var updated_order = []
$('tbody tr').each(function(i){
updated_order.push({ name: $(this).children('td:first').text(), position: i+1 });
});
controller_name = $('#controller_name').val();
$.ajax({
type: "PUT",
url: '/sort',
data: { order: updated_order, controller_name: controller_name }
});
grid.dataSource.remove(dataItem);
grid.dataSource.insert(e.newIndex, dataItem);
}
});
});