EasyUI Forum
March 28, 2024, 07:53:05 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Datagrid checkboxes: check one if another one is checked also  (Read 39495 times)
andrux
Newbie
*
Posts: 26


View Profile
« on: May 08, 2013, 01:53:51 PM »

Hi, all,

Still trying to get the most out of this great framework!

I have run into this issue. I have a datagrid with a couple of text cells and two checkboxes, view and edit, what I want to accomplish is that when I check the edit box, then the view box is checked automatically. When I uncheck the view box then the edit box gets unchecked as well.

Anyone knows how to do it? I was looking through the documentation but I can't find anything that I can use, I even tried to do the checking manually, and it actually changes the other checkbox value but only for a split second, it then updates from the data source and resets the values - or at least that's what I think happens.

Code:
{field: 'view', title: 'View', width: 50, align: 'center',
editor: {
type: 'checkbox',
options: {
on: 'yes',
off: 'no'
}
}
},
{field: 'edit', title: 'Edit', width: 50, align: 'center',
editor: {
type: 'checkbox',
options: {
on: 'yes',
off: 'no'
}
}
},
{field: 'action', title: 'Action', width: 80, align: 'center',
formatter: function( value, row, index ) {
if ( row.editing ) {
var s = '<a href="#" onclick="saverow( this )">Save</a> ';
var c = '<a href="#" onclick="cancelrow( this )">Cancel</a>';
return s + c;
}
else {
var e = '<a href="#" onclick="editrow( this )">Edit</a> ';
return e;
}
}
}
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: May 08, 2013, 11:43:17 PM »

When a row is editing, you can get editors for 'view' and 'edit' column. Once you get the editor you will be able to get the target editing element and do what you want. Here is the code to accomplish the changing between 'view' and 'edit' column.

Code:
var dg = $('#dg');
dg.datagrid('beginEdit', index);
var ed1 = dg.datagrid('getEditor',{index:index,field:'view'});   // the 'view' editor
var ed2 = dg.datagrid('getEditor',{index:index,field:'edit'});   // the 'edit' editor
$(ed1.target).click(function(){
if (!$(this).is(':checked')){
$(ed2.target).prop('checked',false);
}
});
$(ed2.target).click(function(){
if ($(this).is(':checked')){
$(ed1.target).prop('checked',true);
}
});
Logged
andrux
Newbie
*
Posts: 26


View Profile
« Reply #2 on: May 09, 2013, 07:18:35 AM »

Thank you, stworthy, I have tried that but I'm getting an error of index is not defined

Where should I place this code?

A little background, this datagrid is shown inside a dialog box that pops up when I click the edit button on my main datagrid. So, when I edit the main datagrid, a dialog box pops up with other data to be edited besides this new datagrid. When the dialog box pops up I run the code to create this second datagrid with the checkboxes, and I placed your code inside this same function after calling the $('#dg').edatagrid() method.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 on: May 09, 2013, 07:29:24 AM »

Try the code below:
Code:
$('#dg').edatagrid({
onEdit: function(index,row){
var dg = $(this);
var ed1 = dg.datagrid('getEditor',{index:index,field:'view'});   // the 'view' editor
var ed2 = dg.datagrid('getEditor',{index:index,field:'edit'});   // the 'edit' editor
$(ed1.target).click(function(){
if (!$(this).is(':checked')){
$(ed2.target).prop('checked',false);
}
});
$(ed2.target).click(function(){
if ($(this).is(':checked')){
$(ed1.target).prop('checked',true);
}
});
}
});
Logged
andrux
Newbie
*
Posts: 26


View Profile
« Reply #4 on: May 09, 2013, 08:27:34 AM »

It didn't work.

I created this fiddle to illustrate: http://jsfiddle.net/andruxnet/zD3gM/

I added an alert right when the onEdit function starts to see if it gets fired, but it looks like it's not
Logged
andrux
Newbie
*
Posts: 26


View Profile
« Reply #5 on: May 09, 2013, 08:28:39 AM »

Actually, the alert goes off if I doubleclick the row, but not when I click on Edit
Logged
andrux
Newbie
*
Posts: 26


View Profile
« Reply #6 on: May 09, 2013, 08:54:30 AM »

Ok, it works correctly when I double click the row, but how to attach the onEdit also to the "Edit" link?

Thanks for the help
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #7 on: May 09, 2013, 09:08:56 AM »

It is ok now, please refer to http://jsfiddle.net/zD3gM/3/
« Last Edit: May 09, 2013, 09:13:51 AM by stworthy » Logged
andrux
Newbie
*
Posts: 26


View Profile
« Reply #8 on: May 09, 2013, 09:30:39 AM »

Did you just corrected the id fields from edit to Edit and from view to View?

Because I did those same changes to my site and it still doesn't work when you click the edit link.

I'm actually getting the row data from PHP, the field names in the json object I return from PHP are named with exactly the same case that the ones in the datagrid, probably I need to do something else to my PHP file?
Logged
andrux
Newbie
*
Posts: 26


View Profile
« Reply #9 on: May 09, 2013, 09:31:56 AM »

This is the procedure that returns my records:

Code:
$rows = array();

foreach ( $role_options as $role => $permissions ) {
$row_object = (object) null;

$row_object->{'role'} = $role;
$row_object->{'view'} = $permissions['view'];
$row_object->{'edit'} = $permissions['edit'];

$rows[] = $row_object;
}

echo json_encode( $rows );
Logged
andrux
Newbie
*
Posts: 26


View Profile
« Reply #10 on: May 09, 2013, 10:06:10 AM »

Ok, I replaced my whole script with the one you modified in jsfiddle, using the edatagrid('loadData') method instead of my PHP file and the edit link still does not work...

Any idea why it works on jsfiddle but not in my site? What else can I check?
Logged
andrux
Newbie
*
Posts: 26


View Profile
« Reply #11 on: May 09, 2013, 11:06:28 AM »

I updated my script to not use the url parameter, and created the actual json response I use, it still does not work when you click the edit link, and it does work if you double click.

Here's an updated jsfiddle, now with all columns and rows I actually use - I tried to simplify before with only two columns. It DOES work on jsfiddle, but it does NOT work on my script... the only difference I see is that the whole script is enclosed inside a function - because I need that to correctly follow the logic in my script.. could that be the issue?

http://jsfiddle.net/andruxnet/zD3gM/4/
Logged
andrux
Newbie
*
Posts: 26


View Profile
« Reply #12 on: May 09, 2013, 12:36:13 PM »

I have no idea what happened, but I got it working.

What I did is to copy the source code of the working jsfiddle, commented out everything that wasn't part of my second datagrid, took it out of the dialog box, and after a few more modifications to my existing code, it worked.

Then I put every other part one together, one part at a time, to make sure it still worked, and undo modifications when it didn't, anyway, it's working good now.

Thank you very much, stworthy, I had no idea how to make it work and your code certainly was a life saver!
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #13 on: May 09, 2013, 07:12:43 PM »

The important thing is that calling 'editRow' method will trigger 'onEdit' event but 'beginEdit' not. So you need to replace your code
Code:
jQuery( '#roles-permissions' ).edatagrid( 'beginEdit', getRowIndex( target ) );
with
Code:
jQuery( '#roles-permissions' ).edatagrid( 'editRow', getRowIndex( target ) );
Logged
andrux
Newbie
*
Posts: 26


View Profile
« Reply #14 on: May 09, 2013, 07:16:32 PM »

Cool!

Thanks, I appreciate the help
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!