Yii Framework Forum: Yii2 Widgets Extension - Yii Framework Forum

Jump to content

  • (3 Pages)
  • +
  • 1
  • 2
  • 3
  • You cannot start a new topic
  • You cannot reply to this topic

Yii2 Widgets Extension Collection of useful Yii 2 widgets for Twitter Bootstrap theming. Rate Topic: ***** 3 Votes

#1 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 26 November 2013 - 11:56 PM

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:
    • Various additions to ActiveForm and ActiveField
    • Select2
    • Typeahead
    • DatePicker
    • FileInput

  • Navigation:
    • Affix
    • Sidenav

This post has been edited by Kartik V: 28 February 2014 - 11:56 PM

2

#2 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 10 December 2013 - 11:45 PM

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

  • Affix: A scrollspy and affixed enhanced navigation (upto 2-levels) to highlight sections and secondary sections in each page. VIEW DEMO

  • SideNav: Collapsible side navigation menu - custom made by me for Bootstrap.VIEW DEMO

0

#3 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 29 December 2013 - 07:46 AM

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

Select2: 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
0

#4 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 30 December 2013 - 04:16 AM

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

#5 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 30 December 2013 - 01:54 PM

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.
0

#6 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 31 December 2013 - 05:54 AM

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

Typeahead: 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.
0

#7 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 02 January 2014 - 02:39 PM

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

DatePicker: The DatePicker widget is an enhanced wrapper for bootstrap-datepicker. This widget is specially styled for Twitter Bootstrap 3.0.

View details and demo for this widget.
0

#8 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 03 January 2014 - 03:39 PM

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).
0

#9 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 07 January 2014 - 03:51 PM

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.
0

#10 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 14 January 2014 - 02:18 AM

When using tags 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 tags 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
	],
]);

0

#11 User is offline   Ferry Lukito 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 26
  • Joined: 27-May 12

Posted 14 January 2014 - 09:31 PM

your widget very helpfull and powerfull..
if possible i'm request for gridinput (extend from yii-gridview) :)
0

#12 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 18 January 2014 - 12:00 AM

View PostFerry Lukito, on 14 January 2014 - 09:31 PM, said:

your widget very helpfull and powerfull..
if possible i'm request for gridinput (extend from yii-gridview) :)

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.
0

#13 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 21 January 2014 - 02:48 PM

Select2, DatePicker, and Typeahead 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]);

1

#14 User is offline   Theill11 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 51
  • Joined: 03-March 10
  • Location:@ localhost

Posted 23 January 2014 - 01:50 AM

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'
	]
]);
?>

0

#15 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 29 January 2014 - 05:49 PM

View PostTheill11, on 23 January 2014 - 01:50 AM, said:

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?
?>[/code]

Recorded as issue # 17 on Github which is resolved.
0

#16 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 29 January 2014 - 05:51 PM

Added NEW FileInput 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.
0

#17 User is offline   Theill11 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 51
  • Joined: 03-March 10
  • Location:@ localhost

Posted 30 January 2014 - 03:39 AM

View PostKartik V, on 29 January 2014 - 05:49 PM, said:

Recorded as issue # 17 on Github which is resolved.


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?
0

#18 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 30 January 2014 - 10:18 AM

View PostTheill11, on 30 January 2014 - 03:39 AM, said:

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?


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

#19 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 30 January 2014 - 05:47 PM

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

#20 User is offline   Kartik V 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 613
  • Joined: 29-August 12

Posted 04 February 2014 - 06:54 PM

Added NEW TouchSpin Widget. This widget is a mobile and touch friendly input spinner component for Bootstrap 3. Refer details and demos.
0

Share this topic:


  • (3 Pages)
  • +
  • 1
  • 2
  • 3
  • You cannot start a new topic
  • You cannot reply to this topic

2 User(s) are reading this topic
0 members, 2 guests, 0 anonymous users