Char swallowed by InputDate Control in FlexGrid

Posted by: greg.frazer on 7 February 2018, 10:01 am EST

    • Post Options:
    • Link

    Posted 7 February 2018, 10:01 am EST

    I have a wijmo.input.InputDate being imbedded into a FlexGrid Cell via a call from a manager code to the FlexGrid’s itemFormatter function.

    All is good, except for a minor issue:

    When I tab to the cell and press a key [0-9], that ketstroke is swallowed by the control.



    I got this to work ok with the DropDown control: wijmo.input.AutoComplete,

    But by using the same technique on the InputDate. it doen’t work

    Technique:

    1. Get the manager code to capture the keystroke, via keydown event and store in manager. pass manager to Flexgrid.itemFormatter functions callback handler.
    2. In the Flexgrid.itemFormatter functions callback handler, create the control.
    3. put a gotFocus handler on the created control
    4. set Text /oldText to the manage value of the keystroke eg:
    var dtpGotFocus = function (e) {
                        if (manager != null && manager._cellKeyDownValue != null && dtp != null) {
                            dtp.text = ''; 
                            dtp.oldText =  manager._cellKeyDownValue;
                            manager._cellKeyDownValue = null;
    
                        }
                    }
                    
                    // create InputDate as a child of the cell, bind it to data and set selected item to the cell's value
                    dtp = new wijmo.input.InputDate(cell, {
                        format: 'dd/MM/yyyy',
                        value: cellDateValue,
                        isDroppedDown: true,
                        showDropDownButton: false,
                        textChanged: dtpTextChanged,
                        gotFocus: dtpGotFocus
    				});
    
    

    this works for Autocomplete dropdowns but not for data

    For date, the keystroke is set on oldText but not on Text and the displayed value is the value set when creating the control or it defaults to todays date.

    How can I fix this?

    My team and I have been working with the Wijmo Flexgrid for the last 3 years.

    Our clients are fast data input persons.

    Such persons don’t like taking their hands off the key board and having to use the mouse.

    These persons, mostly trained typists, can type at 200+ words a minute. One lady can type at 350+ words a minute.

    Forcing them to use the mouse, dramitcally slows down this key data entry rate.

    One of the reasons we went with Wijmo FlexGrid was it’s “Excel like look, functionality and feel” to paraphrase the Wijmo marketing documentation.

    We have found the Flexgrid to be very unfriendly to the fast typist.

    So we have had to create work-arounds for these situations.

    The FlexGrid is just too mouse orientated. (BTW, there is no mouse on the mobile devices)

  • Posted 7 February 2018, 8:06 pm EST

    Hi Greg,

    We are sorry for the inconvenience.

    There is an alternative approach for adding Custom Editor for FlexGrid column, please refer to the following fiddle for the same:

    http://jsfiddle.net/Wijmo5/1w9hr82h/

    Please let us know if it do not work for you…

    We have found the Flexgrid to be very unfriendly to the fast typist.

    So we have had to create work-arounds for these situations.

    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

    Also, we request you to listing up the issues those do not fit for your Application used by fast typist.

    The FlexGrid is just too mouse orientated. (BTW, there is no mouse on the mobile devices)

    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

    We request you to elaborate the scenarios not working in Mobile devices with Device detailed.

    ~Manish

  • Posted 8 February 2018, 11:25 am EST

    Manish

    That jsfiddle doesn’t work. I get Access is denied in Browsers console

    As far as the typist goes: try it yourself!

    embed a * “InputDate,* " AutuoComplete,”

    • " a ComboBox"
    • “a filterable AutoComplete dropdown (itemsSourceFunction is a server download or some other large filterable list,”
    • “a MultiSelect dropdown”

    "

    into the Grid with Currency, Text and Percentage fields

    Then enter rows WITHOUT using the mouse.

    The metric for us slow typists is to enter 75+ cells in under 30 secs, tabbing from row to row

  • Posted 8 February 2018, 6:10 pm EST

    Hi Greg,

    We are sorry for the inconvenience.

    We have forwarded this issue to the development team for further investigation with tracking id 308437

    We will update you as we get any update on this.

    ~Manish

  • Posted 12 February 2018, 9:32 am EST

    This was a bug in the sample. The custom editor should prevent the default handling for the tab and enter keys, but it failed to do so.

    Here’s the fixed version of the code:

    this._ctl.addEventListener(this._ctl.hostElement, 'keydown', function (e) {
        switch (e.keyCode) {
            case wijmo.Key.Tab:
            case wijmo.Key.Enter:
                [b]e.preventDefault(); // << this was missing![/b]
                _this._closeEditor(true);
                _this._grid.focus();
    
    

    This has been fixed in the sample, and here’s an updated fiddle to demonstrate:

    http://jsfiddle.net/4bdvj63b/

    Thank you for reporting this problem.

  • Posted 15 February 2018, 1:46 pm EST

    the supplied jsfiddle does work.

    I had to do extra work, as we build the dropdown from the flexgrid.itemFormatter event handler.

    Therefore, instead of having a CustomGridEditor, and having a _beginningEdit event handler; we put the code in the grid.prepareCellForEdit event handler.

    But practically it is the same code.

    Because of this, we capture the first keydown in the “manager” service where we created the grid. and we pass the “manager” to the grid.prepareCellForEdit, so it can be used there.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels