Yii2 Widgets Extension

Yii 2.0 Extensions
1

This is a discussion forum for the yii2-widgets extension. The extension aims to extend widgets within Yii Framework 2 to offer extended functionality available in Bootstrap. You can view demo and documentation of this extension here. The widgets are classified broadly under

  • Forms/Inputs:

[list]

  • Various additions to ActiveForm and ActiveField

  • Select2

  • Typeahead

  • DatePicker

  • FileInput

[*]Navigation:

  • Affix

  • Sidenav

[/list]

2

Two new widgets have been added (category: Navigation).

[list=1]

[*][size="4"]Affix:[/size] A scrollspy and affixed enhanced navigation (upto 2-levels) to highlight sections and secondary sections in each page. VIEW DEMO

[*][size="4"]SideNav:[/size] Collapsible side navigation menu - custom made by me for Bootstrap.VIEW DEMO

[/list]

3

Another new widget has been added (category: Forms/Inputs).

[size="4"]Select2:[/size] The Select2 widget is a Yii 2 wrapper for the Select2 jQuery plugin. This input widget is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. The widget is specially styled for Twitter Bootstrap 3. The widget allows graceful degradation to a normal HTML select or text input, if the browser does not support JQuery.

VIEW DEMO

4

Added a detailed example on how to configure Ajax loading for Select2 Widget querying a large number of records in database.

5

The Select2 widget now fixes an interoperability issue between the Select2 and Bootstrap Modal, whereby the select2 search text is not available for focus, when embedded in a modal.

This fix in the widget, allows you to set the modal property to true if using the Select2 input within a bootstrap modal window.

View demo here.

6

Another new widget has been added (category: Forms/Inputs).

[size=“4”]Typeahead:[/size] Added new Typeahead widget wrapping the enhanced Twitter’s Typeahead.js.

This widget is specially styled for Twitter Bootstrap 3.0.

View details and demo for this widget.

7

New widget has been added (category: Forms/Inputs).

[size="4"]DatePicker:[/size] The DatePicker widget is an enhanced wrapper for bootstrap-datepicker. This widget is specially styled for Twitter Bootstrap 3.0.

[size="3"]View details and demo for this widget.[/size]

8

ActiveField has been enhanced to allow configuring Input Group settings i.e. Input Group HTML options and ability to add content before and after addons. Refer demo/example here.

Input widgets - Select2, Typeahead and DatePicker have been enhanced by adding ability to configure fieldConfig for ActiveForm related inputs (i.e. when form property is set).

9

Enhancements have been done to ActiveField configuration. In additon, ability to prepend and append Input Group Addons for Select2, Typeahead, and Datepicker widgets have been added.

10

When using [font="Courier New"]tags[/font] with Select2, the tag output is not stored as an array, but a delimited (default comma separated) list. You can set the tokenSeparator for tags (check plugin documentation). Check the widget settings and browse through the [font="Courier New"]tags[/font] settings on the demos page.

For example, the following will set the ‘color’ attribute to have ‘red, black, cyan’ preselected.




// setup the following to get the existing data from database

$model->color = 'red, black, cyan';


// or if the data is an array you can preselect the tags like this

$model->color = implode(', ', ["red", "black", "cyan"]);


echo Select2::widget([

	'model' => $model,

	'attribute' => 'color',

	'options' => ['placeholder' => 'Select a color ...', 'class'=>'form-control'],

	'pluginOptions' => [

		'tags' => ["red", "green", "white", "black", "purple", "cyan"],

		'maximumInputLength' => 10

	],

]);
11

your widget very helpfull and powerfull…

if possible i’m request for gridinput (extend from yii-gridview) :)

12

Thanks for your suggestion. I have a plan to extend gridview. However, the Yii 2 grid widget is also due for an enhancement by Yii Dev team (for example the Yii 2 Grid is expected to have PJAX). Once this is in some shape, I will try to add enhancements based on available features.

13

[size="3"]Select2[/size], [size="3"]DatePicker[/size], and [size="3"]Typeahead[/size] widgets have been enhanced now to work with ActiveField in a better way (no more need of passing $form property). Please change your codes in case you are using these widgets.

For example:




use kartik\widgets\Select2;

use kartik\widgets\Typeahead;

use kartik\widgets\DatePicker;

// Select2 with ActiveForm 

echo $form->field($model, 'city')->widget(Select2::classname(), ['data' => $cities]);

// Typeahead with ActiveForm 

echo $form->field($model, 'city')->widget(Typeahead::classname(), ['data' => $cities]);

// DatePicker with ActiveForm 

echo $form->field($model, 'birth_date')->widget(DatePicker::classname(), ['pluginOptions'=>['autoclose' => true]);
14

When using the DatePicker with


DatePicker::TYPE_RANGE

the validation errors for the second field is not displayed.

Is this a bug or is there something I need to setup?

Here is my code:




<?= $form->field($model, 'start')->widget(DatePicker::classname(), [

	'type' => DatePicker::TYPE_RANGE,

	'attribute2' => 'end',

	'options' => ['placeholder' => Yii::t('app/views', 'Start date', [])],

	'options2' => ['placeholder' => Yii::t('app/views', 'End date', [])],

	'pluginOptions' => [

		'autoclose' => true,

		'language' => Yii::$app->language,

		'calendarWeeks' => true,

		'todayHighlight' => true,

		'todayBtn' => true,

		'format' => 'yyyy-mm-dd'

	]

]);

?>
15

Recorded as issue # 17 on Github which is resolved.

16

Added NEW [size="4"]FileInput[/size] widget. This is an enhanced file input widget extending the HTML5 file input and styled for Bootstrap 3, with various features to preview multiple files and controlling your preview, input and upload options. View information and/or view details and demos.

17

This is not the same issue.

The new problem is about the validation-errors for the second field. If I have two fields in my model: start_date and end_date and both fields are set to required. Only errors for start_date is shown and the other field is shown as if it has no errors.

Hope you understand :)

Should I create another issue at Github?

18

Ok. Yes, can you record an issue please? Thanks.

19

Model validation for date ranges are resolved. Refer an example and demo here for details of model validation for date ranges.

20

Added NEW [size="4"]TouchSpin Widget[/size]. This widget is a mobile and touch friendly input spinner component for Bootstrap 3. Refer details and demos.