jsgrid
jsgrid copied to clipboard
tabalinas
Trying to use edit template to create a blank text box.
I'm trying to use editTemplate to create a blank text box. After I add the editTemplate and then try to edit the row.
Uncaught TypeError: Cannot read properties of undefined (reading 'val') at TextField.editValue (jsgrid.js:1982) at Grid.<anonymous> (jsgrid.js:1338) at TextField.<anonymous> (jsgrid.js:460) at Function.each (jquery.js:385) at Grid._eachField (jsgrid.js:458) at Grid._getEditedItem (jsgrid.js:1336) at Grid._getValidatedEditedItem (jsgrid.js:1286) at Grid.updateItem (jsgrid.js:1277) at jsgrid.js:2480 at HTMLInputElement.<anonymous> (jsgrid.js:2502)
I get this. If I remove the editTemplate then it works but submits the original value. Here is the definition for the field I'm working with
{ name: 'ticket_notes', title: 'Note', type: 'text', width: 120, editTemplate: function(value,item) { return "<input type='text'></input>"; }, insertValue: function() { return this._insertAuto.val(); }, itemTemplate: function(value) { if(value) { title = value.split("<br>").join("
"); return this._insertAuto = $("<div title='"+title+"'>"+value+"</div>"); } else { return ""; } }, },
And here's the entire grid definition. `$(document).ready(function(){ var App = { url: 'process/tickets.php', }
var db = {
loadData: function() {
return $.ajax({
type: "GET",
dataType: 'json',
url: App.url
});
},
insertItem: function(item) {
return $.ajax({
type: "POST",
dataType: 'json',
url: App.url,
data: item
}).done(function(){
App.ticket_id = item.id;
$('#ticket_grid').jsGrid('loadData');
});
},
updateItem: function(item) {
return $.ajax({
type: "PUT",
dataType: 'json',
url: App.url,
data: item
});
},
deleteItem: function(item) {
return $.ajax({
type: 'DELETE',
dataType: 'json',
url: App.url,
data: item
});
}
};
var ticket_grid = $('#ticket_grid').jsGrid({
width: '1386px',
height: 'auto',
autoload: true,
inserting: true,
editing: true,
sorting: true,
paging: true,
filtering: true,
pageSize: 10,
pageButtonCount: 5,
pageIndex: 1,
deleteConfirm: "Are you sure you know what you're doing?",
controller: db,
fields: [
{ name: 'ticket_id', type: 'number', css: 'hide', width: 0},
{ name: 'customer_id', type: 'number', css: 'hide',width: 0},
{
name: 'dba',
title: 'DBA',
type:'text',
editing: false,
width: 80,
itemTemplate: function(value) {
return this._insertAuto = $("<div title='"+value+"'>"+value+"</div>");
},
insertTemplate: function(value) {
return this._insertAuto = $("<input>").autocomplete({
source: function(req,res) {
$.ajax({
url: "./process/get_cust.php",
dataType: 'json',
data: {
term: req.term
},
success: function(data) {
var result = [];
data.forEach(function(d){
item = {
label: d.dba+' - '+d.legal_name+' - '+d.igb_license,
value: d.customer_id
};
result.push(item);
});
res(result);
}
})
},
minLength: 2,
select: function(event,ui) {
event.preventDefault();
$(this).val(ui.item.label);
e = $(this).parent().parent().children().eq(1).children(':first-child');
e.val(ui.item.value);
/*$(this).prevAll('input').val(ui.item.value);*/
/*el = $(this).parent().parent().children().eq(1).children(':first-child'); */
}
});
},
insertValue: function() {
return this._insertAuto.val();
}
},
{
name: 'legal_name',
title: 'Legal',
type: 'text',
width: 80,
inserting: false,
editing: false,
itemTemplate: function(value) {
return this._insertAuto = $("<div title='"+value+"'>"+value+"</div>");
}
},
{
name: 'igb_license',
title: 'IGB',
type: 'text',
width: 41,
inserting: false,
editing: false,
itemTemplate: function(value) {
return this._insertAuto = $("<div title='"+value+"'>"+value+"</div>");
},
},
{ name: 'site_code',title: 'Site Code', type: 'text',width:35,inserting: false, editing: false},
{ name: 'vgt_no',title: 'VGT#',type:'number',width:20,editing: false },
{ name: 'tech_id', type: 'number', css: 'hide', width: 0 },
{
name: 'name_tech',
title: 'Tech',
type: 'text',
width:50,
editing: false,
insertTemplate: function(value) {
return this._insertAuto = $("<input>").autocomplete({
source: function(req,res) {
$.ajax({
url: "./process/accounts.php",
dataType: 'json',
data: {
term: req.term,
},
success: function(data) {
var result = [];
data.forEach(function(d){
item = {
label: d.first_name+' '+d.last_name,
value: d.account_id
};
result.push(item);
});
res(result);
}
})
},
minLength: 2,
select: function(event,ui) {
event.preventDefault();
$(this).val(ui.item.label);
e = $(this).parent().parent().children().eq(7).children(':first-child');
e.val(ui.item.value);
/*el = $(this).parent().parent().children().eq(1).children(':first-child'); */
}
});
},
insertValue: function(){
return this._insertAuto.val();
}
},
{
name: 'ticket_notes',
title: 'Note',
type: 'text',
width: 120,
editTemplate: function(value,item) {
return "<input type='text'></input>";
},
insertValue: function() {
return this._insertAuto.val();
},
itemTemplate: function(value) {
if(value) {
title = value.split("<br>").join("
");
return this._insertAuto = $("<div title='"+title+"'>"+value+"</div>");
} else {
return "";
}
},
},
{
name: 'open',
title: 'Open',
type: 'select',
width: 25,
itemTemplate: function (value,item) {
if(value == true) {
return $("<span>").attr("class", "fas fa-check").css({"color":"#9CCC65"});
} else {
return $("<span>").attr("class", "fas fa-times").css({"color":"red"});
}
},
items: [
{ Name: "", Id: 0 },
{ Name: "Open", Id: 1 },
{ Name: "Closed", Id: 0 }
],
valueField: "Id",
textField: "Name"
},
{ name: 'control',type: 'control' }
],
});
});`
Figured it out.
editTemplate: function(value, item) { $el = jsGrid.fields.text.prototype.editTemplate.call(this,value); $el.val(''); return $el; },