Select2 plugin with pqgrid inline editing.

[SureshB]

Hi sir,

I am using select2 plugin with the dropdowns in inline editing, but the select2 DOM is detached with the parent element and attached to the body of the document. Is there is perfect way to use select2 in inline editing.

[paramvir]

That should not be a problem in itself as long as the select2 dropdown in positioned correctly. Dropdowns are better when appended to the document.

Could you share a screenshot and implementation of your editor describing the issue.

[maabalaji]

Tried image to upload png, jpg  and size below 100kb also no luck - unable to upload gave error tried few times.

var vendorsList = function (ui) {
                var $inp = ui.$cell.find("select"),
                $grid = $(this);
                $inp.change(function ()
                {
                    var vendor = this.value;
                    getVendorInfo(companyid, vendor);
                });
                //initialize the editor
                // $inp.css('z-index', '999999');
                $inp.select2({
                   dropdownAutoWidth: true
                });
            }

var colM = [
{
                dataIndx: "vendorno", title: "Vendor", width: 200,
                editor: {
                    type: "select",
                    prepend: { "": "" },
                    mapIndices: { name: "vendorno", id: "vid" },
                    labelIndx: "vname",
                    valueIndx: "vid",
                    options: function (ui) {
                        var comps = pq.companies,
                            id = ui.rowData.coid;
                        var venders = pq.vendors;

                        if (id) {
                            var found_names = $.grep(pq.vendors, function (v) {
                                return v.coid === id;
                            });
                            return found_names;
                        }
                        return [];
                    },
                    init:vendorsList
                },

[paramvir]

hello maabalaji

The attachment issue has been corrected. Could you please retry to upload the attachment.

[paramvir]

I checked select2 plugin integration with pqGrid and I'm sorry to say that select2 plugin can't be supported with pqGrid inline editing currently.

If there is some feature you would like to be added to pqSelect, please let us know.

[RedBully]

I have managed to implement Select2 for inline editing (see screenshot).  (Using Pro 2.4.1)  So it is possible.  I'll try and find out how I did it.

[RedBully]

Here's a code snippet taken from the part of the code that builds the HTML to be rendered. Hope this helps

Code: [Select]

//Get a handle on the cell in the grid
var $cell = ui.$cell;

//Build the dropdown (NB We must include name=dataIndx for it to work correctly with paramgrid code)
//We must also include the Id so that Select2 can target easily using #id
var $sel = $("<select id='" + dataIndx + "' name='" + dataIndx + "' class='" + ui.cls + " grid_cell'>" + optionsHtml + "</select>");
var $div = $("<div></div>");

//Put the select into a div so that when we display select2, it is positioned in the cell.
$sel.appendTo($div);

//Append the div to the cell
$div.appendTo($cell);

//Activate the select2
$sel.select2(
{
    allowClear: true,
    dropdownAutoWidth: true,
    minimumResultsForSearch: 5
});