Zend Form - how do I create these custom form elements? - zend-form

This is a very specific instance where I'm having difficulty getting Zend Form to produce the correct output and supply the correct validation. I may have to go create a composite element but thought I'd ask here first. Here is the HTML I'm trying to get Zend Form to produce. I'd like this to be able to work where if the validation doesn't pass that the error messages still show up inline with the field that produced the error.
<tr>
<td>Budget</td>
<td>
<input type="radio" name="budget" value="unlimited" /> unlimited
<br />
<input type="radio" name="budget" value="limited" /> $ <input type="text" name="budget_amount" /> every <select name="budget_period">
<option value="day">day</option>
<option value="week">week</option>
<option value="month">month</option>
<option value="year">year</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name="include_weekends" value="yes" /> include weekends?</td>
</tr>
The user can choose either unlimited or limited for the budget value, however, if they choose limited, then they are required to enter a value for the budget amount field and choose a value from the select for the budget period field.

Figured it out after lots of tweaking, but hopefully the answer will help someone else out. Just going to post the decorator stuff since I'm still working on the validation for the budget value (got it to work by overriding form's isValid() function but now trying to get it into a custom validator).
$this->setElementDecorators(array(
'ViewHelper',
array(array('data' => 'HtmlTag'), array('tag' => 'td')),
array('Label', array('tag' => 'td')),
array(array('row' => 'HtmlTag'), array('tag' => 'tr'))
));
$budget->setDecorators(array(
'ViewHelper',
array(array('openData' => 'HtmlTag'), array('tag' => 'td', 'openOnly' => true)),
array('Label', array('tag' => 'td')),
array(array('openRow' => 'HtmlTag'), array('tag' => 'tr', 'openOnly' => true))
));
$budgetAmount->setDecorators(array(
'ViewHelper'
));
$budgetPeriod->setDecorators(array(
'ViewHelper',
array('AnyMarkup', array('markup' => 'every', 'placement' => 'PREPEND')),
array(array('closeData' => 'HtmlTag'), array('tag' => 'td', 'closeOnly' => true)),
array(array('closeRow' => 'HtmlTag'), array('tag' => 'tr', 'closeOnly' => true))
));
$includeWeekends->setDecorators(array(
'ViewHelper',
array('Label', array('placement' => 'APPEND')),
array(array('data' => 'HtmlTag'), array('tag' => 'td')),
array(array('emptyRow' => 'HtmlTag'), array('tag' => 'td', 'placement' => 'PREPEND')),
array(array('row' => 'HtmlTag'), array('tag' => 'tr'))
));
$this->setDecorators(array(
'FormElements',
array('HtmlTag', array('tag' => 'table')),
'Form',
array('FormErrors', array('placement' => 'PREPEND', 'class' => 'error')),
array('Description', array('placement' => 'PREPEND'))
));

Related

Usage icons in TbEdiableColumn with TbHtml

I use TbGridView and class TbEditableColumn to edit elements TbGridView once, but I have a problem - values for TbEditableColumn can't be with font awesome icons. How to make TbEditableColumn value is taken for font awesome?
Example:
array(
'class' => 'booster.widgets.TbEditableColumn',
'name' => 'pictogram',
'sortable' => true,
'editable' => array(
'url' => $this->createUrl('/currencyAjax/update'),
'placement' => 'right',
'inputclass' => 'span3',
'title' => 'Currency',
'type' => 'select',
'source' => Currency::getPictograms(),
)
),
And Currency::getPictograms() like this:
public static $currencyPictograms = array(
'glyphicon fa fa-usd' => '<span class="glyphicon fa fa-usd"></span>',
'glyphicon fa fa-jpy' => '<span class="glyphicon fa fa-jpy"></span>',
'glyphicon fa fa-eur' => '<span class="glyphicon fa fa-eur"></span>',
'glyphicon fa fa-rub' => '<span class="glyphicon fa fa-rub"></span>',
);
public static function getPictograms(){
return self::$currencyPictograms;
}
In result I have:
<select class="form-control span3">
<option value="glyphicon fa fa-usd"><span class="glyphicon fa fa-usd"></span></option>
<option value="glyphicon fa fa-jpy"><span class="glyphicon fa fa-jpy"></span></option>
<option value="glyphicon fa fa-eur"><span class="glyphicon fa fa-eur"></span></option>
<option value="glyphicon fa fa-rub"><span class="glyphicon fa fa-rub"></span></option>
</select>
Any ideas?
array(
'class' => 'booster.widgets.TbEditableColumn',
'name' => 'pictogram',
'sortable' => true,
'editable' => array(
'url' => $this->createUrl('/currencyAjax/update'),
'placement' => 'right',
'inputclass' => 'span3',
'title' => 'Currency',
'type' => 'select',
'source' => Currency::getPictograms(),
'encode' => false, // <= this flag should turn off html encoding
)
),
More info on:
http://ybe.demopage.ru/#EditableColumn

tab order is not working in Cell editing Kendo UI Grid

I am using Kendo UI Grid.And i want to do InCell editing on it.The InCell editing is working well.And once i click on "Add New Record" button then it shows textbox for the first column "Name".
My problem is when i press tab after putting value on "Name" field then its not shifting into second field "Description".And the tab order should work there.
Below is the piece of code for Kendo Grid :-
#using Gts.GlaspacLX.Web.App_Start;
#using Gts.GlaspacLX.ListValues;
#using System.Collections;
#using Kendo.Mvc.UI
#*<script src="#Url.Content("~/Scripts/jquery-ui-1.8.18.min.js")"></script>*#
<script type="text/javascript" src="../../Scripts/js/Product/Category.js"></script>
<style>
.k-dirty { display:none; }
</style>
<fieldset>
<form>
<div id="divProduct" style="display: none;">
#(Html.Kendo().Grid<Gts.GlaspacLX.Web.ViewModel.ProductViewModel>()
.Name("ProductGrid")
.Columns(columns => {
columns.Bound(p => p.Name).Width(50);
columns.Bound(p => p.Description).Width(200);
columns.Command(command => { command.Destroy(); }).Width(75);
columns.Bound(p => p.ID).Hidden();
})
.ToolBar(commands => {
commands.Create();
commands.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model => {
model.Id(p => p.ID);
})
.Read(read => read.Action("ProductEditingInline_Read", "Product"))
.Create(create => create.Action("ProductEditingInline_Create", "Product"))
.Update(update => update.Action("ProductEditingInline_Update", "Product"))
.Destroy(destroy => destroy.Action("ProductEditingInline_Destroy", "Product")
)
.Events(events => events.Change("onProductChange"))
// .Events(events => events.Error("error_handler"))
)
)
<input type="button" value="Cancel" onclick=" $('.k-button.k-button-icontext.k-grid-cancel-changes').click(); $('#productWindow').data('kendoWindow').close(); " />
<input type="button" value="Save" onclick=" SaveProductChanges(); " />
</div>
</form>
</fieldset>
}
Can anyone help me out on this ?
You'll want to use the navigatable option of the grid. Following is a jsfiddle example I've built: Kendo Grid Example with keyboard navigation. In MVC the navigatable option is turned on by calling .Navigatable() on the grid (see example below):
#(Html.Kendo().Grid<TestModel>()
.Name("TestGrid")
.Columns(columns =>
{
columns.Bind(c => c.DisabledString);
columns.Bind(c => c.Description);
columns.Bind(c => c.TestInvisibleDate);
columns.Bind(c => c.TestDate);
columns.Bind(c => c.AllExpressions);
})
.HtmlAttributes(new { style = "height:550px;" })
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Scrollable(s => { s.Enabled(true); s.Virtual(true); })
.Pageable(p => p.Enabled(false))
.Mobile(MobileMode.Disabled)
.Navigatable()
.Resizable(s => s.Columns(true))
.Reorderable(c => c.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(50)
.ServerOperation(false)
.Model(model =>
{
model.Id(e => e.UniqueId);
})
)
)
This help?

SimpleForm default input class

I'm using SimpleForm + Bootstrap. How can I add an attribute to all type="text" inputs with class = span12?
Something that outputs something like this:
<div class="controls"><input autofocus="autofocus" class="string required span12" id="user_first_name" name="user[first_name]" required="required" size="50" type="text" value=""></div>
I tried playing with config.wrappers but this
ba.use :input, :wrap_with => { :class => 'span12' }
doesn't work. It adds to wrapper instead of modifying the input tag. Any thoughts?
SimpleForm.setup do |config|
config.wrappers :bootstrap, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
b.use :html5
b.use :placeholder
b.use :label
b.wrapper :tag => 'div', :class => 'controls' do |ba|
ba.use :input
ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
ba.use :hint, :wrap_with => { :tag => 'p', :class => 'help-block' }
end
end
config.default_wrapper = :bootstrap
end
You can simply override the simple_form default for string input by adding a string_input.rb class file to your rails load path (i.e. app/inputs/string_input.rb) and include as follow:
class StringInput < SimpleForm::Inputs::StringInput
def input_html_classes
super.push('span12')
end
end
If you need to add more default classes to other types of input, you can check out the various input types provided:
https://github.com/plataformatec/simple_form/tree/master/lib/simple_form/inputs
I had a similar issue and after some research I found out that this is not supported using the wrapper api.
The best you can do is use the :defaults option in each form, instead of adding for every input.
https://github.com/plataformatec/simple_form/issues/754
You can achieve this like this: simple_form_for(#my_instance, defaults: { input_html: { class: 'span12' }})
You can also choose to use a custom formbuilder.
https://github.com/plataformatec/simple_form#custom-form-builder

Zend Form Decorators customization

I was implementing the zend decorators like below:
$formDecorators = array(
'FormElements',
array( 'HtmlTag', array('tag' => 'dl',
'class' => 'survey_form')),
'Form',
);
$elementDecorators = array(
'ViewHelper',
'Errors',
array('HtmlTag', array('tag' => 'dd',
'class' => 'survey_form_dd')),
array('Label', array('tag' => 'dt',
'class' => 'survey_form_label name')),
);
generating like:
<dl>
<dt>
<dd class="survey_form_dd">
<label style="white-space: nowrap;">
Now, I want to add class to <dd> --> <Label> & also want to customize my decorators as per TABLE Structure.

(Zend) wrapping form element with multiple HtmlTags

I want to do this:
<div id="element-wrapper-1">
<span class="element-wrapper-2">
<input name="element" />
</span>
</div>
Is it possible to do this using only addDecorator methods? I do not want to write my own decorator class or render method.
You do like this:
$element->setDecorators(array(
'Viewhelper',
array(
array('span' => 'HtmlTag'),
array('tag' => 'span', 'class' => 'element-wrapper-2')
),
array(
array('div' => 'HtmlTag'),
array('tag' => 'div', 'class' => 'element-wrapper-1'))
)
);