ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: jplevene on February 23, 2024, 08:33:12 pm

Title: Spreadsheet column header cells with <select>
Post by: jplevene on February 23, 2024, 08:33:12 pm

I have loaded a spreadsheet using the code below.  Ideally below each column name (being a letter), I want to add a <select> dropdown.  The idea being that the user can select a column field name for each column.

This can either be in the existing header cell or a new one below it.  I can't seem to find a column header render which would work as I could set this in the "columnTemplate"

      var grid = $( "<div>", {
         "id" : (function(){ return "pqgrid"+$(".pq-grid").length; })
      })
      .appendTo( dlg )
      .pqGrid({
         autoAddRow: true,
            autoAddCol: true,
         autoRow: true, // Calc height of every row
         dataModel: {data: []},
         colModel : [],
         numberCell: {width: 40}, // The left number cell index column off
         animModel: {on: true, duration: 190}, // Turn on animation
         stripeRows: false,
         menuIcon: false,
         //scrollModel:{autoFit:true}, // show scroll
         flex: {all:false}, // Width of headers auto fit
         fillHandle: "all", // The small square in bottom right of selection for bulk fill
         width: "100%",
         height: 400,
         // DISPLAY
         skipSSFn : true, // Turn off spread sheet functions (speed increase)
         hoverMode: "cell", // on hover change color effect
         dragColumns: {enabled:false},
            showTitle: false,
            showToolbar: false,
         showTop: false, // Hide top  (including col move icons)
         wrap: false, // Cell content on one line
         hwrap: false, // header content on one line
         collapsible: { on: false },
         sortModel: {on: false},
         sortable: false,
         filterModel: { on: false },
         editor: {
                style: { width: 'auto' },
            select: true
            },
         columnTemplate: {
                filter: {
                    crules: [{ condition: 'range' }]
                },
                title: function (ui) {
                    return pq.toLetter(ui.colIndx);
                }
            },
          editModel: {
                addDisableCls: true,
                //onSave: "downFocus"
            }
      });

Title: Re: Spreadsheet column header cells with <select>
Post by: paramvir on February 23, 2024, 10:02:14 pm

column header cells have title callback instead of render callback.

https://paramquery.com/pro/api#option-column-title

Either that can be used or you can use the first row below column header to render select lists in column.render callback.

Title: Re: Spreadsheet column header cells with <select>
Post by: jplevene on February 23, 2024, 10:23:50 pm

The above does not work when loading a spreadsheet.  I used:

Code: [Select]

.pqGrid("importWb", { sheet:0, workbook:{sheets:[{}]}, extraRows: 20, extraCols: 10 })
I tried setting:

Code: [Select]

columnTemplate: {
title: function (ui) {
console.log(ui);
return "TEST - " + pq.toLetter(ui.colIndx);
}
},
pqGrid does not call the "title" function if an Excel spreadsheet is loaded for the columns in the spreadsheet, it is only triggers title when new columns are added after the spreadsheet has loaded, but never in the spreadsheet columns.

Also putting a <select> in the title when using "title", clicking it makes the drop down appear then instantly vanish on mouse up.

A "postRenderHead" would be the best option, which can also stop click propagation (what causes the select list to vanish)

Title: Re: Spreadsheet column header cells with <select>
Post by: jplevene on February 26, 2024, 06:24:44 pm

As an update and lack of response, for others who are wondering, the solution was after I imported the spreadsheet:

Code: [Select]

colModel = import_grid.pqGrid("getColModel");

$.each(colModel, function(i,v){
// Add an extra heading row
v.colModel = [{title:import_grid_column_title}];
});
import_grid.pqGrid("refreshCM");
import_grid.pqGrid("refreshHeader");


function setup_import_header_click_events()
{
// Unbind any old clicks
import_grid.find("div.pq-grid-header-table select.field_select").unbind("click");
// Stop propagation with clicks on the select
import_grid.find("div.pq-grid-header-table select.field_select").click(function(e){
e.stopPropagation();
return false;
});
}
and seeting the option:

   

Code: [Select]

refreshHeader: function(){ setup_import_header_click_events(); }
There is a bug I found.  When setting

Code: [Select]

columnTemplate and colModel: [{title:column_title_function}] with autoAddCol:true, when adding a new column, the new column header did not have the correct title and missed the column_title_function.

As a suggestion, it would be nice to also be able return a jQuery object in title, not just HTML which seems a bit antiquated.