add event when checkbox in column clicked

Questionsadd event when checkbox in column clicked
Sameer asked 4 years ago

Requirement is, there should be a checkbox in the listing but it should not view in add / edit for only in Grid Listing. on clicking this checbox i have to fire a javascript code that is an ajax which takes that checkbox value and particular that ID and saves in the database accordingly.

Please take care of this that event or function should be called when that check box is click i.e being checked or unchecked even after pagination or refreshes or after searching from column. that is everytime

Also there is another checbox column which first column, which does that functionality of select All / Unselect All.

Also can it be possible to provide a class to that checkbox with id ?

My Code is :

//Chk

$col = array();
$col["title"] = "Flag";
$col["name"] = "flag";
$col["dbname"] = "flag";
$col["width"] = "200";
$col["align"] = "center";
$col["search"] = false;
$col["sortable"] = false;

$col["formatter"] = "checkbox";
$col["formatoptions"] = array("value"=>"1:0" , defaultValue=> '{flag}' );
$col["formatoptions"]["disabled"] = false;
$col["formatoptions"]["onclick"] = "alert( 'asd' )";
$cols[] = $col;
//Chk+++

4 Answers
Abu Ghufran answered 4 years ago

Please refer this demo, and the options for 'closed' column. This uses checkbox and fire ajax call on click.

$col["name"] = "closed";

http://pastebin.com/iJTQYkKn

For class on checkbox, you can use ".cbox { … }"
Inspect grid checkbox element using firebug for more details.

Talha answered 4 years ago

AoA Abu Ghufran,

I have come across the similar situation of working with a couple of check-boxes in the grid, and those could be updated on the fly just clicking in the grid and not taking the aid of "Edit" and then "Save" process which is currently in place.

I have plugged in the sample code from the demo above, it works fine, but for some reason is it updating the "OTHER" records as well.

The case is like this.
———————-
Database table has 4 columns
User ID | Field_ID | Editable | Searchable

Editable and Searchable are check-box type field. So what happens is, when I update Editable or Searchable for any field (for a particular user) it updates the same fields for the other users as well.

Looking forward to hearing from you soon.

Many Thanks,
Talha

Talha answered 4 years ago

+ Continued

I think I need to elaborate a bit further.

Database table structure:
——————————————
User ID | Field_ID | Editable | Searchable
——————————————
1111111 | 20000001 | 1 | 1
1111111 | 20000002 | 0 | 1
1111111 | 20000003 | 0 | 1
1111111 | 20000004 | 1 | 1

2222222 | 20000001 | 1 | 1
2222222 | 20000002 | 0 | 1
2222222 | 20000003 | 0 | 1
2222222 | 20000004 | 1 | 1

The SELECT Query:
——————————————
$g->select_command =
"SELECT user_rigths.field_id , fields.field_name, fields.field_lable , user_rigths.visible , user_rigths.editable
FROM user_rigths, fields WHERE user_rigths.field_id = fields.id AND user_rigths.user_id = ". $userID;

Note: "$userID" is coming from the Query string (from the other page) as this Grid window is made to open as a popup/ new window on mouse click event.

The Grid/UI Columns
——————————————
Field ID (Belongs to fields table as PK and FK in user rights table) (Hidden)
Field Name (Belongs to fields table) (Visible)
Editable (Belongs to user rights table) (Visible)
Searchable (Belongs to user rights table) (Visible)

Please let me know if that helps to explain my issue.

Many thanks,
Talha

Abu Ghufran answered 4 years ago

Unless i see complete code, its very hard to identify the issue.
In demo code, the code segment do the work:

function updateRow(id, checked)
{
// call ajax to update date in db
var request = {};
request['oper'] = 'edit';
request['id'] = id; // must be pk of table – unique

if (checked)
request['closed'] = 1;
else
request['closed'] = 0;
….
}

What ever is passed to 'request' js variable (except oper and id), it will be updated. It does not rely on what is editable or not.

Your Answer

12 + 5 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating / 5. Vote count:

We are sorry that this post was not useful for you!

Let us improve this post!