Author Topic: datepicker UX  (Read 5271 times)

RedBully

  • Pro Deluxe
  • Jr. Member
  • *
  • Posts: 51
    • View Profile
datepicker UX
« on: April 04, 2014, 07:10:19 pm »
http://paramquery.com/pro/demos - Inline editing - editors & validation (for example, which I have working locally).

If I click in an orderdate cell and select a new date the cell content is updated fine but the UX isn't great / as per http://jqueryui.com/datepicker as the datepicker pops up again rather than remaining hidden.

Suggestions as to how this better (?) UX could be realised in the context of the grid welcome.

Thanks.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6263
    • View Profile
Re: datepicker UX
« Reply #1 on: April 04, 2014, 07:21:16 pm »
remove these lines

Code: [Select]
onClose: function () {
                $inp.focus();
            }

and the datepicker won't pop up again after selection of a date.

RedBully

  • Pro Deluxe
  • Jr. Member
  • *
  • Posts: 51
    • View Profile
Re: datepicker UX
« Reply #2 on: April 14, 2014, 02:58:12 pm »
Getting there. The DatePicker is closing and I have also worked out how to call my cell centric save function which fires off the changed value and its key back to the server/ database. BUT it is using the old value - the grid cell is still in edit mode and hasn't save the value to its local model so can I cancel out of that in the onClose event as well/ save to local model? Or perhaps the way round is to change my save trigger event. Currently this is

    editModel:
        {
            clicksToEdit: 1,
            saveKey: '13'
        }

But I want the save (to local model) to happen as soon as I click in another cell in the grid/ close a datetime picker dialog, etc.

Hope that is clear.

While here as well, another scenario you may have encountered. I have time and datetime datatypes as well as date I want to deal with - I tried http://trentrichardson.com/examples/timepicker/ but these don't fire onClose, so have you used any better timepickers that better follow the jQuery datepicker pattern?

Ta.

RedBully

  • Pro Deluxe
  • Jr. Member
  • *
  • Posts: 51
    • View Profile
Re: datepicker UX
« Reply #3 on: April 14, 2014, 04:12:22 pm »
Making some progress with ...

$(context).pqGrid("saveEditCell");
$(context).pqGrid("quitEditMode");

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6263
    • View Profile
Re: datepicker UX
« Reply #4 on: April 14, 2014, 05:28:07 pm »
you could call 'saveEditCell' in 'onSelect' callback of datepicker.

http://api.jqueryui.com/datepicker/#option-onSelect

I'm looking into the timepicker.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6263
    • View Profile
Re: datepicker UX
« Reply #5 on: April 14, 2014, 05:45:58 pm »
There is onSelect option in timepicker so you can use this option for both change in date and time.