Guriddo » Topic: checkbox formatting and editing

checkbox formatting and editing

Guriddo
checkbox formatting and editing

This topic has 9 replies, 3 voices, and was last updated 15 years, 10 months ago by tony.

Creator

Topic
May 20, 2010 at 2:52 pm #76284

Asshiah
Participant

Hello,

I have a problem regarding the use of checkbox in a jqGrid.

In fact, I have a column in my grid that can only contain the letters 'O' or 'N'. This is what I get from the server when loading the grid.

The letter 'O' means yes and the letter 'N' means no.

I want this column to display checkboxes in the grid instead of these letters.

The checkboxes should be checked if the letter received from the server is 'O' and the other way round.

I also want these boxes to be clickable in order for the user to be able to click the boxes directly in the grid.

I also want the cell where a checkbox was clicked to be saved to the server instantly.

Also, as I have many columns in my grid, I'd like to be able to use form editing of a row where the input for this column is also a checkbox.

I figured out that in order to display a checkbox in the grid I should use a custom formatter as the column contains non standard input for checkboxes.

A custom formatter also helps define a click event for saving the data to the server.

But I can't figure out how to save the data.

I also have another problem:

When I click on a box in the grid, if the box's state is changed, this is not the case for the corresponding box in the associated edit form.

How can I fix that?

Here is the code I use:

$(document).ready(function() {
Creator

Topic

Viewing 9 replies - 1 through 9 (of 9 total)

Author

Replies
May 20, 2010 at 3:53 pm #94347

tony
Keymaster

Hello,

My first look tell me that you will need to write your custom checkbox element for the form edit and not use the build in one.

It is the same – if your checkbox is not “standart” you will need to do it for the grid display and for the form editing with appropriate custom functions.

Best Regards

Tony

May 20, 2010 at 11:31 pm #94377

bkeszler
Participant

I just went through this myself.

June 9, 2010 at 2:30 pm #94697

Asshiah
Participant

Thank you a lot bkeszler!

I have made some progress thanks to you.

I have stopped trying to enable the checkboxes in the form editing.

I have set the field as non editable and now I just try to make it editable by clicking on the checkbox directly in the grid and sending an AJAX call.

Apparently, everything works just fine.

The only problem is specific to IE (I have tested this on IE8).

While everything is OK with any other navigator, IE8 have some problem with the checkboxes.

If a checkbox is unchecked, I can click on it in the grid in order to check it.

But IE will signal this box as unchecked when proceeding the AJAX call.

If a checkbox is already checked, in IE8, I can't uncheck it, but IE still signals the box as unchecked when proceeding the AJAX call.

I don't have this behaviour in any other navigator.

Here is the code I use:

$(document).ready(function() {

function ajaxSaveUsers(rowid, colid) {

June 11, 2010 at 4:03 pm #94717

Asshiah
Participant

I have no idea as how to solve this problem on IE. Everything works just fine in other browsers (Opera, Safari, Google Chrome, firefox).

And I have to make this work on IE 7 and 8 as per order from my client…

June 11, 2010 at 5:39 pm #94721

Asshiah
Participant

I have made some more test.

It appears than in any navigator except from IE, if a box is checked and I use the getcell method, I will obtain the “O” character.

In IE, I will get the “N” character and using the setcell method to set it to “O” does not seem to work.

June 11, 2010 at 6:35 pm #94725

Asshiah
Participant

In fact, when we are clicking on a box, the unformat method is called.

On every navigator except IE, if a bos is checked and we click on it, the unformat method will return return “O” when on IE it will return “N”.

in IE, $(cellobject).html().indexOf(“checked”,0) will return -1 when its not on other navigator

June 11, 2010 at 6:49 pm #94726

Asshiah
Participant

Ok.

I found the solution.

It seems IE doesn't write checked in the html code of the checkbox input but write CHECKED in CAPS.

So I had to use this code for the unformatter in order for it to work on any navigator:

jQuery.extend($.fn.fmatter.checkboxcustom , {

June 14, 2010 at 3:23 pm #94745

Asshiah
Participant

In fact, this code fixes the problem in IE 8 but not in IE7 because in IE7 the behaviour when clicking a box is not the same.

I also had to use this code in order to work in any current navigator plus IE7:

function ajaxSaveUsers(rowid, colid) {

June 20, 2010 at 11:00 am #94851

tony
Keymaster

Hello,

If I understand right the problem, here is some code from our support DB
Author

Replies