Messages

1

Help for ParamQuery Pro / Re: export to pdf from grouped grid with selection checkbox

« on: December 23, 2023, 04:14:54 pm »

thanks a lot!

2

Help for ParamQuery Pro / export to pdf from grouped grid with selection checkbox

« on: December 21, 2023, 08:39:31 pm »

hi
i am happy to discover the pdf export feature.
Now i try to export a grid with group using the checkbox option:
obj.groupModel = {
            checkbox: true,
            checkboxHead: true,           
            on: true,
            dataIndx: ["titel"],                       
            menuItems: ["grandSummary"],           
            summaryInTitleRow: "all",
            titleInFirstCol: true,
            fixCols: false,
            indent: 320,
            collapsed: [false, true],
            title: [
                "{0} ({1})",
                "{0} - {1}"
            ]
when i want to export some of the checked records (option selection:"row" , nothing gets exported)

3

Help for ParamQuery Pro / grid.getData in autocomplete Editor

« on: November 08, 2022, 10:31:06 pm »

hi
i implementet autocomplete with the source of grid.getData({dataIndx:[ui.dataIndx]}). This works fine, but my customer wants now an unordered list of the autocomplete values.
He wants the values in history order. Now, before i dig in to handknite some code, maybe you have a hint, how to realise this.
I mean something like : getData({dataIndx:[ui.dataIndx],order:'history'})

4

Help for ParamQuery Pro / height: "flex"

« on: September 26, 2022, 04:29:26 pm »

hi Paramvir
when i use flex as value  of heigt, the whole Grid freezes.
I tried it also in your Million Record Demo, there it is the same.

5

Help for ParamQuery Pro / lazy loading in combination with groupModel

« on: March 24, 2022, 09:28:38 pm »

hi
i took your example lazy loading and combind it with a groupModel on Dates like
..           {title: "Datum", width: 100, dataType: "date","format":"dd.mm.yy", dataIndx: "`datum1`",editor: {type: "textbox",attr: "type='date'"},
                          groupChange: function (val) {
                          return new Date(val).getFullYear()+' '+['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][new Date(val).getMonth() ]}
                },
 
At first click on "Gruppierung ein/aus", it does not display grouped months but its showing the ungrouped dates. At second click it is grouping --- containing undefined  records
Finally i played with the parameters and when i alter rpp from 100 to 10000, it's working like expected.
Could not setup a working example in jsfiddle, but you can have a look at this link:https://deligno.chpost.ch/bad.html

6

Help for ParamQuery Pro / How to use standard (html5) date type in input dialog?

« on: March 09, 2022, 07:35:29 pm »

Instead of implementing hand knitten calender widgets i would prefer to have 'input type=date' in the grid.
I did apply a patch in pqgrid.dev.js (version 8.1.2)  line 5089 -->
inp = "<input class='" + cls2 + "' " + attr + " " + style + " type="+(objP.column.dataType=="date"?"date":"text")+" name='" + dataIndx + "' />"    //rh use html5 data input widget in modern browsers
but thats just a quick and dirty solution.
 
Maybe you take this as a feature-request?

7

Help for ParamQuery Pro / Re: Date format like dd.mm.yyyy

« on: March 09, 2022, 07:26:20 pm »

so easy, but it took me a lot of time.
Thank you for your reply.

8

Help for ParamQuery Pro / Date format like dd.mm.yyyy

« on: March 08, 2022, 03:08:01 pm »

hi Paramvir
i am stuck with this issue. I want to display and edit the date in Swiss Format like dd.mm.yyyy
I tried to alter your demo project i found under  "Inline-Editing"-"Editor and Validations" in the Pro-Demo section; here my altered code, but data-validation still claims: "not in date format"
have a look at lines 51,161,266

code:
$(function () {
   
        var books = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"
        ];
        function autoCompleteEditor( source ) {
            return function (ui) {
                ui.$cell.addClass('ui-front');//so that dropdown remains with input.           

                //initialize the editor
                ui.$editor.autocomplete({
                    //appendTo: ui.$cell, //for grid in maximized state.
                    source: source,
                    position: {
                        collision: 'flipfit',
                        within: ui.$editor.closest(".pq-grid")
                    },
                    selectItem: { on: true }, //custom option
                    highlightText: { on: true }, //custom option
                    minLength: 0
                }).focus(function () {
                    //open the autocomplete upon focus               
                    $(this).autocomplete("search", "");
                });
            }
        }
        function dateEditor(ui) {
            var $inp = ui.$cell.find("input"),
                grid = this,
            format = ui.column.format || "dd.mm.yy",
            val = $.datepicker.formatDate(format, new Date($inp.val()));

            //initialize the editor
            $inp
            .attr('readonly', 'readonly')
         .val(val)
            .datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: format,
                showAnim: '',
                onSelect: function () {
                    this.firstOpen = true;
                },
                beforeShow: function (input, inst) {
                    setTimeout(function () {
                        //to fix the issue of datepicker z-index when grid is in maximized state.
                        $('.ui-datepicker').css('z-index', 999999999999);
                    });
                    return !this.firstOpen;
                },
                onClose: function () {
                    this.focus();
                }
            });
        }
        var colM = [
            {
                title: "Ship Country", dataIndx: "ShipCountry", width: 120,
                cls: 'pq-dropdown pq-side-icon',
                editor: {
                    type: "textbox",
                    init: autoCompleteEditor( "/pro/demos/getCountries" )
                },
                validations: [
                    { type: 'minLen', value: 1, msg: "Required" },
                    {
                        type: function (ui) {
                            var value = ui.value,
                                _found = false;
                            //remote validation
                            //debugger;
                            $.ajax({
                                url: "/pro/demos/checkCountry",
                                data: { 'country': value },
                                async: false,
                                success: function (response) {
                                    if (response == "true") {
                                        _found = true;
                                    }
                                }
                            });
                            if (!_found) {
                                ui.msg = value + " not found in list";
                                return false;
                            }
                        }
                    }
                ]
            },
            {
                title: "Books", dataIndx: "books", width: 90,
                cls: 'pq-dropdown pq-side-icon',
                editor: {
                    type: "textbox",
                    init: autoCompleteEditor( books )
                },
                validations: [
                    { type: 'minLen', value: 1, msg: "Required" },
                    {
                        type: function (ui) {
                            var value = ui.value;
                            if ( books.indexOf( value ) == -1) {
                                ui.msg = value + " not found in list";
                                return false;
                            }
                        }, icon: 'ui-icon-info'
                    }
                ]
            },
            {
                title: "Fruits", dataIndx: "fruits", width: 140,
                //custom editor.
                editor: {
                    options: ['Apple', 'Orange', 'Kiwi', 'Guava', 'Grapes'],
                    type: function (ui) {
                        //debugger;
                        var options = ui.column.editor.options,
                            str = options.map(function (option) {
                                var checked = (option == ui.cellData)? 'checked = checked': '';
                                return "<input type='radio' " + checked + " name='" + ui.dataIndx + "' style='margin-left:5px;' value='" + option + "'>  " + option;
                            }).join("");

                        ui.$cell.append("<div class='pq-editor-focus' tabindex='0' style='padding:5px;margin-top:1px;'>" + str + "</div>");
                    },
                    getData: function (ui) {
                        return ui.$cell.find('input:checked').val();
                    }
                }
            },
            {
                title: "Order ID", width: 100, dataIndx: "OrderID",
                editor: {
                    type: "textbox",
                    //make it html5 number editor.
                    attr: "type='number'"
                }
            },
          {
              title: "Order Date", width: "120", dataIndx: "OrderDate", dataType: 'string', format: 'dd.mm.yy',
              cls: 'pq-calendar pq-side-icon',
              editor: {
                  type: 'textbox',
                  init: dateEditor,
                  getData: function (ui) {
                      //convert from column format to native js date format "mm/dd/yy"
                      var dt = $.datepicker.parseDate(ui.column.format, ui.$cell.find("input").val());
                      return $.datepicker.formatDate("dd.mn.yy", dt);
                  }
              },
              validations: [
                    { type: 'regexp', value: '^[0-9]{2}.[0-9]{2}.[0-9]{4}$', msg: 'Not in date format' }
              ]
          },
            { dataIndx: 'ShipViaId', hidden: true }, //hidden column to store ShipVia Id.
          {
              title: "Shipping Via", dataIndx: "ShipVia", width: 110,
              cls: 'pq-dropdown pq-side-icon',
              editor: {
                  type: 'select',
                  init: function (ui) {
                      ui.$cell.find("select").pqSelect();
                      setTimeout(function () {
                          ui.$cell.find("select").pqSelect('open');
                      })
                  },
                  valueIndx: "value",
                  labelIndx: "text",
                  mapIndices: { "text": "ShipVia", "value": "ShipViaId" },
                  options: [
                        { "value": "", "text": "" },
                        { "value": "SE", "text": "Speedy Express" },
                        { "value": "UP", "text": "United Package" },
                        { "value": "FS", "text": "Federal Shipping" }
                  ]
              },
              validations: [{ type: 'minLen', value: 1, msg: "Required" }]
          },
         //another column with select editor having options in key: value pairs format.
          {
              title: "Shipping Via2", dataIndx: "ShipVia2", width: 110,
              cls: 'pq-dropdown pq-side-icon',
              editor: {
                  type: 'select',
                  init: function (ui) {
                      ui.$cell.find("select").pqSelect();
                      setTimeout(function () {
                          ui.$cell.find("select").pqSelect('open');
                      })
                  },
                  options: [                       
                        { "SE": "Speedy Express" },
                        { "UP": "United Package" },
                        { "FS": "Federal Shipping" }
                  ]
              },
              //render required to display options text corresponding to value stored in the cell.
              render: function (ui) {                 
                  var option = ui.column.editor.options.find(function (obj) {
                      return (obj[ui.cellData] != null);
                  });
                  return option ? option[ui.cellData] : "";
                },
                validations: [
                    { type: 'minLen', value: 1, msg: "Required" },
                    {
                        type: function (ui) {                           
                            var value = ui.value, option = ui.column.editor.options.find(function (obj) {
                                return (obj[value] != null);
                            });
                            if (!option) {
                                ui.msg = value + " not found in list";
                                return false;
                            }
                        }, icon: 'ui-icon-info'
                    }
                ]
          },
            {
                title: "Freight", dataIndx: "Freight", dataType: "float", width: 100, format: '$#,###.00',
                editor: { select: true },
                validations: [{ type: 'gte', value: 1, msg: "should be >= 1" }],
                editModel: { keyUpDown: true }
            },
            {
                title: "Shipping Address", width: 200, dataIndx: "ShipAddress",
                editor: {
                    type: "textarea"
                },
                editModel: {
                    saveKey: '' //disable or set it to some other key code to free up use of Enter key for line breaks.
                },
                validations: [{ type: 'minLen', value: 1, msg: "Required" }]
            }
        ];
        var dataModel = {
            location: "remote",
            dataType: "JSON",
            method: "GET",
            url: "/content/invoice.json",
            getData: function (response) {
                response.data.forEach(function (rd) {
               
                    //make ShipAddress multiline text.
               rd.OrderDate=rd.OrderDate.split('/')[1]+'.'+rd.OrderDate.split('/')[0]+'.'+rd.OrderDate.split('/')[2]
                    rd.ShipAddress = rd.ShipAddress + "\n" + rd.ShipCity + "\n" + (rd.ShipRegion || "") + "\n" + rd.ShipPostalCode;
                })
                return response;
            }
        }
        $("div#grid_custom_editing").pqGrid({
            title: "Shipping Orders <b>(Custom editing)</b>",
            dataModel: dataModel,
            colModel: colM,
            autoRow: true,
            scrollModel: { autoFit: true },
            columnTemplate: {
                valign: 'center'
            },
            create: function (evt, ui) {
                this.widget().pqTooltip();
            },
            editModel: {
                clicksToEdit: 1,
                keyUpDown: false
            },
            numberCell: { show: false },
            resizable: true
        });
    });

9

Help for ParamQuery Pro / Re: i cant implement group_row_hidden

« on: October 01, 2021, 01:37:55 pm »

today i found out: after the first start, grouping behaves strange, but if you delete the group butten (rank) and drag it again to the grouping section, then grouping behaves like expected.

10

Help for ParamQuery Pro / i cant implement group_row_hidden

« on: September 30, 2021, 08:14:19 pm »

hi
i try to implement group_row_hidden in my projects. But i encounter strange results.. i am sure, to make some mistake, but after severel days of trying i am going to ask you.
As an approach, i set up a minimalistic example based on https://paramquery.com/pro/demos77/grid_json , and the result is similar to what i get in my project.
I altered this example with the grouping stuff like so: (paste it and start it, you  will see what i mean)
$(function () {
   function hideCol(col, hide){
            col.hidden = hide;
            col.menuInDisable = hide;           
        }
        var data = [
            { rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
            { rank: 1, company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 },
            { rank: 1, company: 'Royal Dutch Shell', revenues: 306731.0, profits: 25311.0 },
            { rank: 2, company: 'BP', revenues: 267600.0, profits: 22341.0 },
            { rank: 2, company: 'General Motors', revenues: 192604.0, profits: -10567.0 },
            { rank: 2, company: 'Chevron', revenues: 189481.0, profits: 14099.0 },
            { rank: 2, company: 'DaimlerChrysler', revenues: 186106.3, profits: 3536.3 },
            { rank: 2, company: 'Toyota Motor', revenues: 185805.0, profits: 12119.6 },
            { rank: 3, company: 'Ford Motor', revenues: 177210.0, profits: 2024.0 },
            { rank: 10, company: 'ConocoPhillips', revenues: 166683.0, profits: 13529.0 },
            { rank: 11, company: 'General Electric', revenues: 157153.0, profits: 16353.0 },
            { rank: 12, company: 'Total', revenues: 152360.7, profits: 15250.0 },
            { rank: 13, company: 'ING Group', revenues: 138235.3, profits: 8958.9 },
            { rank: 14, company: 'Citigroup', revenues: 131045.0, profits: 24589.0 },
            { rank: 15, company: 'AXA', revenues: 129839.2, profits: 5186.5 },
            { rank: 16, company: 'Allianz', revenues: 121406.0, profits: 5442.4 },
            { rank: 17, company: 'Volkswagen', revenues: 118376.6, profits: 1391.7 },
            { rank: 18, company: 'Fortis', revenues: 112351.4, profits: 4896.3 },
            { rank: 19, company: 'Crédit Agricole', revenues: 110764.6, profits: 7434.3 },
            { rank: 20, company: 'American Intl. Group', revenues: 108905.0, profits: 10477.0 }
        ];
      var groupModel = {
            on: true,
            headerMenu: false,
            indent: 20,
            dataIndx: ['rank'],
            //summaryInTitleRow: '',
            //titleIndx: 'grp',
            titleInFirstCol: true,
            showSummary: [false], //to display summary at end of every group.
            collapsed: [true],
            summaryEdit: false
        };
        var obj = {
            width: "80%",
            height: 400,
            resizable: true,
            title: "Grid From JSON",
            showBottom: false,
            scrollModel: { autoFit: true },
            dataModel: { data: data },
         groupModel:groupModel,
         groupChange: function () {
                //make a copy of array.
                var di_old = Object.assign([], groupModel.dataIndx);
                return function () {
                    //make a copy of array.
                    var di_new = Object.assign([], this.option('groupModel.dataIndx')),
                        grid = this;

                    //show prev columns.
                    di_old.forEach(function(di){
                        var col = grid.getColumn({dataIndx: di});
                        hideCol(col, false);
                    });

                    //hide new columns.
                    di_new.forEach(function(di){
                        var col = grid.getColumn({dataIndx: di});
                        hideCol(col, true);
                    });   

                    di_old = di_new;                   

                    this.refreshCM();
                };
            }(),
            create: function(){               
                groupModel.dataIndx.forEach(function(di){
               hideCol( this.getColumn({dataIndx: di}), true);
                }, this);
                this.refreshCM();
            },
        };
        $("#grid_json").pqGrid(obj);
    });   
   

11

Help for ParamQuery Pro / Re: contextmenu on tab

« on: June 09, 2021, 03:35:39 pm »

thats what i am using. It delivers correct ui in cells, ui with -1 in rownumbers, but in the top left corner of the grid no ui is delivered.

12

Help for ParamQuery Pro / Re: contextmenu on tab

« on: June 08, 2021, 03:08:04 pm »

i am experimenting with contextmenu on grid: rightclick on the top-left grid corner does not deliver ui parameter. I would expect to have a grid-context ui there.

13

Help for ParamQuery Pro / Re: contextmenu on tab

« on: June 08, 2021, 02:32:17 pm »

thank you for your reply.
I cannot find "the home page 2nd demo of spreadsheet", your link leads just to the main page.

14

Help for ParamQuery Pro / Re: contextmenu on tab

« on: June 07, 2021, 08:45:15 pm »

I would like to add a contextmenu similar to on contextMenu.headItems right on the tab.

15

Help for ParamQuery Pro / contextmenu on tab

« on: June 04, 2021, 03:53:15 pm »

hi Paramvir
i am trying to implement a context-Menu on Tab. I think, this is not basicly implemented (could not find in the API-Doc), but maybe you can give me a hint how to create it.