ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: SureshB on June 16, 2015, 07:52:12 am

Title: Select2 plugin with pqgrid inline editing.
Post by: SureshB on June 16, 2015, 07:52:12 am

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.

Title: Re: Select2 plugin with pqgrid inline editing.
Post by: paramvir on June 16, 2015, 12:36:50 pm

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.

Title: Re: Select2 plugin with pqgrid inline editing.
Post by: maabalaji on June 30, 2015, 09:33:18 am

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
                },

Title: Re: Select2 plugin with pqgrid inline editing.
Post by: paramvir on June 30, 2015, 08:59:27 pm

hello maabalaji

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

Title: Re: Select2 plugin with pqgrid inline editing.
Post by: paramvir on July 01, 2015, 10:47:31 am

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.

Title: Re: Select2 plugin with pqgrid inline editing.
Post by: RedBully on July 01, 2015, 07:26:07 pm

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.

Title: Re: Select2 plugin with pqgrid inline editing.
Post by: RedBully on July 01, 2015, 07:49:31 pm

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