I have an BelongsTo Fields like this:
BelongsTo::make( __( 'Parent Page' ), 'parent', 'App\Nova\Page' )->nullable(),
In the Dropdown is as a Default Value a Dash (—) and I would like to change this label to something like "Main-Page".
What I have now:
What I want to have
This is not possible using a BelongsTo field. The dash is hardcoded in the Vue component:
vendor/laravel/nova/resources/js/components/Form/BelongsToField.vue
<option value="" selected :disabled="!field.nullable">—</option>
This is used to create the first option in the select element.
Interestingly enough, it is possible using a Select field, which allows you to use the withMeta() function to set a placeholder. If you combine this with the selected meta value, you could create something like this:
Select::make('Parent Page')->options([
'Page 1',
'Page 2'
// ... etc
])->withMeta([
'placeholder' => 'Main-Page',
'value' => null // or any value you'd like to use to pre-select an option
])->nullable()
Note: this is done using Nova 2. I Haven't tried it with v1.
Related
I'm new to angular ui-grid.
I want to implement a dropdown box for inline editing and I follow this tutorial (gender column): http://ui-grid.info/docs/#/tutorial/201_editable and I modified it by using a new cshtml page (as shown below) because I want to set the option from database instead of enter the options manually.
The code below is where I implemented the dropdown box:
name: app.localize('Roles'),
field: 'getRoleNames()',
minWidth: 160,
editableCellTemplate: '~/App/common/views/users/roleDropDownList.cshtml'
And here is the code of roleDropDownList.cshtml
<div ng-controller="common.views.users.index as vm">
<select>
<option ng-repeat="role in vm.roles">{{role.displayName}}</option>
</select>
</div>
Now I'm able to choose the option but it's like not capturing the changes when I choose 1 of the options.
Here is the example:
DropDown sample
As you can see in the image, the row in red color means it's dirty row (edited) but the row that I edited with dropdown is not in red color means it's not being edited and it can't be save.
I found a way that more easier to implement what I want.
name: app.localize('Roles'),
field: 'getRoleNames()',
minWidth: 160
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownValueLabel: 'displayName',
editDropdownIdLabel: 'displayName'
editDropdownValueLabel is to set the value of the options otherwise it will shows "undefined" as image shown below
Example of dropdown undefined options
editDropdownIdLabel is to show the value of the selected option otherwise it will shows ID as image shown below
Showed Id
The code below is to get the data from database:
vm.userGridOptions.columnDefs[3].editDropdownOptionsArray = result.data.items;
I'd appreciate if someone could advise on the following:
My Multiselect:
#Html.Kendo().MultiSelectFor(model => model.PAYMENT_METHOD).BindTo(paymentMethods).DataTextField("TITLE").DataValueField("CODE")
The dataSource looks like this:
CODE TITLE
1 abc
2 def
Is it possible to have composite DataTextField , specifically like: 1 - abc, 2 - def, etc., i.e "CODE" - "TITLE"?
I know I could create a select list and define the format of textfield, but maybe there is another way?
Thanks!
You could specify a template for the display item (you would probably want to take the text field out then):
#Html.Kendo().MultiSelectFor(model => model.PAYMENT_METHOD)
.BindTo(paymentMethods)
//.DataTextField("TITLE")
.DataValueField("CODE")
.ItemTemplate("#= CODE# #=' - '# #= TITLE#")
Here's the link to the ItemTemplate method and the link to the general template methods.
I am trying to get a hook on a select and set the selected option. I am struggling to do this because my drop down is generated in a loop so the id changes.
Normally I would do something like this
select product_template.name, :from => "product_product_template_id
What if the ID can change
e.g. product_product_presentations_attributes_0_presentation_id
Is there a way to leverage the select function and specify a css selector?
Thanks.
select also accepts label (as in the actual <label> text for that select) and name attributes for the :from option, so if those are not generated / changed all the time, you can use them for a less brittle test.
If that doesn't cut it, you can add a unique CSS class to your select and then select a specific option with something like:
find("select.new_css_class").find("option[value='THE OPTION VALUE YOU WANT']").select_option
I can have tags inside option tags, and it works (don't know if it's valid HTML4/5, but it works in Firefox at least):
<select>
<option><i class="icon-plus"></i>Add item</option>
<option><i class="icon-remove"></i>Remove item</option>
<option><i class="icon-edit"></i>Edit item</option>
</select>
I'm placing Bootstrap/FontAwesome webfont icons in those option tags.
But I'm using MVC4/Razor, and I can't get the correct syntax to make it render properly. It encodes all those inner tags and I get <, >, etc.
This is what I'm doing:
// first I make a new list with the icons inside
var items = Model.Items.Select(q => new SelectListItem() {
Selected = q.Selected,
Text = "<i class=\"icon-add\"></i>" + q.Text,
Value = q.Value
});
// then render the dropdown
Html.DropDownListFor(m => m.SelectedItem, items, "All")
How do I get this working?
You can't do this out of the box. Depending how often you need to use it - I personally would recommend doing it manually via a loop.
If you want, you could write an extension method/helper for the drop down list.
I found a similar example here, though this guy uses it to custom the 'select' tag, you'll want to custom the 'options' tag: Fun (?) with Linq Expressions in extension methods
Hope this helps.
OK I've selected an easy easy option...
Simply put the FontAwesome classes on the <option> tag instead of a nested child <i> tag. That way the markup is valid.
Of course this needs to be done manually in a loop.
I have been experimenting with dust.js by using the home page to create templates (http://akdubya.github.com/dustjs/). I am simply trying to set the selected option in a selectbox. Here is my data model:
{
"name": "SOME NAME",
"favorite_food": 1,
"food_options": [{id:1, value: "Ice Cream"},{id:2, value: "Pizza"},{id:3, value: "Fish"}]
}
I would like to set the selected option by matching the id in the food_options array to the favorite_food property. Here is my template:
<h1>{name}</h1>
<select>
{#food_options}
<option value="{id}"{#eq key=id value=favorite_food} selected="true"{/eq} >
{value}
</option>
{/food_options}
</select>
It seems like it should be simple and I've tried all sorts of variations, but can't get it to work. Any advice is much appreciated.
The Dust helpers you're hoping for are actually a part of the LinkedIn fork of Dust.js. To be able to use those helpers, try using this site:
http://linkedin.github.com/dustjs/test/test.html
LinkedIn fork of Dust:
https://github.com/linkedin/dustjs
DustJs Helpers:
https://github.com/linkedin/dustjs-helpers