Cursor in Editor (Keytable example)

KasamaliHasan

Hi

I am referring to the following downloaded example (datatable editor with keytable extension):
http://loxalhost:xxxxxx/Web/examples/extensions/keyTable.html

When I select a cell and press 'Enter' or 'F2', the contents of the cell become editable and are selected by default.

If I position the cursor in the middle of this editable text (so that I can backspace or delete as needed), I noticed that the cursor (or caret) randomly jumps to the begining of the cell.

This can be annoying for users who are trying to some corrections to the data.

Has any body noticed this behaviour or is it just me.

I am using IE10, IE8 and latest version of SR Ware Iron v 38.0 (Chrome clone)

Regards
Hasan Kasamali
KasamaliHasan@Yahoo.co.uk

allan

If I position the cursor in the middle of this editable text

Using arrow keys? Yes, the arrow keys will move the focus like it does in Excel (Excel has a double click option I think which might disable this behaviour - perhaps that would be a good one for KeyTable to copy).

Allan

KasamaliHasan

Hi Allan

Many thanks for your response.

The current editable cell will loose focus if any arrow keys are used when in edit mode. You have to use the mouse to position the cursor before of after the character you want to ammend. That is absolutely fine.

However when in edit mode as in above, if you positon the caret next to a character, it will sometimes jump to the begining of the cell without any interaction from the keyboard.
So you have to re position the caret next to the character you want to edit once again using the mouse and quickly type the changes.

This can be annoying to the end user who is trying to make ammendments to the cell.

I found this behavioud when using IE10, IE8 and most of my usere are using IE10

It works fine in Firefox and Chrome

Regards
Hasan

allan

Hi Hasan,

How odd! I've just tried to reproduce this in IE but wasn't able to do so unfortunately. Could you give me exact steps using this example for how to reproduce this "jumping cursor"?

What I tried was:

1. Load page
2. Click on "Accountant" in the second row of the table
3. Enter "12345678"
4. Use the mouse to move the cursor to between "4" and "5"
5. Wait for the cursor to "jump"

Thanks,
Allan

KasamaliHasan

Hi Alan

I have uploaded a video at :

https://drive.google.com/file/d/0B1AtwD5GrCEcS2lBTURzSGN5THM/view?usp=sharing

You can see as I click within the cell to edit, the caret randomly jumps to the begining of the edit field.

If you need a more high resolution video please let me know

Regards
Hasan

allan

How odd - Google Drive isn't loading for me atm. I'll take a look at it shortly when it comes back up.

Allan

allan

Thanks for the video - I see the issue now. Unfortunately this looks very much like an IE bug. In the CSS used for that demo there is this block:

    div.DTE_Inline input {
        border: none;
        background-color: transparent;
        padding: 0 !important;
        font-size: 90%;
    }

If you remove the padding: 0 !important; option then this issue is resolved and the cursor will no longer jump around in IE...

Allan

KasamaliHasan

Hi Alan

I have commented 'padding: 0 !important;' and the cursor has stopped jumping

Many thanks for your help. My users are now happy

Also, Alan, I have a few other issues I would like to ask about. Should I continue in this discussion thread or do you want me to start another thread for the other things.

Regards
Hasan Kasamali
KasamaliHasan@yahoo.co.uk

allan

Either way is fine.

KasamaliHasan

Hi Alan

Issue / Query (1)
I am referring to the same example :
http://loxalhost:xxxxxx/Web/examples/extensions/keyTable.html

In this example if I type Sonya (firstname on last record on page 1), datatables will filter and I will see only one record of Sonya Frost, Software Engineer on the screen.

If I now click on any cell in the Sonya record, it does not allow editing. It looks like keytables gets disabled when any search criteria is applied.

Is this the default behaviour. If so then that is fine.

It would be nice to be able to edit the filtered out record using Editor. So where I indicate to my users any validation errors cells in RED colour, the user can just search in the search field to display the record with ease and edit it instead of paginating through hundreds of pages of records.

Regards
Hasan

allan

Is this the default behaviour. If so then that is fine.

No - that is absolutely a bug. Thanks for letting me know about it. I've committed a fix and it is now available in the nightly version for KeyTable.

Regards,
Allan

KasamaliHasan

Hi Alan

Many thanks for the fix.

This fix has worked and my users can edit cells when in filter mode

Regards
Hasan

KasamaliHasan

Issue / Query (2)

I am referring to the same example : http://loxalhost:xxxxxx/Web/examples/extensions/keyTable.html example

I also have editor enabled on that page with keytable. However on my editor I do not have the New, Edit Delete (CRUD) buttons. I just need key table on that.

I am trying to add page length menu to my page as indicated in https://datatables.net/examples/advanced_init/length_menu.html

So I am trying to add the following setting to enable the page length menu

lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],

However I cannot see the page length dropdown.

Is the page length option disabled when Editor is enabled. If Yes than that is fine.

Regards
Hasan

btree

Do you use the DOM Attribute?

dom: "lBfrtip",

Then you need to add the Letter 'l' for the lengthMenu.

Cheers
Hannes

KasamaliHasan

Hi

I use

dom: "Bfrtip",

as is in the examples

I have now changed it to

dom: "lBfrtip",

and the page length option has appeared on the page.

Will changing this attribute have any effect on the Editor at all.

I have also enabled the buttons in Editor now. They show up together with the page length menu (although the positioning of the page length may need looking into.

Regards
Hasan

KasamaliHasan

Issue / Query (3)

I am referring to the same example : http://editor.datatables.net/examples/extensions/keyTable.html example

If you are in EDIT mode, is it possible to use the arrow keys to positon the cursor appropriately within the edit field.

At the moment the default behaviour is for the arrow keys to navigate away from the cell.

Regards
Hasan

btree

Hi Hasan,

you can change the l = pagelength or B = Buttons around in the DOM Attribute if you want to change the place.

Issue Key Moving
http://datatables.net/reference/option/keys.editor

Yes this is the default mode, but you can change it as seen here:
http://datatables.net/reference/event/key

Cheers
Hannes

allan

Yes, you would need to disable the KeyTable library when the editor is opened (open) and then reenable when closed (close).

Allan