Editor - inline edit - using arrow keys to navigate

Editor - inline edit - using arrow keys to navigate

GeorgeHelmkeGeorgeHelmke Posts: 44Questions: 16Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    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

  • GeorgeHelmkeGeorgeHelmke Posts: 44Questions: 16Answers: 0

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

    Thanks

  • GeorgeHelmkeGeorgeHelmke Posts: 44Questions: 16Answers: 0

    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.

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    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

  • GeorgeHelmkeGeorgeHelmke Posts: 44Questions: 16Answers: 0

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

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Answer ✓

    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

  • GeorgeHelmkeGeorgeHelmke Posts: 44Questions: 16Answers: 0

    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();
                    }
    
  • GeorgeHelmkeGeorgeHelmke Posts: 44Questions: 16Answers: 0

    For the tab, the edit focus does move.

  • GeorgeHelmkeGeorgeHelmke Posts: 44Questions: 16Answers: 0

    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.

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    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

  • GeorgeHelmkeGeorgeHelmke Posts: 44Questions: 16Answers: 0

    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     }
        );
    
  • GeorgeHelmkeGeorgeHelmke Posts: 44Questions: 16Answers: 0

    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.

  • GeorgeHelmkeGeorgeHelmke Posts: 44Questions: 16Answers: 0

    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.

This discussion has been closed.