Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.


Messages - arbyter

Pages: [1] 2 3
1
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

2
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?

3
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.


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

5
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.


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

7
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.

8
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.

9
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.

10
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.


11
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.

12
Help for ParamQuery Pro / Re: contextmenu listener is action
« on: December 18, 2019, 02:49:31 pm »
i did, but your example code from api-doc is the snippet, i used in my post.


13
Help for ParamQuery Pro / contextmenu listener is action
« on: December 17, 2019, 04:09:16 pm »
hi
tried to implement pq-contextmenu following the api docu.
from api:>>  $( selector ).pqGrid( { contextMenu: {on: true, items: [{
            name: 'Undo',
            listener: function(evt, ui, item){
                this.History().undo();
            }
        },        ...    ]} } );
didnt work, then i mistrusted the naming "listener". Changed to "action", then it works.



14
Help for ParamQuery Pro / cellClick event
« on: December 17, 2019, 03:08:29 pm »
hi
i tried to establish a cellClick eventhandler but no success at first.
Played with the Demos, here my results:
   $(function () {
        var data = [
            { rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
   ....
            { rank: 2, company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 },
            { 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 obj = {
            width: "80%",
            height: 400,
            resizable: true,
            title: "Grid From JSON",
            showBottom: false,
            scrollModel: { autoFit: true },
            dataModel: { data: data }
   //,cellClick:function(event,ui){console.log(ui)}  //works
        };
        $("#grid_json").pqGrid(obj);
   $("#grid_json").pqGrid("option",{cellClick:function( event, ui ) {console.log(ui)} }) //works
   //$("#grid_json").on( "pqGrid:cellClick", function( event, ui ) {console.log(ui)} ); //does not work
   
    });   
   

15
Help for ParamQuery Pro / Need hint in pivot
« on: November 30, 2019, 06:49:04 pm »
hello
i try to setup a pivot table. I startet with a copy of you democode and adapted my data structure. Somewhere i have a mistake, but i cannot find it.
I always land in an error <Cannot read property "grouChange" of undefined.>

here you can find my testscript: https://deligno.chpost.ch/testpivot.html


I would like to have very basic pivot example with static Data; this would make it easyer to start from scratch.
Thank you

Great work!!!


Pages: [1] 2 3