Answers

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  November 2014

  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 Posts: 44Questions: 16Answers: 0

  November 2014

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

  Thanks
• GeorgeHelmke Posts: 44Questions: 16Answers: 0

  November 2014

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  November 2014

  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 Posts: 44Questions: 16Answers: 0

  November 2014

  Sounds like a team viewer / Skype to me. Site is corporate behind a fire wall.
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  November 2014 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
• GeorgeHelmke Posts: 44Questions: 16Answers: 0

  November 2014

  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 Posts: 44Questions: 16Answers: 0

  November 2014

  For the tab, the edit focus does move.
• GeorgeHelmke Posts: 44Questions: 16Answers: 0

  November 2014

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  November 2014

  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 Posts: 44Questions: 16Answers: 0

  November 2014

  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 Posts: 44Questions: 16Answers: 0

  November 2014

  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 Posts: 44Questions: 16Answers: 0

  November 2014

  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.