How to display Dropdown with option to Add item in JQgrid

Question

I have a JQGrid and I am displaying a Drop down in a column when the row is opened for inline editing. This dropdown shows already available list items from database. When I save the grid from the clientArray, the updated data is saved in the database.

Now, I need an option to add a new item in this drop down and add that item in the database so that when next time user looks into the dropdown the new item would be available.

Could anybody please help in finding out if there is anyoption to make the Dropdown with Input Textbox so that a new Item can be added in the dropdown list at runtime.

Below is the sample code I am using to show the dropdown.

mygrid = jQuery("#list").jqGrid({
    url:url,
datatype: "json",
height: 'auto',
width: winW,        
colNames:['id','cusipNo','Account No.','Account Type','Location Memo','Account Coding'],
colModel:[
    {name:'Id',index:'stockRecordId',hidden:true,key: true,search: false},
    {name:'cusipNo',index:'cusipNo',hidden:true},   
    {name:'accountNo',index:'accountNo',sortable:true,search: false, align: 'left',editable: true, width: 90, editrules:{custom: true, custom_func: validateAccountNo }},
    {name:'accountType',index:'accountType',sortable:true,search: false, align: 'center',editable: true, width: 100},
    {name:'locationMemo',index:'locationMemo',sortable:true,search: false, align: 'center',editable: true, width: 110},
    {name:'accountCoding',index:'accountCoding',sortable:true,search: false,  align: 'left',editable: true, width: 370, edittype: 'select',
        editoptions: { dataUrl: accCodingUrl , 
                buildSelect: function (data) {
                    var sel = '<select>';
                    $.each(JSON.parse(data),function(i,accountCoding){
                    sel += '<option value="'+accountCoding.key+'">'+accountCoding.value+'</option>';
                        });
                    return sel + "</select>";
                }
            }
}],
cmTemplate: {editable: true},
multiselect: false,     
paging: true,
loadonce:true,
sortname: 'Id',
rowList: [],
rowNum:-1,
pager: $("#page"),      
viewrecords: false,
pgbuttons: false,
pgtext: null,

Devnsyde · Answer 1 · 2016-10-05T19:35:52.360

0

If you want users to be able to enter data into the select then what you want is a combobox or an input with a datalist:

https://jsfiddle.net/kzm7jq74/

Your select generation code would be rewritten to something like:

var sel = '<input type="text" list="accntCodes"/><datalist id="accntCodes">';
            $.each(JSON.parse(data),function(i,accountCoding){
            sel += '<option data-value="'+accountCoding.value+'" value="'+accountCoding.key+'">';
                });
            return sel + '</datalist>';

If this doesn't work for you then I'd suggest a google search for a jquery combobox plugin, or see if jquery autocomplete can work for you:

https://jqueryui.com/autocomplete/

UPDATE

See this fiddle on how to add the datalist to the grid: https://jsfiddle.net/y3llowjack3t/a385ayau/1/

edited Oct 05 '16 at 19:35

answered Sep 30 '16 at 22:56

Devnsyde

1,297
1
13
34

Thanks Blindsyde for response, I tried with your solution. I am very new to JQGrid, but as far as I understand, since I have declared _EditType: select_, JqGrid by default creates a select box and does not allow to create a datalist. – Rahul Oct 05 '16 at 19:13
@Rahul I built on to a fiddle I worked with previously to show how to add the datalist. Please see fiddle under the updated section. – Devnsyde Oct 05 '16 at 19:35

How to display Dropdown with option to Add item in JQgrid

1 Answers1