CODEWITHSUNDEEP
jqueryjquery-uiautocomplete
Marcelo Mason
Marcelo Mason

Reputation: 7040

jQuery Grid with autocomplete

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?

Upvotes: 3

Views: 8671

Answers (2)

jitter
jitter

Reputation: 54605

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();
        }
    }
    ...

Upvotes: 4

Sergey
Sergey

Reputation: 3213

I have not implemented autocomplete, but I have worked with jqGrid and it has an awesome support for javascript events.

For example: If you put an id in one of the cells and want to auto populate info in other cells u can use afterEditCell where u specify a custom function which will receive rowid, cellname, value, iRow, iCol and check if the iRow is the same row as your id, take that value and populate other cells based on that value. - basically auto complete

Or can use beforeEditCell event and create your own function which will receive rowid, cellname, value, iRow, iCol and return result will be placed in the cell.

check out events section http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing

good luck!

Upvotes: 0

Related Questions