pqselect in custom editor

[basarba]

Hello,
I am using the below code taken from one of the other questions in this forum to convert a multi select column in pqgrid to pqselect column.

//add it in the grid options.
cellEditFocus: function(evt, ui){
   if(ui.dataIndx == 'ShipVia'){
      ui.$cell.find("select").pqSelect();
   }
},

That seems to work fine, i can select multiple items, and i see the values selected separated with commas when the cell being edited looses focus. However, when i click on the update button to update the row (using php to send the data to a mysql database) with the new selected items, the cell displays "Array" text (i also see "Array" text in the database for that row). Selected items do not get sent to the database. I believe the selected items are stored in an array, and they somehow need to be converted to comma separated text before sending the updated data to the database. How can i accomplish this? Do i need to create a custom editor?

BTW,
Pqgrid is a wonderful piece of software!

Thanks in advance!

[paramvir]

getData() callback of column.editor can be used to return custom value ( serialize array into a string ) from editor.

http://paramquery.com/api#option-column-editor

[basarba]

Thank you. I got it to work with the code below.

Code: [Select]

getData: function(ui) {
            //var val = ui.$cell.find("select").val();
            var txt = ui.$cell.find("select").find("option:selected");
            var selected = [];
            for(var i=0, l=txt.length; i < l; i++){
            selected.push(txt[i].textContent);
            }
            return selected.join(', ');
          }
                },

Now i see the options text in a comma separated list inside the cell as soon as the cell looses focus. That comma separated list gets uploaded to mysql database. However, when i click on the same cell to edit again, previously selected options are not shown as selected. I believe i need to get the cell data, parse the text values from the comma separated list, then initialize each corresponding select option as checked. How can i achieve this?

- Is there a way to align the buttons in the toolbar to the right? I would like to align one of the buttons to the left, but the other to the right in the same toolbar.

- Also, tabbing between cells in edit mode works for all columns, except the pqselect column. Is there a way to fix that?

Sorry for multiple questions, and thank you for your help!

[basarba]

I was able to resolve the problem i was having with prepolulating the selected items in multi select with the code below. Basically, when the cell is in focus I read the data from the cell (comma separated string), convert it into an array of selected items, then push that array to the multiselect dropdown. Once that's done, multi select drop down is converted to pgSelect and opened.

Code: [Select]

cellEditFocus: function(evt, ui){
if(ui.dataIndx == 'platform'){
if (ui.rowData) {
var rowIndx = ui.rowIndx,
                    colIndx = ui.colIndx,
                    dataIndx = ui.dataIndx,
                    cellData = ui.rowData[dataIndx].replace(/\s/g, '');
                }
        ui.$cell.find("select").val(cellData.split(","));
ui.$cell.find("select").pqSelect({
multiplePlaceholder: 'Select Platforms',
checkbox: true //adds checkbox to options
}).pqSelect("open");
}

Not critical, but I still would like to find out about the questions below.

- Is there a way to align the buttons in the toolbar to the right? I would like to align one of the buttons to the left, but the other to the right in the same toolbar.

- Also, tabbing between cells in edit mode works for all columns, except the pqselect column. Is there a way to fix that?

[paramvir]

Is there a way to align the buttons in the toolbar to the right? I would like to align one of the buttons to the left, but the other to the right in the same toolbar.

There is cls and style property of each item in the toolbar. float: right could be used for items at the right.

- Also, tabbing between cells in edit mode works for all columns, except the pqselect column. Is there a way to fix that?

There are some necessary classes added in custom editors which aid in tabbing. You could check them in custom editors demo: http://paramquery.com/demos/editing_custom

Code: [Select]

// in autoComplete editor, classes are added.
var $inp = $("<input type='text' name='" + dataIndx + "' class='" + cls + " pq-ac-editor' />")