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("&#010;"); 
                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' }
    ],

});

});`

tabalinas / jsgrid

Trying to use edit template to create a blank text box. #1404