Should work on Android and iOS

[warpech]

Currently it is not usable in Android and iOS. We should try to find a way to make it usable there.

[valerianrossigneux]

This would be just great. Is it on top of your priorities or rather at the end?

[warpech]

This is connected with #126

[mranosa]

:+1: hope its a priority :)

[stephenostermiller]

Just bringing up the virtual keyboard is enough to get the ipad working decently well. To do so, the table cells just need to be marked as "editable". This can be done by adding one line to the WalkontableTable.prototype.adjustColumns function: TD.setAttribute('contenteditable','true');

WalkontableTable.prototype.adjustColumns = function (TR, desiredCount) {
  var count = TR.childNodes.length;
  while (count < desiredCount) {
    var TD = document.createElement('TD');    
    TD.setAttribute('contenteditable','true');
    TR.appendChild(TD);
    count++;
  }
  while (count > desiredCount) {
    TR.removeChild(TR.lastChild);
    count--;
  }
};

[pgouv]

Where is WalkontableTable.prototype.adjustColumns ?

[stephenostermiller]

I'm using jquery.handsontable.full.js and it is on line 9814 for me.

[pgouv]

so i have to manually compress it again.Is it impossible to make this change without code modification ? Does it work well with ipad etc ?

[psmolenski]

@stephenostermiller I am not sure if setting table cells as editable is a right solution. I am afraid that any changes you will make, won't be saved to data source.

@parhs Building Handsontable is very simple. All you have to do is:

1. Clone the repository
2. Download dependencies by running npm install (node.js and npm required)
3. Make changes to the code
4. Run grunt build command
5. Built files will be placed in dist/ directory

For detail see https://github.com/warpech/jquery-handsontable/wiki/Building

[stephenostermiller]

I have tested with TD.setAttribute('contenteditable','true'); on the Ipad. It makes the ipad pop up the keyboard when you click on a table cell so that data can be entered. Then the Ipad behaves identically to other clients. Changes made to cells are saved to the data array backing the table.

[pgouv]

At my android 2.3 didnt work though. @stephenostermiller was there a next button to tab to other cell?

[cwue]

For me it didn't work on Android Chrome 29 either.

I've added an config option: clickBeginsEditing, with it, editing starts with one click. This works for me in Android Chrome 29.

I've added the following code: (lines according to 0.9.16 and jquery.handsontable.full.js )

in HandsontableTextEditorClass.prototype.bindTemporaryEvents (about line 3877) I added the following function:

function onCellClick() {  
    if (cellProperties.instance.getSettings().clickBeginsEditing) {
      that.TEXTAREA.value = that.originalValue;
      that.instance.destroyEditor();
      that.beginEditing(row, col, prop, true);
    }
  }

this.instance.view.wt.update('onCellClick', onCellClick);

(I forgot the last line)

about line 3937 in HandsontableTextEditorClass.prototype.unbindTemporaryEvents (I added the line beginning with -->)

HandsontableTextEditorClass.prototype.unbindTemporaryEvents = function () {
  this.instance.removeHook('beforeKeyDown', this.beforeKeyDownHook);
  this.instance.view.wt.update('onCellDblClick', null);
-->  this.instance.view.wt.update('onCellClick', null); 
};

and on line 8724 in onMouseUp (I added the line beginning with -->)

          clearTimeout(that.instance.dblClickTimeout);
          that.instance.dblClickTimeout = setTimeout(function () {
            that.instance.dblClickTimeout = null;
          }, 500);
        }
      }
-->      if (cell.TD.nodeName=='TD') that.instance.getSetting('onCellClick', event, cell.coords, cell.TD); 
    }
  };

and on line 9783 in WalkontableSettings I added (I added the line beginning with -->)

    onCellDblClick: null,
-->    onCellClick : null, 
    onCellCornerMouseDown: null,

Hope this helps and someone can improve my hacky code.

[stephenostermiller]

cwue: the line you added in HandsontableTextEditorClass.prototype.unbindTemporaryEvents doesn't appear to be pasted in.

It would also help if you put fenced code blocks around the areas of code in your post. The documentation for doing so is here: https://help.github.com/articles/github-flavored-markdown#fenced-code-blocks

[stephenostermiller]

I created a fork for both the contenteditable fix and cwue's android fix https://github.com/stephenostermiller/jquery-handsontable/tree/issue3

Here are the differences, cwue, do your changes look correct? https://github.com/stephenostermiller/jquery-handsontable/compare/issue3

There is a problem with fragment selection:

settings:: fragmentSelection:: constructor:: should allow fragmentSelection when set to true: failed
  TypeError: 'undefined' is not a function (evaluating 'sel.replace(/\s/g, '')') in file:///home/steveo/nassync/projects/jquery-handsontable/test/jasmine/spec/settings/fragmentSelectionSpec.js (line 95) (1)
settings:: fragmentSelection:: dynamic:: should allow fragmentSelection when set to true: failed
  TypeError: 'undefined' is not a function (evaluating 'sel.replace(/\s/g, '')') in file:///home/steveo/nassync/projects/jquery-handsontable/test/jasmine/spec/settings/fragmentSelectionSpec.js (line 158) (1)
609 specs in 24.289s.
>> 2 failures

[cwue]

I forgot one line after the function onCellClick():

this.instance.view.wt.update('onCellClick', onCellClick); (I corrected it in my comment above)

The following fiddle should work: http://jsfiddle.net/fzVur/ But be aware: my solution needs this config option: clickBeginsEditing : true (see fiddle)

And you can test it on every browser: you are in edit mode after clicking on one (editable) cell. It's useful on Android, but perhaps also in some use case on the desktop

[dieOrg]

The code in the fork works for me on iPad - thanks!

1. But editing existing data in a cell is a bit of an issue. It always overwrites existing data. I cant edit/append existing data in a cell from the iPad.
2. Will the ability copy/drag info from one cell to another cell be supported for the iPad?

Will the iPad compatibility code be added to the standard handsontable source in the near future?

[Silenssi]

Has anyone done these fixes on 0.10.1 or 0.10.2? Handsontable has develop quite a lot since 0.9.16, so it's quite hard to test fixes made by cwue and stephenostermiller.

[ghost]

I have adapted the above code for opening the editor on single-click in 0.10.3. I have omitted the contenteditable change for now: https://github.com/csickinger/jquery-handsontable/tree/clickBeginsEditing

as above, set the configuration parameter "clickBeginsEditing : true"

[Silenssi]

Anyone done fixes, like the onecsickinger did, for the 0.11.2. Would be nice if something like this was integrated to the handsontable. Can't update to a newer version without some sort of touch screen support.

[dmvieira]

I did another fork with updated version that work in mobile but without minification of js: https://github.com/labsynapse/jquery-handsontable

[pravin-d]

@dmvieira Hey dude I tried using your clone. It doesn't seem to be working for me. One question, In your patch where are you setting clickBeginsEditing to true ? It seems to be false always I guess

[dmvieira]

I just made modifications in non-minified js.

Yes, you need to use clickBeginsEditing : true when you call js. I'm using here:

    $(table_div_id).handsontable({
        data: orders,
        dataSchema: {
            category_name: null,
            category_id: null,
            name: null,
            quantity: null,
            brand: null,
            description: null
        },
        clickBeginsEditing : true,
        startCols: 4,
        colHeaders: headers,
        stretchH: 'all',
        minSpareRows: 1,
        columns: [{
                type: 'dropdown',
                source: categories_array,
                data: 'category_name'
            },
            {data: 'name'},
            {data: 'quantity'},
            {data: 'brand'},
            {data: 'description'}
        ]
    });

You can see usage here: http://labsynapse.com/bulk

[dmvieira]

I don't know exactly how to do a new version with these modifications, but who want to know changes just look here: https://github.com/labsynapse/jquery-handsontable/pull/1/files

I only did dist/jquery.handsontable.full.js changes because I don't have time to search how to do it in better way. If someone that knows this project strucutre help I can improve it.

[AMBudnik]

We are closing issues related to feature requests to create a full document based on that ideas from all our sources. It is avaiable is our wiki section.

[Sune1337]

Using the viewport*Offset suggestions from #4103 the Handsontable experience om smartphone is alright imo.

There are however scrolling issues with the headers:

• Headers reset after momentum-scroll is done
• Headers do not show after fixed scrolling

jsbin demo

[AMBudnik]

Thanks for sharing @Sune1337

[AMBudnik]

By adding mobile support we should also check https://github.com/handsontable/handsontable/issues/2471 https://github.com/handsontable/handsontable/issues/2542 https://github.com/handsontable/handsontable/issues/4472

[AMBudnik]

As there aren't many comments on closed issues so we decided to reopen the feature requests as Github Discussions.

Please feel free to share any feedback that will allow us to compose the full list of requirements for the proposed change. This issue is very old and it surely needs some updates.