Gridstack.js widget for Yii2 ¶

This extension provides the Gridstack.js integration for the Yii2 framework.

Installation ¶

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist fedemotta/yii2-gridstack "*"

or add

"fedemotta/yii2-gridstack": "*"

to the require section of your composer.json file.

Usage ¶

Use Gridstack.js as any other other Yii2 widget.

use fedemotta\gridstack\Gridstack;

<?php
$gridstack = Gridstack::begin([
    'options'=>['class'=>'grid-stack'],
    'clientOptions'=>[
        'cell_height'=> 80,
        'vertical_margin'=> 10,
    ],
]);

echo $gridstack->beginWidget(['class'=>'grid-stack-item','data-gs-width'=>"4",'data-gs-height'=>"2",'data-gs-x'=>"0",'data-gs-y'=>"0",]);
?>

[html]
<div class="grid-stack-item-content"></div>

<?php
echo $gridstack->endWidget();

echo $gridstack->beginWidget(['class'=>'grid-stack-item','data-gs-width'=>"4",'data-gs-height'=>"4",'data-gs-x'=>"4",'data-gs-y'=>"0",]);
?>

[html]
<div class="grid-stack-item-content"></div>

<?php
echo $gridstack->endWidget();

Gridstack::end();
?>

<?php
//You can also use Gridstack.js in the JavaScript layer of your application. To //achieve this, you need to include Gridstack as a dependency of your Asset file.

public $depends = [
...
'fedemotta\gridstack\GridstackAsset',
...
];
?>

Resources ¶

• Github Page
• Packagist Page
• Demo Page