Editor - inline edit - using arrow keys to navigate

GeorgeHelmke

User like the data tables and editor, but we have some people who like to use arrow keys (especially up and down) to navigate between the same column on different rows. How can we accomplish that?
The other thing is the sheer size of the inline edit when it pops up. Can we get it down to 1/2 or 1/3 of the current width? Can we make it variable from column to column?
Thanks,
George

allan

we have some people who like to use arrow keys (especially up and down) to navigate between the same column on different rows

Is this when inline editing mode? You could bind an event listener for the up and down keys to call inline() on the cell in the previous / next row - very much like the tabbing example and how it calls inline() on the next cell when the tab key is pressed.

Personally I like using up and down in a text box to move the cursor to the start / end of the text, but that might just be me ;-)

The other thing is the sheer size of the inline edit when it pops up.

This is what bubble editing (bubble()) was written for. Inline editing is really only useful for very simple fields. Bubble editing however can contain complex information since it floats above the cell. Indeed I considered not having an inline mode at all...

Can we get it down to 1/2 or 1/3 of the current width? Can we make it variable from column to column?

Certainly - it is controlled by CSS:

div.DTE.DTE_Inline div.DTE_Field_Name_{fieldName} {
   ...
}

where {fieldName} is the name of the field you want to target.

Regards,
Allan

GeorgeHelmke

Yes it is inline we are using. I will look at the tabbing example.

Thanks

GeorgeHelmke

And now I am not so sure about whether I have inline going or not. I looked at the tabbed example, and the cell in use is exactly the right size in the right place, and is a part of the table.
In my tables, the cell being edited jumps to a bigger size when focused.

allan

That sounds like a CSS styling artefact. I've set up the CSS in my demos so there isn't a jump in the display, but if your rows are small, or your text box is large, there will be a display glitch.

The "Inspect element" option in your browser is probably the best way to look into it, or if you could give me a link tot he page I can take a look.

Thanks,
Allan

GeorgeHelmke

Sounds like a team viewer / Skype to me. Site is corporate behind a fire wall.

allan

In case anyone else stumbles across this thread, we sorted it out by including the Editor stylesheet which includes styles to hide the field label when in inline mode - which was the main issue.

Allan

GeorgeHelmke

Still working on the arrow key moves. This code manages to move the cursor, but the old cell is still the one selected for editing, i.e., I manage the move, but not the change for what is being edited:

       if (e.keyCode === 40) { //key down
                    e.preventDefault();
                    // Find the cell that is currently being edited
                    var cell = $('div.DTE').parent();
                    var cellIndex = cell.index();
                    // Down to the next row
                    cell.parent().next().children().eq(cellIndex).click();
                }

GeorgeHelmke

For the tab, the edit focus does move.

GeorgeHelmke

AND, after the record has been saved, I need to get the user back to where they were, so they can arrow down and edit the next one.

allan

Hi,

Your code looks good to me. I've just tried running it on the Editor inline example here by sticking it in an event listener, running the code on the console, and then triggering inline editing:

$(document).on('keyup', function ( e ) {
  if (e.keyCode === 40) { //key down
             e.preventDefault();
             // Find the cell that is currently being edited
             var cell = $('div.DTE').parent();
             var cellIndex = cell.index();
             // Down to the next row
             cell.parent().next().children().eq(cellIndex).click();
         }
} );

When I press the down button it jumps down to the next row.

What happens when you run your code on your page? Any errors?

The only thing I can think of that would go wrong is if you have one or more hidden columns. That would knock the cellIndex out of alignment. For that the column.index() method could be used to translate from the column data index to the column visible index (the latter being what jQuery would need, since it is operating on the nodes that are in the DOM).

Regards,
Allan

GeorgeHelmke

I had hidden columns, and a button, and I got rid of both. Same result. HOWEVER, I observed that actually, it goes into edit mode on every other row. Example
Edit
Not-Edit
Edit
Not-Edit

Here's the rack:

var tableSalesLine;
var editorSalesLine;

var showAll = true;
//!!!information unique to table type!!!
var aoSalesLineColumnsSetup = [
    { mData: "DisplayCategory", sTitle: "DisplayCategory", "bVisible": showAll },
    { mData: "No_", sTitle: "@ResHelper.Loc("No_")" },
    { mData: "Description", sTitle: "@ResHelper.Loc("Description")" },
    { mData: "UnitPrice", sTitle: "@ResHelper.Loc("UnitPrice")" },
    { mData: "LineDiscount", sTitle: "@ResHelper.Loc("LineDiscountShort")" },
    { mData: "Pages", sTitle: "@ResHelper.Loc("Pages")" },  //needs to change to PAGES
    { mData: "Quantity", sTitle: "@ResHelper.Loc("Quantity")" },
    { mData: "QuantityOldValue", sTitle: "QuantityOldValue", "bVisible": showAll },
    { mData: "LineAmount", sTitle: "@ResHelper.Loc("LineAmountShort")" },
    { mData: "Additional_Quantity", sTitle: "@ResHelper.Loc("Additional_Quantity")", "bVisible": showAll },
    { mData: "Additional_Quoted_Price", sTitle: "@ResHelper.Loc("Additional_Quoted_Price")", "bVisible": showAll /*, "mRender": function (data, type, full) { return formatNumbers(data); }*/ },
    { mData: "External_Job_Description", sTitle: "@ResHelper.Loc("External_Job_Description")", "bVisible": showAll },
    { mData: "Document_Type", sTitle: "@ResHelper.Loc("Document_Type")", "bVisible": showAll },
    { mData: "DocumentNo_", sTitle: "@ResHelper.Loc("DocumentNo_")", "bVisible": showAll },
    { mData: "LineNo_", sTitle: "@ResHelper.Loc("LineNo_")", "bVisible": showAll },
    { mData: "RequestClone", sTitle: "RequestClone", "bVisible": showAll }
    /*
    ,
{
    "class": 'details-control',
    "orderable": false,
    "data": null,
    "defaultContent": '<button id="CloneRecord" name="CloneRecord" type="button" class="btn btn-default btn-xs"  data-toggle="tooltip" data-placement="left" title="ATResHelper.Loc("CloneRecord")">  <span class="glyphicon glyphicon-plus"></span></button>'
}
*/
];

$(document).ready(function () {

    editorSalesLine = new $.fn.dataTable.Editor({
        ajax: "@Url.Action("Save", "SalesLine")",
        table: "#SalesLinePopupTable",
        fields: [
                    { label: "DisplayCategory:", name: "DisplayCategory" },
                    { label: "@ResHelper.Loc("No_"):", name: "No_" },
                    { label: "@ResHelper.Loc("Description"):", name: "Description" },
                    {  label: "@ResHelper.Loc("UnitPrice"):", name: "UnitPrice" },
                    { label: "@ResHelper.Loc("LineDiscount"):", name: "LineDiscount" },
                    { label: "@ResHelper.Loc("Pages"):", name: "Pages" }, //needs to change to PAGES
                    { label: "@ResHelper.Loc("Quantity"):", name: "Quantity" },
                    { label: "QuantityOldValue:", name: "QuantityOldValue" },
                    { label: "@ResHelper.Loc("LineAmount"):", name: "LineAmount" },
                    {  label: "@ResHelper.Loc("Additional_Quantity"):", name: "Additional_Quantity" },
                    {  label: "@ResHelper.Loc("Additional_Quoted_Price"):", name: "Additional_Quoted_Price" },
                    {  label: "@ResHelper.Loc("External_Job_Description"):", name: "External_Job_Description" },
                    {  label: "@ResHelper.Loc("Document_Type"):", name: "Document_Type" },
                    {  label: "@ResHelper.Loc("DocumentNo_"):", name: "DocumentNo_" },
                    {  label: "@ResHelper.Loc("LineNo_"):", name: "LineNo_" },
                    {  label: "RequestClone:", name: "RequestClone" }
        ]
    });

    var oLanguage = {
        "sInfo": "@ResHelper.Loc("ShowingPageOfPage")",
        "sSearch": "@ResHelper.Loc("Search")",
        "sZeroRecords": "@ResHelper.Loc("ZeroRecords")",
        "sLengthMenu": "@ResHelper.Loc("LengthMenu")",
        "sInfoEmpty": "@ResHelper.Loc("InfoEmpty")",
        "sInfoFiltered": "@ResHelper.Loc("InfoFiltered")",
        "oPaginate": {
            "sNext": "@ResHelper.Loc("Next")",
            "sPrevious": "@ResHelper.Loc("Previous")"
        }
    };

    tableSalesLine = $('#SalesLinePopupTable').DataTable({
        bServerSide: true,
        bProcessing: true,
        "deferRender": true,
        bFilter: false,
        bPaginate: false,
        bLengthChange: false,
        bInfo: false,
        sServerMethod: "POST",
        sAjaxSource: "@Url.Action("AllWithWares", @ControllerName)",
        "fnServerParams": function (aoData) {
            aoData.push({ "name": "document_type", "value": document_type });
            aoData.push({ "name": "id", "value": id });
            aoData.push({ "name": "pordertype", "value": pordertype });
            aoData.push({ "name": "displayfilter", "value": displayfilter });
        },
        aoColumns: aoSalesLineColumnsSetup,
        "oLanguage": oLanguage     }
    );

GeorgeHelmke

And if we take it where we really want to go, it would work like excel:
Arrow keys to navigate.
You land on a field. If you type, you replace contents completely. If you use arrow keys, you leave field.
F2 toggles the editor. Arrow keys allow you to move inside the text.

GeorgeHelmke

More info on selection: If I click on a cell in the top row, and arrow down, it works perfectly.
If I click on the second row to start with, then arrowing down has me in the every other edit mode.