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'))
)
);
Related
I use like this..
<div class="row">
<?php echo $form->textFieldGroup(
$User,'email_address',
array(
'wrapperHtmlOptions' => array(
'class'=> 'col-sm-5',
),
)
);
?>
</div>
But there is default placeholder 'Email Address'. How I want to set there my own placeholder ?
you can add html options as below:
<?php echo $form->textFieldGroup(
$User,'email_address',
array(
'wrapperHtmlOptions' => array(
'class'=> 'col-sm-5',
),
'widgetOptions' => array(
'htmlOptions' => array(
'placeholder' => 'my placeholder'
)
)
)
);
?>
for more detail have a look at Booster active form
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?
How to show timepicker based yiibooster, with Jqrelcopy.
I've code like this :
<div class="control-group "><label class="control-label required">Jam Kerja</label>
<div class="controls">
<a id="copylink" href="#" rel=".copy">Tambah Jam Kerja / Shift</a>
<div class="row copy">
<?php echo CHtml::label('',''); ?>
<?php $this->widget('bootstrap.widgets.TbTimePicker',
array(
'name' => 'some_time',
'value' => '00:00',
'htmlOptions'=>array('width'=>'50px'),
'noAppend' => true, // mandatory
'options' => array(
'disableFocus' => true, // mandatory
'showMeridian' => false // irrelevant
),
)
);
?>
<?php
$this->widget('bootstrap.widgets.TbTimePicker',
array(
'name' => 'some_time',
'value' => '00:00',
'noAppend' => true, // mandatory
'options' => array(
'disableFocus' => true, // mandatory
'showMeridian' => false // irrelevant
)
)
);
?>
</div>
</div>
</div>
When I add new, Timepicker always on field 1. Can't on field changed.
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.
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'))
));