Ok, I couldn't make it work in the fiddle, but I got it to work on my project with the code below, just in case anyone else is looking for the same:

Code:

		$( document ).on( 'keyup', '.filtro', function() {
			var filtro = $( this ).val();
			var campoFiltro = $( this ).closest( 'td' ).attr( 'field' );
			var registros = $( '#listado-atenciones' ).datagrid( 'getData' ).originalRows;

			while ( $( '#listado-atenciones' ).datagrid( 'getRows' ).length > 0 )
				$( '#listado-atenciones' ).datagrid( 'deleteRow', 0 );

			for ( var i = 0; i < registros.length; i++ ) {
				if ( registros[ i ][ campoFiltro ].toLowerCase().indexOf( filtro.toLowerCase() ) != -1 ) {
					$( '#listado-atenciones' ).datagrid( 'appendRow', registros[ i ] );
				}
			}
		});

Hi,

I built a datagrid from an HTML table, and I want to implement filtering on the headers. I was able to get the filters to work partially, meaning as I type the rows are being correctly filtered, but, if I delete a character in my filter input field, all rows I get are the ones that were filtered before, so the ones filtered out before are not coming back to the grid.

I tried calling the datagrid() method again and that returns all items, but I then lose what I have entered in my filter field. You can see this by entering a "p" and then an "e", it will show only two items, but if you delete the "e" it stays those two items.

Any help will be greatly appreciated.

Here's a working fiddle for that

http://jsfiddle.net/9BxCH/1/

Thank you guys!

Thank you, stworthy, it worked! All I needed was to use the combobox.js file you suggested!

Thanks, I'll give it a try

[Cannot read property 'value' of undefined]

Great, this thread helped me get the group feature working!

I would like to ask something about this, though, how do you add also items with no group?

I tried a couple variations including the one below but they don't work, I get a Cannot read property 'value' of undefined error.

Code:

var data = [
	{group:'Group1',items:[
		{value:'v11',text:'Option11'},
		{value:'v12',text:'Option12'},
	]},
	{group:'Group2',items:[
		{value:'v21',text:'Option21'},
	]},
	{value:'gl',text:'Groupless'},
];

Thanks for any help

I just tested and it does work, I don't know why I had problems with this before, I probably just did something wrong...

Anyway I removed my str_replace solution and I used this instead, adding the string to the $row object while fetching the record, it works just as good as the formatter options for me:

Code:

	$response = array();
	$response['total'] = $row_count;

	$items = array();

	while ( $row = mysqli_fetch_object( $result ) ) {
		$row->queryId = '12345';
		$items[] = $row;
	}

	$response['rows'] = $items;

	echo json_encode( $response );

Thank you, guys

I don't understand what you mean for option 1

About option 2, I tried using the formatter but my static string only showed when in edit mode. Also, I'm loading via javascript

Yes, I see the difference, but it's working like this so I'll just leave it like that.

Thank you

Thanks, Joe, but it didn't work.

What I ended up doing is modifying the deleterow function like this:

Code:

	function deleterow( target ) {
		$.messager.confirm( 'Confirm', 'Are you sure you want to delete this record?', function( r ) {
			if ( r ) {
				var data = {};
				data.rows = $( '#dg' ).datagrid( 'getRows' )[ getRowIndex( target ) ];

				$.post( 'destroy.php', data, function( response ) {
					if ( response == 'success' )
						$( '#dg' ).datagrid( 'deleteRow', getRowIndex( target ) );
				});
			}
		});
	}

Thank you all

yup,it worked... I just hope none of the queries break my little hack

I did it by doing a search and replacement in my query, like this: $query = str_replace( 'from', ', \'' . $_GET['id'] . '\' as queryId from', $options[ $_GET['id'] ]['query'] );

so that a query like "select * from wp_options" would end up like "select *, '12345' as queryId from wp_options"

Thanks for the help Joe, if you come up with another way of doing it via Javascript I'd appreciate it.

Thank you, Joe, but I have all my data loaded from a MySQL query, I just want the first column with a static string, and since the query is dinamically selected, I can't just put the string inside the query... actually... I might be able to...

Cool!

Thanks, I appreciate the help

This one should be easy, I want to add a column to my datagrid where the field value is just a static string. I used the formatter option but it only works when you edit the grid - and I want it to always be there.

Anyone knows how to accomplish this via javascript initialization?

Attached is a screenshot of what I want, it's the first column the one I want to be always the same.

Thanks

Hello again.

I'm trying to get my datagrid to update and delete records from the database, but I run into the problem that the destroyUrl property is not working. I haven't put all logic inside my destroy.php file to actually delete a record, I wanted to try something simple before that, just update a record in the database with 'test delete succeeded', so that I rule out everything else.

The updateUrl correctly updates the database with 'test update succeeded', but the destroyUrl is not doing anything.

I have my datagrid initialized like this:

Code:

	jQuery( document ).ready( function ( $ ) {
		$( '#dg' ).edatagrid({
			url: 'get.php',
			updateUrl: 'update.php',
			destroyUrl: 'destroy.php',
			title: 'my datagrid',
			width: 'auto',
			height: '400',
			pagination: true,
			singleSelect: true,
			idField: 'option_id',
			fitColumns: true,
			rownumbers: true,
			sortName: 'option_id',
			sortOrder: 'asc',
			pageSize: 10,
			pageList: [ 10, 20, 30 ],
			columns: columnsArray,
			onBeforeEdit: function( index, row ) {
				row.editing = true;
				updateActions( index );
			},
			onAfterEdit: function( index, row ) {
				row.editing = false;
				updateActions( index );
			},
			onCancelEdit: function( index, row ) {
				row.editing = false;
				updateActions( index );
			}
		});
	});

	function updateActions( index ) {
		jQuery( '#dg' ).datagrid( 'updateRow', {
			index: index,
			row: {}
		});
	}

	function getRowIndex( target ) {
		var tr = jQuery( target ).closest( 'tr.datagrid-row' );
		return parseInt( tr.attr( 'datagrid-row-index' ) );
	}

	function editrow( target ) {
		jQuery( '#dg' ).datagrid( 'beginEdit', getRowIndex( target ) );
	}

	function deleterow( target ) {
		jQuery.messager.confirm( 'Confirm', 'Are you sure you want to delete this record?', function( r ) {
			if ( r ){
				jQuery( '#dg' ).datagrid( 'deleteRow', getRowIndex( target ) );
			}
		});
	}

	function saverow( target ) {
		jQuery( '#dg' ).datagrid( 'endEdit', getRowIndex( target ) )
	}

	function cancelrow( target ) {
		jQuery( '#dg' ).datagrid( 'cancelEdit', getRowIndex( target ) );
	}

Am I missing something here?

Thank you in advance for your help.

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!