Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
taquitosensei opened this issue Oct 13, 2021 · 1 comment
Open

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

taquitosensei opened this issue Oct 13, 2021 · 1 comment

Comments

@taquitosensei
Copy link

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

}); 

});`

@taquitosensei
Copy link
Author

Figured it out.
editTemplate: function(value, item) { $el = jsGrid.fields.text.prototype.editTemplate.call(this,value); $el.val(''); return $el; },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant