How to display a sfWidgetFormSelectRadio item without showing the label - symfony1

I am using Symfony 1.3.6 on Ubuntu 10.0.4.
I am using the sfWidgetFormSelectRadio to allow a user to select a picture from a list, in a form.
In the action, the pictures are set up like this:
$this->form->setWidget('chosenpic', new sfWidgetFormSelectRadio(array(
'choices' => $this->pictures,
'default' => $this->pictures[count($this->pictures)-1] ))
);
In the template, the widget is displayed like this:
<?php echo $form['chosenpic']->render(array('id'=>'check'.($i+1), 'value'=> ($i+1), 'width' => "80", 'height' => "80")); ?>
This generates the following output:
<ul class="radio_list"><li><input type="radio" width="80" height="80" id="check1" value="1" name="flowers[chosenpic]"> <label for="flowers_chosenpic_0">http://example.com/media/images/48408000/jpg/_48408794_009829449-1.jpg</label></li></ul>
I do no want the the label for appearing, as it messes up the form. Short of manually generating the HTML myself (using the form and widget names, is there a way that I can prevent the widget from displaying a 'label for' ?

You need to provide a custom formatter. In your form's configure function, do the following:
public function configure()
{
$this->setWidget('chosenpic', new sfWidgetFormSelectRadio(array(
'formatter' => array($this, 'pictureRadioFormatterCallback')
)));
}
Then, add a formatter that doesn't render labels to your form:
public function pictureRadioFormatterCallback($widget, $inputs)
{
$rows = array();
foreach ($inputs as $input)
{
$rows[] = $widget->renderContentTag('li', $input['input']);
}
return !$rows ?
'' :
$widget->renderContentTag('ul', implode($widget->getOption('separator'), $rows), array('class' => $widget->getOption('class')));
}
However, ideally, you should be using the labels to display the images, rather than displaying the images outside of the labels. Also, it's typically a bad idea to be configuring widgets inside of an action, can that code go in it's own form?

You can do the above -- or use CSS to hide the label generated by default ... something along the lines of:
ul.radio_list li input label { display: none; }
the form itself probably has an #id to help you better specify the CSS selector better. But if you like adding boilerplate PHP code to your app feel free :)

Related

New to React: Why is one array treated differently than the other?

I'm working on a React app that is fed data from a Rails api. I'm currently working on a form that includes a nested association (i.e. in the model_a has many model_b's and you can create them in the same form).
The problem I'm having is that Rails expects nested association with a certain naming convention and the same field that controls how the parameter is named when its sent to rails also controls how React finds the right data when the Rails API responds.
This becomes problematic on the edit page because I want to show the models_a's (Retailers) already existing model_b's (SpendingThresholds in this case) and when I change the 'name' field to suit the rails side, React doesn't know where to look for that data anymore. When I try to pass the data directly it comes in as a different type of array and certain functions fail.
I think its easier to show than tell here so
initially I had this
<FieldArray
name="spending_thresholds"
component={renderSpendingThresholds}
/>
and data was coming through like
Object {_isFieldArray: true, forEach: function, get: function, getAll: function, insert: function…
to my React app from the Rails API, which worked, however that 'name' isn't to Rails liking (Rails wants it to be called 'spending_thresholds_attributes' for accepts_nested_attributes to work) so I changed it to
<FieldArray
name="spending_thresholds_attributes"
fields={this.props.retailer.spending_thresholds}
component={renderSpendingThresholds}
/>
and data start coming through to the renderSpendingThresholds component in this format
[Object]
0:Object
length:1
__proto__:Array(0)
which React doesn't like for some reason.
Anyone know how to fix this/why those two objects, which hold the same information from the Rails side anyway, are being treated differently?
EDITS
renderSpendingThresholds component
The fields attribute in the renderSpendingThresholds component is the object that's coming through differently depending on how I input it
const renderSpendingThresholds = ({ fields }) => (
<ul className="spending-thresholds">
<li>
<Button size="sm" color="secondary" onClick={(e) => {
fields.push({});
e.preventDefault();
}
}>
Add Spending Threshold
</Button>
</li>
{fields.map((spending_threshold, index) => (
<li key={index}>
<h4>Spending Threshold #{index + 1}</h4>
<Button
size="sm"
color="danger"
title="Remove Spending Threshold"
onClick={() => fields.remove(index)}
>
Remove
</Button>
<Field
name={`${spending_threshold}.spend_amount`}
type="number"
component={renderField}
label="Spend Amount"
placeholder="0"
/>
<Field
name={`${spending_threshold}.bonus_credits`}
type="number"
component={renderField}
label="Bonus Credits"
placeholder="0"
/>
</li>
))}
</ul>
);
It looks like you are passing fields through props and then destructuring the fields out of the props in the callback of the renderSpendingThresholds and discarding the rest. According to the docs, a specific redux-form object is passed through to the render callback. You're essentially overwriting this. Try changing {field} to something like member or spending_threshold. Then you can use the specific map function to iterate over the spending_threshold items. Your field prop should still be available under member.fields or something similar.
For the code that you currently show, who exactly handles the submission?
you use the original flow of form submit?
if so, so please handle that by yourself.
** this line of code, looks weird:
onClick={() => fields.remove(index)}
as you interact directly with the state values...
you need to update the state through
this.setState({fields: FIELDS_WITHOUT_ITEM})
and now when you need to handle your own submission, you don't really care of the input names. Because you are using the state as input.
ie:
class FormSpending extends Component {
handleSubmit() {
var fieldsData = this.state.fields.map(field => {
return {
whateverkey: field.dontcare,
otherKey: field.anotherDontCare
};
});
var formData = {
fields: fieldsData
};
ajaxLibrary.post(URL_HERE, formData).....
}
render() {
return (
...
<form onSubmit={()=>this.handleSubmit()}>
...
</form>
...
);
}
}

How to horizontaly format form with input group addon using FluentBootstrap

I am trying to create labeled input while the input is decorated with an icon. There is also a help text which should show under the input. This is a sample also including simple input at the bottom which works fine.
#using (var form = Html.Bootstrap().Form().SetHorizontal(2).Begin())
{
#using (var group = b.FormGroup().SetHorizontal(true).Begin())
{
#group.ControlLabel(m => m.Amount)
using (var inputGroup = b.InputGroup().Begin())
{
#inputGroup.InputGroupAddon("#")
#inputGroup.InputFor(m => m.Amount)
}
#b.HelpBlock("Help description")
}
#b.InputFor(m => m.MaxDurationMonths).AddChildAtEnd(x => x.HelpBlock("Another help."))
}
For some reason the label is put inside the input group (for the decorated input) and not the form group. Therefore I cannot achieve horizontal layout for this form group. I tried to SetAutoColumns(false) on the group but I cannot format the InputGroupAddon nor HelpBlock using SetMd. Also this input is then not aligned with the reference input which is working fine. Is there a way to do it correctly?
Thanks for help!
Edit: this is how it looks on screen
input group addon

TableSorter : how to export results to csv?

TableSorter is a great jquery script to sort html tables with many options.
But I don't know how to add a simple 'export to csv' button (or link) to get a file containing the records of my table (with no special formatting).
I know the Output Plugin but it seems far too complex to me.
Thanks by advance for your help !
Ted
It's actually not complicated, it only looks intimidating because of all the options. The output widget can output csv, tsv, any other separated (space, semi-colon, etc) values, javascript array or JSON.
If you are just using basic functionality, the default settings will:
Output csv to a popup window
Only include the last header row
Only include filtered rows (so all rows if the filter widget isn't even being used)
Will only output the table cell text (ignores HTML)
All you would need is this code (demo):
HTML
<button class="download">Get CSV</button>
<table class="tablesorter">
....
</table>
Script
$(function () {
var $table = $('table');
$('.download').click(function(){
$table.trigger('outputTable');
});
$table.tablesorter({
theme: 'blue',
widgets: ['zebra', 'output']
});
});
I created another demo, showing all options, with a set of radio buttons which allow the user to choose between sending the output to a popup window, or downloading the file.
HTML
<label><input data-delivery="p" name="delivery" type="radio" checked /> popup</label>
<label><input data-delivery="d" name="delivery" type="radio" /> download</label>
<button class="download">Get CSV</button>
Script
var $table = $('table');
$('.download').click(function(){
// get delivery type
var delivery = $('input[name=delivery]:checked').attr('data-delivery');
$table.data('tablesorter').widgetOptions.output_delivery = delivery;
$table.trigger('outputTable');
});
So, you can make it as simple or complex as you want (see the actual output widget demo which allows the user to set almost all the options).

JqueryMobile checkbox doesn't like "data-inline"

I'm developing a web app with MVC 3 / Razor and jquery-mobile. In jquery-mobile, normally you can add data_inline = "true" to an object's attributes and it will prevent the element from stretching all the way across the screen, like so:
#Html.DropDownListFor(m => m.value, options, new { data_inline = "true" })
#Html.ActionLink("Text", "Action", null, new {data_role="button", data_inline="true"})
Both of those work fine. But on a checkbox...
#Html.CheckBoxFor(m => m.value, new { data_inline = "true" })
... it doesn't seem to do anything, and I still get a nasty stretched checkbox. Adding data_role="button" doesn't help (not that I expected it to).
Is there any reason why this is so? Any good way I can get my checkbox to not be stretched without resorting to manual CSS modifications?
The jQM Checkbox does not support data-inline. All you need to do is change the label CSS property display to inline-block.
<label class="inline">
<input type="checkbox" name="chk0" class="ui-btn-inline" />Check me
</label>
.inline {
display: inline-block !important;
}

Kendo UI Grid in MVC with Conditional Custom Command Button

I have a KendoUI Grid I'm using an MVC web application, all working fine however I want to add a custom command button that is shown conditionally in the UI and simply executes a command on my controller passing it the required parameter.
columns.Command(command => command.Custom("UnlockAccount").SendDataKeys(true).Click())
The command is specified as above but I only want the button to show when the DataItems IsLocked property is true.
I also cannot figure out how to just call and method on the controller rather. I cannot find a demo of this on the Kendo site and not sure how to move this forward.
Here is a specific example for using client templates for conditional command buttons.
const string ShowUpdateButton = "#if (IsNetReversal == false) {#<a class='k-button k-button-icontext k-grid-edit' href='\\#'><span class='k-icon k-edit'></span>Update</a>#}#";
const string ShowReverseButton = "#if (IsNetReversal == false) {#<a class='k-button k-button-icontext k-grid-reverse' href='/JournalDetail/Reverse/#: ID #' ><span class='k-icon k-reverse'></span>Reverse</a>#}#";
const string ShowDeleteButton = "#if (IsAdjustment == true) {#<a class='k-button k-button-icontext k-grid-delete' href='\\#'><span class='k-icon k-delete'></span>Delete</a>#}#";
You can do the template inline but I find it easier (particularly for multiple buttons) if you declare constants and then use string.format to concatenate them.
col.Template(o => o).ClientTemplate(string.Format("{0}{1}{2}", ShowUpdateButton, ShowDeleteButton, ShowReverseButton));
The upside is it will work with popup editor whereas jquery hacks will ignore the conditional status when a user cancels out of edit. A cancel from the popup editor will restore the grid row from the viewmodel or wherever Kendo stores it which results in button states from before any jquery/javascript hack. The method above will also auto-wire the standard commands since I copied their HTML output for the client template.
The downside is that if Kendo changes their pattern for command buttons the client template may fail. I tired several other methods besides this one and the downside to this method seems better than the other methods.
Note on Kendo Forums: As of the date of this post, they do not appear to allow people who do not pay for support to post to the forums so I would suggest posting questions here instead. They monitor Stack Overflow and in my experience they seem to answer questions more quickly here.
Use template column instead - via the ClientTemplate method.
Conditional templates are covered here and multiple times on the forums - the Command columns is not that flexible.
As of the December 2018 release of Kendo, you can now conditionally display custom buttons more easily, but it still relies on JavaScript to do its work, this function should be defined before your dataGrid or you'll run into issues.
function showCommand(dataItem) {
console.log("determining to hide or show" + dataItem);
// show the Edit button for the item with Status='New'
if (dataItem.Status == 'New') {
return true;
}
else {
return false;
}
}
Then the code for the Grid.
.Columns (columns => {
columns.Command (
command => command.Custom ("Approve")
.Visible ("showCommand")
.Click ("approveFunc")
)
.Width (100)
.HeaderTemplate ("Actions")
})
You can control custom command button visibility by Visible property.
columns.Command(command => command.Custom("UnlockAccount").SendDataKeys(true).Click().Visible("unlockAccountVisible"))
Visible property accepts JS function name and passes current dataItem as an argument.
JS function that evaluates button visibility:
<script>
function unlockAccountVisible(dataItem) {
// show the UnlockAccount button only when data item property IsLocked == true
return dataItem.IsLocked;
}
</script>
Read more in Show Command Buttons Conditionally kendo-ui documentation article.

Resources