Edit mode in datatable

[emberqParticipant]

I am using datatable and trying to:

1. Add a blank row
2. Blank row has a checkbox, dropdown and text edit
3. Go into edit mode immediately when the blank row is added (i.e., not have to double-click)

Can someone point me to reasonable example or some sample code? Also, I am having trouble displaying the checkbox as a column type ‘checkbox’. I am using column type ‘template’ because I am following an editing example for datatable. Can I display a checkbox in a datatable row as readonly and then go into edit mode with the checkbox on a dbl-click?

[DimitarParticipant]

Hello emberq,

1. You can add a row with the method addRow.
2. The demo Custom Editors shows how to set up different kinds of cell editors.
3. After addRow, call beginRowEdit to enter edit mode immediately.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[emberqParticipant]

I tried that and for the input fields I’ve got on that row (checkbox, dropdownlist and input) I do not see any change in appearance. For example I expect to see the dropdownlist with the default “Please select” showing. For the input I do not see the white input box.

These are mostly custom edits.

Thank you.

[DimitarParticipant]

Hi emberq,

Could you, please, share your code in the form of a jsEditor/JSFiddle example so that we can test it and determine if there is anything wrong with your implementation.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[emberqParticipant]

Thanks, here is the fiddle: http://jsfiddle.net/emberq/w82qyqjj/2/

The issues I have are:

1. Checkbox doesn’t display in the first column. It shows for an instant then is wiped.
2. The controls do not go into edit mode. A double-click is still needed.

My goal is to create a table that always has a blank, editable row open at the bottom. Hope this is possible.

[emberqParticipant]

Sorry – the fiddle is here: http://jsfiddle.net/emberq/w82qyqjj/7/

[DimitarParticipant]

Hi emberq,

I have corrected your fiddle. Here is the updated version that works as expected: http://jsfiddle.net/Dimitar_jQWidgets/x1avgs4n/.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[emberqParticipant]

That looks great – thanks for the help. One thing I noticed is that if I resize the browser page, the table is redrawing and going out of edit mode. I should prevent that if it’s possible.

[emberqParticipant]

Just a bit more info – my actual code (not the simplified fiddle I created) does the same thing – immediately flips out of edit mode. That code resides on a tab that has a splitter. When all is done initializing, that row is not in edit mode. If I dbl-click any cell the whole row immediately goes into edit mode.

It seems like its the same effect as when resizing the browsing page as I mentioned above. Thanks again for the help.

[DimitarParticipant]

Hi emberq,

Every time the widget loses focus (including when the browser window is resized), it also exits edit mode. This is the widget’s intended behaviour.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts