Print Page - Datagrid checkboxes: check one if another one is checked also

Title: Datagrid checkboxes: check one if another one is checked also
Post by: andrux 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;
			}
		}
	}

Title: Re: Datagrid checkboxes: check one if another one is checked also
Post by: stworthy 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);
	}
});

Title: Re: Datagrid checkboxes: check one if another one is checked also
Post by: andrux 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.

Title: Re: Datagrid checkboxes: check one if another one is checked also
Post by: stworthy 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);
			}
		});
	}
});

Title: Re: Datagrid checkboxes: check one if another one is checked also
Post by: andrux 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

Title: Re: Datagrid checkboxes: check one if another one is checked also
Post by: andrux 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

Title: Re: Datagrid checkboxes: check one if another one is checked also
Post by: andrux 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

Title: Re: Datagrid checkboxes: check one if another one is checked also
Post by: stworthy on May 09, 2013, 09:08:56 AM

It is ok now, please refer to http://jsfiddle.net/zD3gM/3/

Title: Re: Datagrid checkboxes: check one if another one is checked also
Post by: andrux 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?

Title: Re: Datagrid checkboxes: check one if another one is checked also
Post by: andrux 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 );

Title: Re: Datagrid checkboxes: check one if another one is checked also
Post by: andrux 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?

Title: Re: Datagrid checkboxes: check one if another one is checked also
Post by: andrux 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/

Title: Re: Datagrid checkboxes: check one if another one is checked also
Post by: andrux 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!

Title: Re: Datagrid checkboxes: check one if another one is checked also
Post by: stworthy 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 ) );

Title: Re: Datagrid checkboxes: check one if another one is checked also
Post by: andrux on May 09, 2013, 07:16:32 PM

Cool!

Thanks, I appreciate the help

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: andrux on May 08, 2013, 01:53:51 PM