Jqgrid inline mode with select2

Question

I have found the @Olegs answer for FORM based select2 integration to jQgid, but I need help to get it to work in inline mode,, this jsfiddle is my attempt to get my problem online somehow I'm new with fiddle so please be patient :)

http://jsfiddle.net/mkdizajn/Qaa7L/58/

function(){ ... } // empty fn, take a look on jsfiddle

On this fiddle I can't make it to work to simulate the issue I have in my local network but the problem with this select2 component is that when I update some record(via local or ajax), the grid does not pick up my change and it sends null for values where select2 fields are!

I'm sorry that I can't make jsfiddle to work like on my PC :(

Thanks for any help you can think off that may be the issue here..

P.S. one veeeery strange thing is that when I console.log( select2-fields ), before, and after the value is picked up correctly but I suspect that the grid loose that value somewhere in between .. and send null values to server..

[The old my answer](http://stackoverflow.com/a/19427444/315935) uses `editoptions.dataInit` with `initSelect2` function. I think that `initSelect2` should work for inline editing. Do you tested it? You should include your attempts in the text of the question and formulate the problem which you can't solve yourself. — Oleg, Apr 08 '14 at 11:04
@Oleg, I updated the original question, please take a look when you can, thanks.. — Kresimir Pendic, Apr 10 '14 at 07:54
@Oleg, I'm very sorry that I was not able to present my problem well with our select2 control on top of grid. We use custom ajax service for select2 source, so we have integrated our component and many custom functions on top of grid so it is very hard to describe whole process here.. maybe my own answer can help — Kresimir Pendic, Aug 14 '14 at 11:44

Kresimir Pendic · Accepted Answer · 2014-05-06T08:58:36.543

I'm posting this in a good will that I think will help anyone if come to close incounter with similar problem like me..

I'll try to bullet this problem out step by step..

first, on my server side I generate one html tag somewhere near grid table that holds info what columns, fields are lookup type.. like this:
```
<div id="hold_lookup_<?=$unique_id?>" style="display: none"><?php echo $lokki; ?></div>
```

that gives me output like this:

    <div id="hold_lookup_table1" style="display: none">col1+++col2+++col3</div>

define onselectrow event somewhere

$onSelectRow = "function(){
        f = $(this).attr('id'); // grid name
        try{
            n = $('#hold_lookup_' + f).text().split('+++');
        }catch(e){
            console.log(e)
        }
        rez = ''; // results
        temp = 'textarea[name='; // template
        $.each(n, function(index, item){ 
            rez += temp + item + '],'  
        });

        rez = rez.slice(0,-1); // rezemo zadnji zarez

        $( rez ).select2({ .. define my ajax, my init etc.. });
    }";

$dg->add_event("jqGridInlineEditRow", $onSelectRow);

last but very tricky part is here.. I destroy select2 columns before sending to database in jqgrid.src file where function for SAVE inline method is.. like this

        if (o.save) {
            $($t).jqGrid('navButtonAdd', elem, {
                caption: o.savetext || '',
                title: o.savetitle || 'Save row',
                buttonicon: o.saveicon,
                position: "first",
                id: $t.p.id + "_ilsave",
                onClickButton: function() {
                    var sr = $t.p.savedRow[0].id;
                    rez = rez.split(',');
                    rez1 = '';
                    $.each(rez, function(index, item) {
                        rez1 += item + ','
                    })
                    rez1 = rez1.slice(0, -1);
                    rez1 = rez1.split(',');
                    $.each(rez1, function(index, item) {
                        $(item).select2('destroy');
                    });

you can see that I inserted the code onclickbutton event via same 'rez' variable that was defined in my php file where I created grid..

That's it, I hope that helped someone, event if not in this particular problem, but with methods that was used here :)

cheers, kreso

Jqgrid inline mode with select2

1 Answers1