ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: omerix on December 15, 2013, 01:47:19 am

Title: Special select,input form in cell
Post by: omerix on December 15, 2013, 01:47:19 am

Hello Param,

I have solved most of the issues and pq Works well. If you can help me to solve last 3 things I will be appreciated.

Open a  box "select" in a cell :
* I could not succeed to open a select box in a cell. Whe I enter to 3rd column to edit, can pq return a code as below?
<select><option value='1ABC'>Option-1</option><option value='415'>Option-2</option><option value='5454'>Option-3</option></select>

Open a  "multiselect widget" in a cell:
http://www.erichynds.com/blog/jquery-ui-multiselect-widget


Use a "special input format"
http://www.tecstil.com/pqgrid/pqgrid.asp
* I want to use this special input format when ı come over 2nd column. I took the code as it is. I wrote

Title: Re: Special select,input form in cell
Post by: paramvir on December 16, 2013, 12:03:16 am

Omer

1) Syntax for select list editor is

Code: [Select]

editor: {
type: 'select',
        options: [ { '1ABC' : 'Option-1' }, { '415': 'Option-2' }, { '5454': 'Federal Shipping' } ]
}

2) Multi Select

Code: [Select]

var multiSelectEditor = function(ui) {
    var $cell = ui.$cell,
        dataIndx = ui.dataIndx,
        cls = ui.cls,
        dc = ui.rowData[dataIndx];
    $cell.append('<select id="example" name="'+dataIndx+'" multiple="multiple" class="'+cls+'">'+
        '<option value="1">Option 1</option>'+
        '<option value="2">Option 2</option>'+
        '<option value="3">Option 3</option>'+
        '<option value="4">Option 4</option>'+
        '<option value="5">Option 5</option>'+
        '</select>');   
   $("#example").multiselect();
}

3)  The code is below. You may need to make minor ajustments to it as I haven't tested it. getEditCellData is not required. 

Code: [Select]

var inputEditor = function(ui) {
    var $cell = ui.$cell,
        dataIndx = ui.dataIndx,
        cls = ui.cls,
        dc = ui.rowData[dataIndx];
    $cell.append("<div id='ie' class='ekar'>"+
            "<input type='text' name='"+dataIndx+"' value='" + dc + "' class='" + cls + " pq-edit-input ui-state-default input-full' />"+
            "<span class='ek ui-widget-header' style='margin-left:-20px;'>"+
                "<i class='ui-icon ui-icon-search ck'></i></span>"+
            "<span class='ek ui-widget-header'><i class='ui-icon ui-icon-plus ck'></i></span>"+
        "</div>");
    //$cell.append("<input type='text' value='" + dc + "' class='pq-edit-input'/>");
    $cell.find(".ui-icon-search").click(function() {
        var theURL = "popup.asp?id=pq-edit-input&process=list";
        Popup(theURL, "myWin", 600, 200, 100, 200);
    });
    $cell.find(".ui-icon-plus").click(function() {
        var theURL = "popup.asp?id=pq-edit-input&process=add";
        Popup(theURL, "myWin", 600, 200, 100, 200);
    });
}


Title: Re: Special select,input form in cell
Post by: omerix on January 07, 2014, 03:09:18 am

Thank you perfectly.

Only problem "MultiSelect" does not selected "<option>"

"select multiple"

Title: Re: Special select,input form in cell
Post by: paramvir on January 07, 2014, 04:02:06 pm

Sounds good.

I've added class and name = dataIndx to multi select. It should work fine now.

Moreover you might also need to implement getData of the editor http://paramquery.com/pro/api#option-column-editor
to custom save data for multi select dropdown.