Id Name Link Inserted Status Action
1 6r0xliyalt 6. 2. 2015
2 ozl4gy9udu 6. 2. 2015
3 9i20xsrese 6. 2. 2015
4 yk95ak88ra 6. 2. 2015
5 2loxs05egs 6. 2. 2015
6 wzrdlu2o0v 6. 2. 2015
7 401nd5xv80 6. 2. 2015
8 qeba0t2ovv 6. 2. 2015
9 el25id2emd 6. 2. 2015
10 vmkppicf1z 6. 2. 2015
( Items: 1 - 10 from 200 )

Show me the code of this datagrid

public function createComponentEditableGrid($name)
{
	/**
	 * @var Ublaboo\DataGrid\DataGrid
	 */
	$grid = new DataGrid($this, $name);

	$grid->setDataSource($this->db->select('*')->from('ublaboo_example'));

	/**
	 * Columns
	 */
	$grid->addColumnNumber('id', 'Id')
		->setSortable()
		->setAlign('left');

	$grid->addColumnText('name', 'Name')
		->setSortable()
		->setEditableCallback(function($id, $value) {
			$this->flashMessage("Id: $id, new value: $value");
			$this->redrawControl('flashes');
		})->addAttributes(['class' => 'text-center']);

	$grid->addColumnLink('link', 'Link', 'this#demo', 'name', ['id', 'surname' => 'name'])
		->setEditableValueCallback(function($row) { return $row->name; })
		->setEditableCallback(function($id, $value) {
			$this->flashMessage("Id: $id, new value: $value");
			$this->redrawControl('flashes');

			$link = Html::el('a')->href($this->link('this#demo', ['id' => $id]))
				->setText($value);

			return (string) $link;
		})->addAttributes(['class' => 'text-center']);

	$grid->addColumnDateTime('inserted', 'Inserted');

	$grid->addColumnStatus('status', 'Status')
		->addOption(1, 'Online')
			->setClass('btn-success')
			->endOption()
		->addOption(2, 'Standby')
			->setClass('btn-primary')
			->endOption()
		->addOption(0, 'Offline')
			->setClass('btn-danger')
			->endOption()
		->onChange[] = [$this, 'changeExampleStatus'];

	/**
	 * Some action
	 */
	$grid->addAction('delete', '', 'delete!')
		->setIcon('trash')
		->setTitle('Delete')
		->setClass('btn btn-xs btn-danger ajax')
		->setConfirm('Do you really want to delete example %s?', 'name');

	/**
	 * Big inline editing
	 */
	$grid->addInlineEdit()
		->onControlAdd[] = function($container) {
			$container->addText('name', '');
			$container->addText('inserted', '');
			$container->addText('link', '');
			$container->addSelect('status', '', [
				'0' => 'Offline',
				'1' => 'Online',
				'2' => 'Standby'
			]);
		};

	$grid->getInlineEdit()->onSetDefaults[] = function($container, $item) {
		$container->setDefaults([
			'id' => $item->id,
			'name' => $item->name,
			'inserted' => $item->inserted->format('j. n. Y'),
			'link' => $item->name,
			'status' => $item->status,
		]);
	};

	$grid->getInlineEdit()->onSubmit[] = function($id, $values) {
		/**
		 * Save new values
		 */
		$this->flashMessage('Record was updated! (not really)', 'success');
		$this->redrawControl('flashes');
	};

	$grid->getInlineEdit()->setShowNonEditingColumns();
}

Inline editing

Small inline editing

Small inline editing

As you can see in the example above (or on the homepage), there is column name and it is editable. You can click on the column cell and a textarea will appear. Then on 'blur', ajax request is sent and your callback is fired.

/**
 * Example callback
 */
$grid->addColumnText('name', 'Name')
	->setSortable()
	->setEditableCallback(function($id, $value) {
		echo("Id: $id, new value: $value"); die;
	});

/**
 * Or you can do that properly
 */
$grid->addColumnText('name', 'Name')
	->setEditableCallback([$this, 'columnNameEdited']);

Different input types and element attributes

Small inline edit is not limited to textarea, you can you input of type of your choice (that input will be submitted with either blur or submit (enter press) event). Example usage:

$grid->addColumnText('name', 'Name')
	->setEditableCallback(/**...*/)
	->setEditableInputType('text', ['class' => 'form-control']);

Or you can use a select:

$grid->addColumnText('name', 'Name')
	->setEditableCallback(/**...*/)
	->setEditableInputTypeSelect([
		0 => 'Offline',
		1 => 'Online',
		2 => 'Standby'
	]);

Small inline editing can be canceled by pressing escape key.

Render different content then is edited

Small inline editing - different content

As you can see in the demo above, you can edit the link column but actually, only the link text will be edited. That you can achieve by following code:

$grid->addColumnLink('link', 'Link', 'this#demo', 'name', ['id'])
	->setEditableValueCallback(function($row) { return $row->name; })
	->setEditableCallback(function($id, $value) {
		$link = Html::el('a')->href($this->link('this#demo', ['id' => $id]))
			->setText($value);

		return (string) $link; // Important line - right here you have to return new content which will be rendered in edited column
	});

Big inline editing

This one is much more powerful:

Big inline editing

Example useage:

/**
 * @var Ublaboo\DataGrid\DataGrid
 */
$grid = new DataGrid($this, $name);

/**
 * Big inline editing
 */
$grid->addInlineEdit()
	->onControlAdd[] = function($container) {
		$container->addText('id', '');
		$container->addText('name', '');
		$container->addText('inserted', '');
		$container->addText('link', '');
	};

$grid->getInlineEdit()->onSetDefaults[] = function($container, $item) {
	$container->setDefaults([
		'id' => $item->id,
		'name' => $item->name,
		'inserted' => $item->inserted->format('j. n. Y'),
		'link' => $item->name,
	]);
};

$grid->getInlineEdit()->onSubmit[] = function($id, $values) {
	/**
	 * Save new values
	 */
};

What happens after editing

By default, after submitting inline edit, the row is redrawed and the green animated background is triggered. Bud if you want to do something else, you can, just create new listener to event InlineEdit::onCustomRedraw():

/**
 * This callback will redraw the whole grid
 */
$grid->getInlineEdit()->onCustomRedraw[] = function() use ($grid) {
	$grid->redrawControl();
};

Show non editing Columns

If you don't want to set all columns editable, you may want to show these columns normally rendered:

$grid->getInlineEdit()->setShowNonEditingColumns();
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tím souhlasíte. V pořádku Další informace