handsontable / handsontable Goto Github PK

Is it possible to integrate existing jQuery tablesorter plugin to perform sorting on handsontable ? if yes, it will be helpful if you highlight what missing in this jsfiddle code http://jsfiddle.net/azizasm/66mFw/

Like is Excel you should be able to select area of fields using SHIFT + arrow keys or SHIFT + mouse click

This option should be configurable (areaSelection: true/false)

Hello,

You think is possible to create a method to put a readOnly input ?

For example, I have to put a readOnly input when I click of a checkbox.

Thanks.

When I am on a cell in editable mode for that cell, Ctrl-A should select the contents of that particular cell. However, it doesn't work that way - Ctrl-A selects the entire table instead. Not the desired behaviour in my view

The latest updates seem to have broken onChange, as it is not firing at all.

It would be nice to be able to reorder the table by dragging column or row headers.

I found an issue more
onKeyDown is checking only alphabet and some characters above all
there is no problem when typing in English
but it was not work for me when typing in Korean

Hi,

Firstly, thanks for this excellent plugin.

I would like know if I can fix the width of table or if a option is available ?

Regards,

I have a read-only column for which I would not like the drag-down border/handle to appear at all when a user clicks a cell in that column. Of course, I do still want the feature for my editable columns. I have tried setting "fillHandle: false" in the legend for my read-only column and setting it to "vertical" for the other columns with no success. How can I achieve this?

Hi !
I try to make visible the row and col headers but I don't see them.
I try my code on JSFiddle and it 's working. So my question is, as I am in a big project with many JS files, what could be the thing that don't allow me to make headers ?

Is there any conflict with other JQuery library for doing headers ?

Thanks.

$("#example1grid").handsontable({
rows: 5,
cols: 10,
rowHeaders: true,
colHeaders: ["Organism", "Strain", "Sexe", "Age", "Age unit", "Genotype", "Target Gene", "Treatment", "Replicate", "Comments"],
minSpareRows: 1
});

I just tested it dose not support CTRL + click Select Multiple Cells,
press the “CTRL” key and hold. While pressing “CTRL,” left-click on the cells that you wish to select.
if support this feature, that will be greate!

How would I go about allowing only numbers to be input? I tried the following in the onChange event, but I'm not sure how to call the line: "this.editproxy.finishEditing(true);" or if there is maybe a better way.

handsontable is awesome and I'd like to thank you for creating such a lightweight javascript spreadsheet!

onChange: function (data) {
if (first) {
first = false;
return;
}
$("#dataTable-console").text(JSON.stringify(data));
var newValue = data[0][3];
if(isNaN(newValue)) {
alert("only numbers allowed!");
alert(data[0][0] + '\t' + data[0][1] + '\t' + data[0][2]);
this.editproxy.finishEditing(true);
}
}

Currently it works 100% in Chrome, 90% in Firefox and breaks up in IE8

Should work well in Chrome, Firefox, IE8. Later it should be also proved to work in IE9, Opera and Safari.

How to set the width of each column., thanks ?

HTML tag is working

<script> , <asdf> , &nbsp; ... 

I think you have to add the code about encoding

I would like to resize column width like excel.

Hello,

The plugin works great in firefox. But if I have a few rows in the table it seems like clicking something on the cell scroll to the top in Internet explorer 9. I tried to debug the code but couldn't identify the root cause. This issue can be reproduced on the demo page as well.

http://warpech.github.com/jquery-handsontable/

Try pasting the following data in the grid and click one of the bottom rows. You will notice scroll bar jumps to the top. Also sometimes i notice a range of cells is automatically selected when you click a cell. Again happens only in IE 9

1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
10 10
11 11
12 12
13 13
14 14
15 15
16 16
17 17
18 18
19 19
20 20
21 21
22 22
23 23
24 24
25 25
26 26
27 27
28 28
29 29
30 30
31 31
32 32
33 33
34 34
35 35
36 36
37 37
38 38
39 39
40 40
41 41
42 42
43 43
44 44
45 45
46 46
47 47
48 48
49 49
50 50
51 51
52 52
53 53
54 54
55 55
56 56
57 57
58 58
59 59
60 60
61 61
62 62
63 63
64 64
65 65
66 66
67 67
68 68
69 69
70 70
71 71
72 72
73 73
74 74
75 75
76 76
77 77
78 78
79 79
80 80
81 81
82 82
83 83
84 84
85 85
86 86
87 87
88 88
89 89
90 90
91 91
92 92
93 93
94 94
95 95
96 96
97 97
98 98
99 99
100 100
101 101
102 102
103 103
104 104
105 105
106 106
107 107
108 108
109 109
110 110
111 111
112 112
113 113
114 114
115 115
116 116
117 117
118 118
119 119
120 120
121 121
122 122
123 123
124 124
125 125
126 126
127 127
128 128
129 129
130 130
131 131
132 132
133 133
134 134
135 135
136 136
137 137
138 138
139 139
140 140
141 141
142 142
143 143
144 144
145 145
146 146
147 147
148 148
149 149
150 150
151 151
152 152
153 153
154 154
155 155
156 156
157 157
158 158
159 159
160 160
161 161
162 162
163 163
164 164
165 165
166 166
167 167
168 168
169 169
170 170
171 171
172 172
173 173
174 174
175 175
176 176
177 177
178 178
179 179
180 180
181 181
182 182
183 183
184 184
185 185
186 186
187 187
188 188
189 189
190 190
191 191
192 192
193 193
194 194
195 195
196 196
197 197
198 198
199 199
200 200

by @kimwz:

it's awesome plugin and very useful

i have some questions

1. I think this condition "if (!priv.isCellEdited)" must cover below codes
   case 36: /* home / ...
   case 35: / end */ ...
2. why you don't check this keys '"[]\ ( keycode : 219 ~ 222) in function onKeyDown
   is there some reason?

onCut , onPaste events needs a condition " if (!priv.isCellEdited) "

Firstly, this is a fantastic plugin. Not a criticism, but I believe this is a bug, where cells have Alt+Enter in them in EXCEL data when cut and paste from EXCEL it creates multiple rows one for each Alt+Enter and separates the data into new rows based on this. EXCEL users often do this to format a single cell of data with returns in the text and this is not a new row when present. If this was fixed our company would be ecstatic at what this grid does for us re allowing load of spread sheet data without spread sheets! This is a great plugin, if it does what we want I'd say we will definitely be willing to donate.

Hi!

You really created an awesome plugin, thank you very much for hosting it on github.

I found a small usability issue: currently it is not possible to switch to the table cell left/right of the cell I am currently editing using the arrow keys. Of course this is a minor issue, but I guess people will expect that to work the same way it does in Google docs or Excel.

Cheers Andreas

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

It doesn't work with twitter bootstrap-responsive.css
Here is the example link. http://jsfiddle.net/tevfik/mJVpA/

Try to remove bootstrap-responsive.css from "Manage Resources". It's working.

Pressing Esc when an autocomplete menu is visible causes the current cell to be de-focused, but does not hide the autocomplete menu. Pressing Esc again causes the autocomplete menu to disappear. Obviously both these should be happening with just one Esc key press.

Keep up the good work!

It would be great if we could paste cells with row or col spans from open office and have method to create/remove them in the editor itself.

My english is poor, hope you can understand to it:
in jquery.handsontable.js , highlight, on

containerOffset = last.parent().parent().offset();

I think it should be:

containerOffset = last.parent().parent().parent().parent().offset();

I think containerOffset should be the offset of $("#dataTable") ( or $("#dataTable2")...), not tbody.
I think you can store $("#dataTable") ( or $("#dataTable2")...) in priv,then you can write in this way:

containerOffset = priv.xxxx.offset();

Maybe I am wrong.

PS: This plugin is cool!

Steps:

1. Click a cell that has neighbors above and to the right or left of it that have contents
2. Drag up and to the left or right to select that cell and it's neighbors
3. Type something

Result:

Now the original cell has what you typed and it's original contents, along with the contents of the cells to the left or right, as well as the contents of all but the top-most row of selected cells.

System:

I'm using Chrome on Win 7.

if add cell function such as avg,sum,min,max,count and and can write formula for cell that result calculate form some cells is will bestest jquery excel plugin. you can use jquery.calculation plugin and suggest rename plugin to jquery.excel

Hi,

Is it possible to stop creating new columns in the end on Tab press. Please suggest.

Thanks

I would like to ask you the following questions;

How get select rows or columns index?
Do you have callback method return select rows or columns array index?

Hi!

You really created an awesome plugin. Thanks.

With reference to question in StackOverflow I would like to suggest to have cell focus method with parameter on row and column. With this method, it will give additional control to this plugin.

Regards
Azi

I suggest removing initial empty rows as well

  parsePasteInput: function (input) {
    var rows, r, rlen;

    //if (input.indexOf("\t") > -1) { //Excel format
input.replace(/^[\r\n]*/g, ''); //remove newline from start of the input
    input.replace(/[\r\n]*$/g, ''); //remove newline from end of the input
    rows = input.split("\n");

Also when you paste a table then repaste it straight away it shifts down one row then up and..

guess Math.min(priv.selStart.row, priv.selEnd.row)
in is inaccurate. Haven't looked at it tho yet.

Great stuff Marcin,
Cheers

In "Autocomplete" example, when the user want to select an item (for example in column "Car") :

• when he presses "Enter", the item is selected and copied in the input cell : OK, but the focus goes to cell below.
• when he presses "Tab", the item is copied in the NEXT input instead of the current input : BUG ?

colsHeaders be off to the side When Autocomplete Demo sees by Chrome.

I saw there is an example for scrollable of table, and I want to know if it can support the legend or header fixed, so that I can see the header always. And I think when scroll horizontal, if the header can move in keep with the scroll bar will be better.

I want to write some validate method for the handson table, example is blow

You can see the age column should be number, but when I define a validate method to validate this column, The First row can not be rendered.

I looked up the source, I found the Legend row is surrounded by TR element, I think it should be surrounded by TH element

Copy and paste must work well for Excel, Open Office Calc and Google Docs Spreadsheets. Not only single field but also copy and paste of whole areas.

Currently only works paste from Excel.

I would like to convert context menu messages to japanese messages.
I can convert with jquery,but if That's possible, I'd like you to add option for context menu messages setting.

When a user enters input that is not allowed (text instead of numeric), a query-ui modal dialog box appears to warn them. After this box closes, I would like to select/focus the cell (instead of moving to the next cell - assuming they hit Enter). I have tried the following, but with no visible affect: $('div.handsontableInputHolder').click(); or $('div.handsontableInputHolder').focus();

Am I missing something simple (which is quite possible since I'm new to jQuery/javascript) or perhaps could a public method be added to select a cell? Thanks!

Please see my onChange event handler below for reference.

onChange: function (data) {
if (first) {
first = false;
return;
}
var newValue = data[0][3];
if(isNaN(newValue)) {
$("#dataTable").handsontable("setDataAtCell",data[0][0], data[0][1], data[0][2]);
dialogBox('Input Error', 'Only numbers are allowed. No text.');
//need code here to select/put focus back on cell: data[0][0], data[0][1](the cell where the bad input was entered)
//neither $('div.handsontableInputHolder').click(); nor $('div.handsontableInputHolder').focus(); works
} else {
var temp = [data[0][0], data[0][1], newValue];
alert(temp);
}
}

It's show up when you type something. Tested in Chrome.

If I select two cells with values 2009 and 2010, and drag to one cell down, I expect a new value of 2011. Instead, I get 2009.

Hi,

First of all thanks for this nice control. Its really very great excel like web tool.

Actually I was exploring this nice tool and in the process I came through that when we copy multiple rows from one MS Excel sheet and paste those into this control only one hit to the OnChange defined event raised. Will you please guide me how this can be achived in this control. Actually I want to raise this event for the all rows that I am going to paste there. Thanks in advance.

Thanks

That would be really cool to add copy/cut/paste in context menu, but I cannot find a good way to do it. I found resources that describe how to do it with Flash (which I would like to avoid):

• http://googlesystem.blogspot.com/2012/03/google-docs-and-clipboard-access.html
• http://brooknovak.wordpress.com/2009/07/28/accessing-the-system-clipboard-with-javascript/

I have tested Google Docs with Flash disabled (in Chrome and FF) and copy/paste from context menu worked like a charm. So there must be a way. Any ideas?

I'm not sure if this is the intended behavior of getData, but it doesn't feel right to me. If I call getData, I get a reference to the grid's data array. The result being that if the grid is modified, my array get modified. Example:

var data1 = [ [1,2,3],[4,5,6],[7,8,9]];
var data2 = [ ['a','b','c'],['d','e','f'],['g','h','i']];

$("#inputGrid").handsontable("loadData", data1);

var data3 = $("#inputGrid").handsontable("getData");
// data3[0][0] returns 1

$("#inputGrid").handsontable("loadData", data2);
// data3[0][0] returns 'a'


//The fix is as easy as changing getData to:
this.getData = function () {
        return $.extend(true,[],datamap.getAll());
};

I made a jsfiddle too http://jsfiddle.net/SZFev/4/

I would like to sort by columns value when you press left-click on colHeaders.

If number of columns in pasted (from text) > cols additional cols are discarded (before minSpareCols was implemented) only one additional col is added per paste (after minSpareCols).

Should be an easy fix but I can't put my finger on it.

I need to lock the header row and the first column. Is that possible?

When calling .handsontable("updateSettings") and supplying a new value for column / row headers it does not update the grid.

Hi there, I hope this isn't too strange, but since you seem to be able to do what I need to, I hope you can provide some guidance so I can do the same thing.

How do you get the nice table formatting of the options in your project's README.MD file to work? Was there some special configuration you had to do to your Github account or to the project itself? I looked at the code view of your README and saw the text formatting for tables and I duplicated it in my own, but it just doesn't render for my project. Even when I forked your project, the table formatting disappears from the README on my version. Googling hasn't helped. Reviewing Markdown documentation hasn't helped. It is very confusing!

I'm a noobie to GitHub and things like this have been particularly frustrating as there seems to be no documentation. Any insight you could offer would be greatly appreciated. And sorry for bothering you about this since it's a bit off topic from your project's issues, but since you seem to be the brilliant one who's figured it out, I thought it couldn't hurt to ask.

Thanks for any advice on how to make the tables work!