Yii 2 Sortable Input

Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the kartik-v/yii2-sortable extension which in turn depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

An input widget for Yii 2.0 widget based on the yii2-sortable extension that allows you to create sortable-input lists and grids and manipulate them using simple drag and drop. It extends the yii2-sortable features by allowing you to store the sort order in a form input (which is hidden by default). The widget stores the order as delimited list item keys. The widget includes additional jQuery enhancements to initialize the list, trap sortable order change, and reset order on form reset.

The preferred way to install this extension is through composer. Either run:

$ php composer.phar require kartik-v/yii2-sortable-input "*"

or add:

"kartik-v/yii2-sortable-input": "*"

to the require section of your composer.json file. Then run:

php composer.phar update

to get the updated package on your application install.

The SortableInput widget supports all the parameters similar to the \yii\widgets\InputWidget widget. In addition, the widget allows you to configure the following properties:
  • sortableOptions: array, the widget options for the kartik\sortable\Sortable widget. Refer the yii2-sortable documentation for usage. All widget options except the items property can be passed. The items configuration will be generated through the items property within this widget.

  • delimiter: string, the delimiter that will be used for separating the id key values to store the sorted values in the hidden input. Defaults to ,.

  • items: array, the sortable data list. This, will be used to render the Sortable list and store the sortable keys. You must set it up as $key => $value format, where:

    • key: int/string, the unique identifier (key) for the item, which will be internally stored.

    • value: array, is the configuration for the items array in sortable widget and can consist of the following properties:

      • content: string, the content to display for the item (this is not HTML encoded). If this is not set, it will default the key value.

      • disabled: boolean, whether the list item is disabled.

      • options: string, the HTML attributes for the list item. This will be merged with and override the itemOptions property set within sortableOptions.

  • hideInput: bool, whether to hide the input that stores the delimited sort order keys. Defaults to true. If set to false, this will generate a text input.

  • options: array the HTML attributes for the input tag. Defaults to ['class' => 'form-control'].

  • Item # 1
  • Item # 2
  • Item # 3
  • Item # 4
  • Item # 5
Scenario # 1: Basic horizontal sortable-input with ActiveForm. Display the stored value of the delimited sort order and set it to readonly.

  • Item # 1
  • Item # 2
  • Item # 3
  • Item # 4
  • Item # 5
Scenario # 2: Advanced usage without ActiveForm or model and hide the stored value. Style your sortable content and disable certain values in the list from sorting.

  • Item # 3
  • Item # 4
  • Item # 2
  • Item # 1
  • Item # 5
Scenario # 3: Extend scenario # 2 to show how items automatically reorder based on initial value passed. Also any reordered values are reset, when the form is reset (after reordering, click reset button below to check).

  • Item 0
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
Scenario # 4: Advanced usage with Sortable widget option styles. For example render a grid layout instead of a list. Note, if you do not pass the keys, the default array keys will be used.
use kartik\sortinput\SortableInput;

// Scenario # 1: Basic horizontal sortable-input with ActiveForm. Display
// the stored value of the delimited sort order and set it to readonly.
echo $form->field($model, 'sort_list')->widget(SortableInput::classname(), [
    'items' => [
        1 => ['content' => 'Item # 1'],
        2 => ['content' => 'Item # 2'],
        3 => ['content' => 'Item # 3'],
        4 => ['content' => 'Item # 4'],
        5 => ['content' => 'Item # 5'],
    ],
    'hideInput' => false,
    'options' => ['class'=>'form-control', 'readonly'=>true]
]);

// Scenario # 2: Advanced usage without ActiveForm or model and hide the stored value. 
// Style your sortable content and disable certain values in the list from sorting.
echo SortableInput::widget([
    'name'=> 'sort_list_1',
    'items' => [
        1 => ['content' => '<i class="glyphicon glyphicon-cog"></i> Item # 1'],
        2 => ['content' => '<i class="glyphicon glyphicon-cog"></i> Item # 2'],
        3 => ['content' => '<i class="glyphicon glyphicon-cog"></i> Item # 3'],
        4 => ['content' => '<i class="glyphicon glyphicon-cog"></i> Item # 4'],
        5 => ['content' => '<i class="glyphicon glyphicon-cog"></i> Item # 5', 'disabled'=>true]
    ],
    'hideInput' => true,
]);

// Scenario # 3: Extend scenario # 2 to show how items automatically reorder based on initial value passed. 
// Also any reordered values are reset, when the form is reset.
echo SortableInput::widget([
    'name'=> 'sort_list_2',
    'value'=>'3,4,2,1,5',
    'items' => [
        1 => ['content' => '<i class="glyphicon glyphicon-cog"></i> Item # 1'],
        2 => ['content' => '<i class="glyphicon glyphicon-cog"></i> Item # 2'],
        3 => ['content' => '<i class="glyphicon glyphicon-cog"></i> Item # 3'],
        4 => ['content' => '<i class="glyphicon glyphicon-cog"></i> Item # 4'],
        5 => ['content' => '<i class="glyphicon glyphicon-cog"></i> Item # 5', 'disabled'=>true]
    ],
    'hideInput' => false,
    'options' => ['class'=>'form-control', 'readonly'=>true]
]);

// Scenario # 3: Extend scenario # 2 to show how items automatically reorder based on initial value passed. 
// Also any reordered values are reset, when the form is reset.
echo SortableInput::widget([
    'name'=> 'sort_list_2',
    'value'=>'3,4,2,1,5',
    'items' => [
        1 => ['content' => '<i class="glyphicon glyphicon-cog"></i> Item # 1'],
        2 => ['content' => '<i class="glyphicon glyphicon-cog"></i> Item # 2'],
        3 => ['content' => '<i class="glyphicon glyphicon-cog"></i> Item # 3'],
        4 => ['content' => '<i class="glyphicon glyphicon-cog"></i> Item # 4'],
        5 => ['content' => '<i class="glyphicon glyphicon-cog"></i> Item # 5', 'disabled'=>true]
    ],
    'hideInput' => false,
    'options' => ['class'=>'form-control', 'readonly'=>true]
]);
echo Html::resetButton('Reset Form', ['class'=>'btn btn-default']);

yii2-sortable-input is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.