fedemotta/yii2-gridstack

Gridstack.js widget for Yii2

v1.1 2015-05-04 14:38 UTC

Requires

• bower-asset/gridstack: @dev
• bower-asset/jquery: >= 1.11.0
• bower-asset/jquery-ui: >= 1.11.0
• bower-asset/lodash: >= 3.5.0
• yiisoft/yii2: *

MIT

• Federico Nicolás Motta

• jquery
• plugin
• extension
• responsive
• grid
• yii2
• drag-and-drop
• multi-column
• gridstack
• gridstack.js

README

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'=>[
        'cellHeight'=> 80,
        'verticalMargin'=> 10,
    ],
]);?>

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

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

<?php 
Gridstack::end();
?>

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',
...
];