I have been looking but couldn't find any way to remove the blank item on my dropdown list. Ideally, I would like to do this without altering the model. I just want to remove the blank item from the dropdown list so that users are forced to select one (so they can't select "blank").
Note: I am using the default dropdown list that comes with the MVC framework.
Here is my code:
' controller action:
ViewBag.CompanyId = New SelectList(db.Companies, "CompanyId", "Name")
' view:
#Html.DropDownList("CompanyId", String.Empty)
#Html.ValidationMessageFor(Function(model) model.CompanyId)
How are you building the options for your dropdown?
I never have blank options.
I usually create my dropdown like this:
#Html.DropDownListFor(x=>x.Client, new SelectList(Model.Clients))
Obviously your model options will be different.
Answer: Remove String.Empty
Update on 2021: My problem was on the JS script side, I was appending an empty line within my dropdown :D
Like this:
$("#" + "YourID").append('<option></option>'); //Remove This Line
for (var i = 0; i < CountriesList.length; i++)
{
$("#" + "YourID").append('<option value="' + CountriesList[i] + '">' + CountriesList[i] + '</option>');
}
Removing the first line will get you directly the first element from your Items list :)
Happy coding everyone.
Related
I am pulling my hair off trying to do a very simple thing with select 2. When I edit a record of table1, I have a simple select dropdown with a list of items built from a field of table1 (with distinct). Sometimes I need to add a new item. So I thought that the example to create and add a new item would work but it does not. When I type the new item in the open box on top of the dropdown, I got "No result found"... ok but how do I force this new item to be selected and recorded in the database (and obviously available for later use)?
I am not really good in JS, so I presume I am doing something wrong or something is missing... please help.
<select class="selectAdd-who" name="who">
<option value="item1">item1</option>
<option value="item2" selected>item2</option>
<option value="item3">item3</option>
</select>
<script>
$(document).ready(function() {
$('.selectAdd-who').select2();
// Set the value, creating a new option if necessary
if ($('.selectAdd-who').find("option[value='" + data.id + "']").length) {
$('.selectAdd-who').val(data.id).trigger('change');
} else {
// Create a DOM Option and pre-select by default
var newOption = new Option(data.text, data.id, true, true);
// Append it to the select
$('.selectAdd-who').append(newOption).trigger('change');
}
});
</script>
I want to create a dropdownList with unique id in telerik grid. This grid is having in-line edit and add. So, I have created a client template which is working fine with view mode. When clicked on in-line edit button of grid, that dropdownList gets converted into a textbox. So, I want to maintain that dropdownList in edit mode as well. Thanks in advance.
Here is my sample code:
grid = grid
.Columns(columns =>
{
columns.Bound(customField => customField.FieldNumber)
.Filterable(false)
.Sortable(false)
.IncludeInContextMenu(false)
.ReadOnly()
.Width("60px");
// here is my client template code
var dropdownListType = #" <select id='ddlTypeId_<#=CustomMenuId#>'>"
+ "<option value='" + Utilities.GetLabels("CustomMenu_List") + "'>" + Utilities.GetLabels("CustomMenu_List") + "</option>"
+ "<option value='" + Utilities.GetLabels("CustomMenu_Textbox") + "'>" + Utilities.GetLabels("CustomMenu_Textbox") + "</option>";
columns.Bound(customField => customField.Type)
.ClientTemplate(dropdownListType)
.Width("30%")
.Title("Type");
});
Telerik has a demo page for grid. Look here : http://demos.telerik.com/aspnet-mvc/grid/editing-custom I shared image below it is in edit mode and dropdown style.
You can set as parameter your model directly to ClientTemplate method. Look demo for detail pls.
I need way to display a "List" property with the option to add new elements to the list.
So Basically
Value 1
Value 2
Button: Add new
I created an editfor template for it, where I display all the values with a foreach loop. However, each item get's an index, so when I add a new input field with javascript, the index is wrong.
Any suggestions how to achieve this.
PS: the adding of new elemens mustbe done on the client, since it is a simple form
var abccounter = 1;
$("#abcbutton").click(function () {
$('#itemlist').append('<p><input class="text-box single-line" id="listofstringname_' + abccounter + '_" name="listofstringname[' + abccounter + ']" type="text" value=""></p>');
abccounter++;
});
<p>#Html.EditorFor(model => model.listofstringname)</p>
that is what I did and it worked. the only problem I'm having (and it may be solved eventually) is I want to wrap each element with a tag but I'm not sure how. this JS just adds a new "text box element" assuming 1 as the start as my model loads 1 example by default.
I'm trying to get a conditional client template to work in a Kendo Grid that will call into my controller with a simple userName string as a parameter but I cannot figure out the syntax to get this working correctly.
My template is in my view like this:
columns.Bound(user => user.IsLockedOut).ClientTemplate(
"# if (IsLockedOut == true) { #" +
"<input type='button' value='Unlock Acc' onclick='location.href=" + #Url.Action("UnlockAccount", "Administration", new { userName = "#= UserName #" + }) + "/>" +
"# } else { #" +
"Unlocked" +
"# } #"
);
And the action method of the controller looks like:
public void UnlockAccount(string userName)
{
}
At the moment the error generated is:
CS1525: Invalid expression term '}'
I've been looking at this for a couple of hours now and I cannot see the wood for the trees now.
You have some '+' plus symbol that you do not actually need. Also you do not need the 'at' sign # in front of the helper.
new { userName = "#= UserName #" + }) //<- that last plus
This method worked for me.
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.
I've gotta a bit further but only by manually writing the URL like this:
"<input type='button' value='Unlock Acc' onclick='location.href=/Administration/TryUnlockAccount?userName=#= UserName #'/>"
Still doesn't call my controller method though but it does have the right parameter value ...
I want to create Vaadin drop down with 2 separators in it. I couldn't find a way to implement that, can anyone help me to solve this issue?
This is the way I want to display my drop down:
Option 1
Option 2
------------;
select 1
select 2
-----------;
group 1
How can I do that?
There is no built-in way to add separators to selects. The only way I can think of is to add an item with the desired separator as its caption. For example if you use the default caption (item id) select.addItem("-----"); should be enough. This should work for both ComboBoxes and NativeSelects.
You can implement a new Vaadin component including the client behaviour, but this is not an easy solution. This page https://vaadin.com/book/-/page/gwt.html of "Book of Vaadin" and Vaadin forum can help for that.
Also, creating your own component using existing components is another solution. You can implement a special combobox which takes values of String or Component arrays. The way of doing this is using Vaadin panels, layouts and windows with size and locations and click listeners.
I haven't tried it myself but give a go at NativeSelection dropdown.
You can always do
{select.addItem("-----");}
Once I also wanted a do something like that but there was no proper way to do that with Vaadin. I actually created a Vaadin widget extending the Combo Box. In the client side widget of Vaadin they filter out the HTML content before adding items to the list. So Using the client side code I override that functionality and use HTML tag "" to add the line.
select.addItem("-----");
looks like the best way, I dont know about some other
Btw if you are reading items from some list you can combine that with some item counter and (itemsCount%n)==0 operator to set separator after 'n' items inserted :)
You can add the item to the selected (as mentioned before) and then disable the separators with some javascript:
add the item to the select.
cb.addItem("separator");
cb.setItemCaption("separator", "-------------");
execute the javascript
final String javascript = ""
"var selects = document.getElementsByTagName('select');"
"for(var j = 0;j < selects.length;j++){"
"var op = selects[j].getElementsByTagName('option');"
"for (var i = 0; i < op.length; i++) {"
" if(op[i].text == '" + separatorText + "') op[i].disabled = true;"
"}}";
Page.getCurrent().getJavaScript().execute(javascript);
Is there a reason that you use the ComboBox instead of the Select, because with the select you can do that.
Select select = new Select();
select.setItems("Option 1", "Option 2", "select 1", "select 2", "group 1");
select.addComponentAtIndex(2, new Hr());
select.addComponentAtIndex(5, new Hr());
Or you can use a MenuBar but it looks very diferent that the ComboBox.
menuBar = new MenuBar();
MenuItem menuItem = menuBar.addItem("Select");
menuItem.getSubMenu().addItem("Option 1");
menuItem.getSubMenu().addItem("Option 2");
menuItem.getSubMenu().addItem(new Hr());
menuItem.getSubMenu().addItem("select 1");
menuItem.getSubMenu().addItem("select 1");
menuItem.getSubMenu().addItem(new Hr());
menuItem.getSubMenu().addItem("group 1");