Question

I am building a webapp using jQuery and jQuery UI. I am at an impass. What I need is a jQuery grid that has editable fields and somehow incorporate an autocomplete field on one of these editable cells and i cant seem to find any grid offerings that implement this.

I’ve been looking at StickGrid and jgGrid

I especially like jqGrid since it is Themeroller ready. Does any one know if anyone has sucessfully been able to integrate an autocomplete on one of these grids, or any other jquery grid for that matter?

Answer 1

I think what you want should be achievable pretty easy. I made you a quick copy-paste/steal-together demopage.

If you click the Date column you get a calendar selector.

If you click the Client column and delete the content you will see an autocompleter (css doesn’t fit quickpastewhatever) which lists american cities (i know cities aren’t client names just a demo).

Code taken from jqGrid Cell Editing demo page + jQuery Autocomplete demo page

http://jsbin.com/owatu (append /edit to the url to see the code)

Of course the demo is a bit rough around the edges

• css problems
• quick hack in afterSaveCell inserted to get jQgrid to insert the selected value from the autocompleter if user uses arrowkeys+enter key with mouse it works without hack

I guess the afterSaveCell hack could be removed when cleanly integrating autocomplete and jqGrid with each other.

Basically it boils down to

jQuery("#celltbl").jqGrid({
    ...
    {name:'name', width:100, editable:true}, //e.g.
    ...
    afterEditCell: function (id,name,val,iRow,iCol) {
        if(name=='name') {
            //cities here is local json object
            jQuery("#"+iRow+"_name","#celltbl").autocomplete(cities);
        }
    },
    afterSaveCell : function(rowid,name,val,iRow,iCol) {
        if(name == 'name') {
            jQuery("#celltbl").jqGrid('setRowData',rowid,{name:jQuery(".ac_over").text()});
            jQuery(".ac_results").remove();
        }
    }
    ...