I've seen so many posts and examples of people using a DDL placeholder like this...
#Html.DropDownList("lstUsers",(SelectList)ViewBag.UsersList, "--Select User--")
or
#Html.DropDownListFor(u => u.RoleID, Model.RoleList, "Select", new { #id="hi"})
I mean yea these work, but I want the placeholder to disappear after the ddl index changed, and all these do is place dummy text for the 1st index which can then be selected again.
I haven't been able to find an answer for the life of me. I've tried jquery
$("#tb2").attr("placeholder", "--Please Select--"
which works for a textbox, but not a DropDown. I'm using dynamically generated ddl's
Thanks!
That's not how the select element works. That "placeholder" is actually a full-fledged option in the select list. It's value is usually set to an empty string so that if it's still selected on POST, an empty string is posted and will caused an error if the field is expected to have a value. It doesn't just disappear automatically on it's own.
A textbox is entirely different. When placeholder text is placed inside a textbox, it is literally overwritten by user input, hence why it goes away. In HTML5 textboxes now have an actual placeholder attribute, which will show and hide a bit of text based on the focus of the input. The select element has no equivalent, though.
You could potentially do what you want with some additional JavaScript. You would just watch for a change event on the select and if it has a value (not the "placeholder"), then you could remove the first item from the select (which should be the placeholder):
$('#mySelect').on('change', function () {
if ($(this).val() != '') {
var firstChild = $(this).children().eq(0);
if (firstChild.prop('value') == '') firstChild.remove();
}
});
(I'm using jQuery here because doing the same in straight JavaScript would be much more arduous and since you're using ASP.NET MVC, it's a safe bet you're also using jQuery)
Related
I'm having some issues referencing a component to get its value. I have a simple form with a numberfield and a button. To test I just want to output the value of the numberfield when the button is clicked
I have a basic js function
var saveNewSats = function (component) {
console.log(component.getValue());
};
In razor I wire it together like this
X.Button()
.Text("Save")
.Listeners(l => l.Click.Handler = "saveNewSats(#{newSatsField});")
Where newSatsField is the html id of the numberfield. I tried to reference the field in multiple ways like App.newSatsField, but no luck. What is the correct syntax to get the value from the numberfield?
Best regards
So I found the solution.
I did set the InputId which renders the html id attribute. What I needed was to set the ID as this is the one referenced by ext.net. Now both the #{id} and Ext.Cmp syntax works as expected.
I am using ASP.NET MVC3, Jquery, and Kendo UI MVC Wrappers.
I have a simple Kendo UI drop down. It is a nullable drop down so I have the .OptionLabel property set to " ".
There are 2 scenarios when I load the page:
1.) The data for the drop down is supplied by the controller.
2.) The data for the drop down is not supplied by the controller in which case I am giving it an empty list
Upon the initial load of the page, the only available selection is the nullable option. The user can add more selections to the drop down by using other controls on the page.
When scenario #2 occurs, everything works perfectly fine. I get a drop down list with all of the selections and the null option. The items in the list come via my controller. The drop down works as expected.
When scenario #1 occurs. It seems like the drop down is not initializing or something like that. In this scenario I am sending an empty list from the controller. My expectation is that the drop down should have one selection which is the null option (because of my optionlabel), but instead I get a drop down that is in some sort of disabled state.
So in this situation, is passing an empty list to the drop down the right thing to do or should I be doing something else?
Here is the drop down declaration:
#(Html.Kendo().DropDownList()
.Name("allPeople")
.DataValueField("Id")
.DataTextField("Name")
.OptionLabel(" ")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("_SelectPeopleList", "People");
}).ServerFiltering(true);
})
.Events(e => e
.Change("all_change").Open("all_open"))
)
So just to reiterate, when I hit scenario #2, _SelectPeopleList is returning a list and everything works fine.
When I hit scenario #1, _SelectPeopleList is returning an empty list and the drop down gets in something similar to a disabled state.
Hopefully I was clear enough.
OK, I just discovered a way to do this.
Instead of passing an empty list, I pass a list with id = 0 and and "" as the text field.
And then remove .OptionLabel(" ")
But then, if I have to do it this way, what is the point of having .OptionLabel??
I'm using simple_form. How can I have a select menu and a text input and have something like Select or add another.
The app will only take one value, either from the select menu or the text input.
It would also be good to validate to have either one or the other but not both, to avoid user confusion.
Implement what is called a 'combobox' to your simple_form
Jquery UI has a combobox:
http://jqueryui.com/autocomplete/#combobox
something fancier:
http://demos.kendoui.com/web/combobox/index.html
This will get you as far as your combo boxes displaying. I don't think there is a plugin for validating, so you'll have to write the code yourself.
You can try to use a combination of JavaScript and Ruby to solve this. If a user wants to enter a different value then what's available in the dropdown, you should have JS listen to a keydown event in that input and clear the dropdown, i.e.:
$(".input_field").bind('keydown', function() {
$(".select_field").val('0') // this should be a default blank value
});
That will clear the select when a user types. Likewise, you want to clear the input when the user selects from the dropdown, right?
$(".select_field").change(function() {
// Let's only clear the input field if the value is not the default null value
if ( $(this).val() != 0 ) {
$(".input_field").val('');
}
});
This will handle the front-end interactions. In the controller, you'll want to do some additional logic:
def create
object.new(...)
if params[:select] and params[:input]
# Overwrite the select with the input value
object.attribute = params[:input]
end
object.save
end
I assume that you want the input value to supersede the select, therefore if they are most submitted, we can just overwrite the select value with the input value and then continue to save the object.
Is this what you're looking for? Not sure if the inputted value was suppose to create a new object with a relationship or not. Hope this helps.
I am using MVC-Viewmodel, EF model first on my project.
I have 3 DropDonLista and a few TextBoxes in my View, User can select Values in the DropDownLists and Type inside the TextBoxes. I want that my "Next" button is disabled until values are selected and textboxes are filled then it gets enabled.
How can I easiest way accomplish this?
I've done this kind of things with C# Winforms and its pretty easy but in MVC I have no clue how I can do this.
Thanks in Advance!
You would need to use a client side scripting language like JavaScript. JQuery (a framework to make JavaScript easier to use) is now integrated in to MVC3+, so implementing it is much easier than it has been in the past.
You can target HTML DOM elements (HTML tags in your page, in layman terms) in jquery using "selectors" - i.e. if you want to access a HTML textbox called "test" in your form, and check the value, you can do the following:
var value = $("#test").val();
if(value == '') {
// do something
}
JavaScript syntax is strikingly similar to C#, but it works on the client side (it's processed by the browser), rather than the server.
you can use javascript/jquery to check if values are selected and textboxes are filled then enable the next button.
I have a page that displays a list with a of elements with a large number of elements, each of which has a boolean property, representing an Enabled and a Disabled state.
I need to provide the user with a link for each list item, and the link text must show the opposite status (so if the item is enabled, the link text must display 'Disable').
When the user clicks the link for a Disabled, the corresponding link text for the item must change to 'Enable' (and vice versa).
I would like to NOT reload the entire list for each click, just the text of the ActionLink itself, so my question is:
Is it possible to update just an ActionLink itself when the user clicks the link, or do I have do handle this using custom javascript?
As far as I remember, you can add HTML attributes to the "a" tag by newing up an anonymous class as the last param on most overloads.
Off the top of my head this can be written like the following:
Html.ActionLink("Name", "Action", "Controller", new { #class = 'updateId' });
(You may be able to do this with an ID which would be preferable over a class - if not just use a unique class name to avoid updating multiple items.)
Then you can use javascript to access the class "updateId" and change the inner html.
In the case of jQuery:
$("a.updateId").html("NewName");
This can be done with a custom user control contained within the element to update. A writeup of the solution can be found here. No custom client-side scripting is necessary.