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.


Topics - arbyter

Pages: [1] 2
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 / 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
        });
    });

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

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

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



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

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


9
Help for ParamQuery Pro / fillhandle
« on: August 22, 2019, 08:16:09 pm »
hi
i would like enable fillhandle  just  on certain columns, not globally.
Can you give me an example?

Thank you

10
Help for ParamQuery Pro / i need a hint
« on: July 05, 2019, 10:54:44 pm »
hi
i want to have a picklist that contains all different entrys in current column. I manged it by this snippet.
autocomplete ... source: function (grid,ui){               
                    var ret = []
                    var data=grid.getData({dataIndx:[ui.dataIndx]})
                    $(data).each(function(i,v){if(v[ui.dataIndx])ret.push(v[ui.dataIndx])})
                    return (ret)}
So far, so good.
Now i am stuck with this:
when i leave the field, i should complete with the first matching value found in the list, without the need to choose by key or mousclick.
Example; i enter  a , the list contains Armada, Bravo, Mountain then it should autocomplete with Armada on leaving the field.
Maybe you can provide me a hint.

11
Help for ParamQuery Pro / nextEdit misplaces input
« on: May 31, 2019, 11:18:00 pm »
hi Paramvir
 i encounter following problem when i activate next Edit like
editModel:{clicksToEdit:2,pressToEdit:true,onSave:'nextEdit',saveKey:$.ui.keyCode.ENTER,keyUpDown:false},           

after modifying a field the next field gets misplaced in the upper left corner of the grid, without changing values the next field remains at the right place.


12
Help for ParamQuery Pro / clicksToEdit:2
« on: May 27, 2019, 08:23:22 pm »
hi Paramvir
i want entering in editmode only be doubleclick. I tried to add clicksToEdit:2 in the https://paramquery.com/pro/demos/editing_custom example.
..
editModel: {
      clicksToEdit:2,
                saveKey: $.ui.keyCode.ENTER,
                //filterKeys: false,
                keyUpDown: false,
                cellBorderWidth: 0
            },
..

It did not change the behaviour. Editor still starts by pressing any key.

13
Help for ParamQuery Pro / nextEdit
« on: May 09, 2019, 03:24:32 pm »
hi
i am looking for a method to perfom nextEdit when the down-key  is pressed. onSave: nextEdit  works just in the same row.
Any hint?
Thank you

14
Help for ParamQuery Pro / isDirty not true after edit
« on: March 11, 2019, 11:15:57 pm »
hi
1. i took row-editing as example and adapted it to this script:
https://next.plnkr.co/edit/Hysibr1C6QgJCjaD?preview
i dont find out  why the row after editing is not considered as dirty.
(it never reaches the alert)

2. i would like to have each field of cht active record opend in editmode, so i can move the focus just by tab. No need to click on each field in the active row.
Any hint to achieve this behaviour?

Thank you in advance

15
Help for ParamQuery Pro / html code in data does not get renderd
« on: March 08, 2019, 08:22:41 pm »
hello
my data contains html code and want to have it rendered.
But PQGrid shows the sourcecode.
I modifiied example "row and cell styles", there it renders. (see attached printscreen)
https://next.plnkr.co/edit/Hysibr1C6QgJCjaD?preview

Pages: [1] 2