2

I'd like to get a jqGrid that, for one certain column, instead of turning the cell into a text box, pops up a form that needs to be filled out. When the form is closed, the data that was input is saved to the cell. The user never has the ability to interact directly with the cell, so as not to corrupt the data.

See the picture, I have the user table that I want to interact with. There also happens to be a book table sitting somewhere. When the user clicks on fav_books column, a popup appears, populated by book table. User select some books, clicks ok, and the id's of those books are saved to the cell.

jqGrid Popup functionality

For now, I'm just concerned with getting a popup to display. custom_element and custom_value don't help because they turn the cell into the DOM element being returned. I tried using afterEditCell like this (just for proof of concept) but couldn't save the cell:

grid.jqGrid({
...
afterEditCell: function(rowid, name,val,iRow,iCol){
    if(name=='fav_books'){
        alert("see my table?");
        //which one saves (edits?) the cell?
        //grid.jqGrid('setRowData',rowid,{fav_books: 'hi'});
        //grid.jqGrid('setCell',rowid, 'fav_books','hi',null,null,false);
        //grid.jqGrid('saveCell',iRow,iCol);
    }
},
...
});

Can I finish the editing cell process inside of afterEditCell, or will I need to have custom functions for every event after afterEditCell? Is there some way to do this already built into jqGrid (and I'm just making life hard for myself?)

Andrea
  • 1,057
  • 1
  • 20
  • 49

1 Answers1

1

Before answering on your direct question I would you suggest to take a look at the old demo from the question. This one and one more answer are also about the same subject.

So my suggestion for you is to consider to use multiple: true option of the editoptions in connection with edittype:'select' and formatter:'select'. In the way you will be able to implement your requirement very easy and in the way which are very close to what you need.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • that would work except that, in simplifying the problem, I didn't convey the fact that the table that appears in the pop up is a more full table. users would need to see multiple columns to make their decision. – Andrea Aug 11 '11 at 21:30
  • 1
    @Andrea: What you wrote in your question remind me the jQuery UI datepicker. What you need to connect the datepicker is just to use in the [dataInit](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editoptions) your specific actions: dialog and so on. In the list of the actions you can make readonly the original `` box so the user can make the changes only with respect of your dialog. – Oleg Aug 11 '11 at 21:36
  • but dataInit happens before the box becomes editable. Wouldn't the box just become an input box after my dialog closes? – Andrea Aug 12 '11 at 11:54
  • @Andrea: You are welcome! And sorry, I didn't seen your last comment today. Inside of `dataInit` the input element exist, but it is still disconnected (no `jQuery.append` etc is done). So one use frequently `setTimeout` and inside of `setTimeout` initialize the controls like `autocomplete` or `datepicker`. In any way it's good, that your problem is already solved. – Oleg Aug 12 '11 at 20:41