I am using a dropdownlist in my view like so:
#Html.DropDownList("ClientId", Model.AvailableClients, "-- None --")
Model.AvailableClients is an IEnumerable one of the item's Selected property is set to true. If in the query string for the page request includes "ClientId=" (as in its not set) MVC ignores my selected item. I assume this is because MVC is trying to be helpful and set the selected item automatically using the querystring, but I dont want this.
How can I prevent the querystring value from overriding my item's selected value?
If the name you give your DropDownList is already the name of an element in your model then DropDownList will automatically override the selected value with the model value. If letting ClientId determine the selected value isn't an option then the only solution I know is to rename the DropDownList with a name not included in the model.
#Html.HiddenFor(m => m.ClientId)
#Html.DropDownList("ClientIdNewName", Model.AvailableClients, "-- None --", new { onchange = "ClientId.value = this.value"})
This will keep the value in ClientId without making it the default selection value.
Related
In the model I have long? field that I like to use Kendo MultiSelect for it. The main reason for this choice is server-side filtering. It doesn't reflect current Model's value, nor it sends any value to the server. By inspected traffic, I'm sure that it doesn't update the model's value.
#(Html.Kendo().MultiSelectFor(x => x.theField)
.Name("msname")
.MaxSelectedItems(1)
.Placeholder("")
.HighlightFirst(true)
.DataValueField("Id")
.DataTextField("Text")
.AutoBind(true)
.DataSource(ds =>
ds.Read(" ", "API").ServerFiltering(true))
.Value(new long?[] { Model.theField})
)
I can put a hidden field and update its value or multiselect's change, but there should be a better solution.
I should note that this multi select is in an editor template and is used by Kendo Grid in popup editor.
UPDATE
When using nullable types, you need to use ValuePrimitive(true)! So the end code is:
#(Html.Kendo().MultiSelectFor(x => x.theField)
.MaxSelectedItems(1)
.Placeholder("")
.HighlightFirst(true)
.DataValueField("Id")
.DataTextField("Text")
.AutoBind(true)
.DataSource(ds =>
ds.Read(" ", "API").ServerFiltering(true))
.ValuePrimitive(true)
)
The main reason for this choice is server-side filtering
You can find on their demo site that DropDownList and ComboBox also support that feature. But if you insist to use MultiSelect then lets dig some of your code.
Look Name() method will give a name for your input element e.g (input, select). When form serialized it will use our input name as form's field property. If you are using HtmlHelper that ends with "For" e.g (LabelFor, MultiSelectFor) input attribute name will be named by its binded property.
Html.Kendo().MultiSelectFor(x => x.theField)
You will have
<select name="theField"> ....
You don't have to use Name() method anymore, therefore MultiSelect value will be binded as theField property as per form serialized to server.
Now if you look to Request.Form["theField"] when you debug inside your controller, you will see what value being sent. It usually a content of joined string array if multiple items selected, so you need to change theField type to handle array of string or int instead of nullable long type.
EDIT
At last you find the way to solve your problem, this solution credit to Akbari
When using nullable types, you need to use .ValuePrimitive(true)
I can't figure out how to determine which item is selected in the my kendo dropdownlist. My view defines it's model as:
#model KendoApp.Models.SelectorViewModel
The ViewModel is defined as:
public class SelectorViewModel
{
//I want to set this to the selected item in the view
//And use it to set the initial item in the DropDownList
public int EncSelected { get; set; }
//contains the list if items for the DropDownList
//SelectionTypes contains an ID and Description
public IEnumerable<SelectionTypes> ENCTypes
}
and in My view I have:
#(Html.Kendo().DropDownList()
.Name("EncounterTypes")
.DataTextField("Description")
.DataValueField("ID")
.BindTo(Model.ENCTypes)
.SelectedIndex(Model.EncSelected)
)
This DropDownList contains the values I expect but I need to pass the selected value back to my controller when the user clicks the submit button. Everything works fine except I don't have access to which item was selected from the controller's [HttpPost] action. So, how do i assign the DropDownList's value to a hidden form field so it will be available to the controller?
For anyone who found this wondering how to get the selected value in JavaScript, this is the correct answer:
$("#EncounterTypes").data("kendoDropDownList").value();
From the documentation: http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-value
when select a value from a dropdown list, and in the selec event , we can get the selected value as following ,
#(Html.Kendo().DropDownList()
.Name("booksDropDown")
.HtmlAttributes(new { style = "width:37%" })
.DataTextField("BookName")
.DataValueField("BookId")
.Events(x => x.Select("onSelectBookValue"))
.DataSource(datasource => datasource.Read(action => action.Action("ReadBookDropDow", "PlanningBook").Type(HttpVerbs.Get)))
.OptionLabel("Select"))
javascript function like following ,
function onSelectBookValue(e) {
var dataItem = this.dataItem(e.item.index());
var bookId = dataItem.BookId;
//other user code
}
I believe this will help someone
Thanks
Hello I was just going through this problem,kept on searching for 2 hours and came up with a solution of my own.
So here is the line to fetch any data bidden to the kendo drop down.
$("#customers").data("kendoDropDownList").dataSource._data[$("#customers").data("kendoDropDownList").selectedIndex].colour;
Just change the id customers to the id you have given tot he kendo drop down.
Maybe you should be using the DropDownListFor construct of the Kendo DropDownList like so in your view:
#(Html.Kendo().DropDownListFor(m => m.EncSelected)
.Name("EncounterTypes")
.DataTextField("Description")
.DataValueField("ID")
.BindTo(Model.ENCTypes)
.SelectedIndex(Model.EncSelected)
)
This way, when you submit, it will be availble on the POST request and you won't need to put an hidden field anywhere.
BUT should you need to use the hidden field for some reason, put it there, subscribe the the select event of the dropdown list and put using JQuery (for instance) put the selected item on the hidden field.
It's your choice :)
If you want to read also out the text of the dropdown, you can get or set the value by using the following kendo function:
$('#EncounterTypes').data("kendoDropDownList").text();
REFERENCE TO THE DOCUMENTATION
Using this .val() as #Vivek Parekh mentions will not work - there is no function .val() in the kendo framework.
If you want you could use jQuery and get the value back: $('#EncounterTypes').val()
Updated DEMO
$("#EncounterTypes").kendoDropDownList().val();
You can get the selected item like following code and then use item.property to get further information
var selectedFooType = $("#fooType").data("kendoDropDownList").dataItem();
selectedFooType.name
//OR
selectedFooType.id
So if Set up a DropDownList where Text: "people names" (string)and Value:studentID (int). in my view like this (assuming myDDL is data from code-behind placed in the viewbag)
#Html.DropDownList("myDDL", (IEnumerable<SelectListItem>)ViewBag.myDDL,
"Select Stuff", new Dictionary<string,object>{
{"class","dropdowns"},{"id","myDDL"}})
What is the value of "Select Stuff" which is an optional label that appears at the beginning of the dropdown list?
I'd like the value because it if no value is selected then I'd like to get all the data.
Thanks!
It's empty and it's always the first option of the dropdown, so make sure that you are binding it to a non-nullable property in the postback action:
<select name="selectedValue">
<option value="">Select Stuff</option>
...
</select>
Also you seem to be using myDDL as both the first argument and the second of the dropdownlist helper which is wrong. The first argument is a property that would be used to get the selected value. The second is the available values and must be an IEnumerable<SelectListItem>.
So something like this would make more sense:
#Html.DropDownList(
"selctedValue",
(IEnumerable<SelectListItem>)ViewBag.myDDL,
"Select Stuff",
new { #class = "dropdowns", id = "myDDL" }
)
But what would really make sense and what I would recommend you is to get rid of this ViewBag and use a view model and the strongly typed version of this helper:
#model MyViewModel
...
#Html.DropDownListFor(
x => x.SelectedValue,
Model.MyDdlItems,
"Select Stuff",
new { #class = "dropdowns", id = "myDDL" }
)
It's the empty string. The documentation covers this (emphasis mine):
optionLabel
Type: System.String
The text for a default empty item.
This parameter can be null.
You can actually try adding a fake value into your List of object inside of your dropdown list which take inn value = "None"/"select stuff" and id = 0. In which it will help you to generate a fake value where user is able to select on the value in the dropdown list and you should be able to handle it on the backend code. Hope this helps.
I have following code
#using (Html.BeginForm())
{
#Html.DropDownListFor(m => m.IDs, new SelectList(Model. IDs), Model.SelectedID)
}
So user selection from this combo bind to SelectedID property of the model. My understanding is that this binding happen only when form is submitted. Let’s say from the same page, I need to do an AJAX call but at this point ) Model.SelectedID does not provide any value because form hasn’t been submitted yet (although user has selected something from drop down). Any ideas how to best deal with this situation?
You can use javascript.
var selectedValue = $("#IDs").val();
bind a change event to your DD
$("#DDL_ID").change(function(){
var currVal = $(this).val();
//do ajax
});
As others have pointed you would get this value with javascript on the change of the drop down list.
I wanted to point out however, that your understanding of the overload you are using for the drop down list is incorrect. This overload will display a default option box label.
For example you could prompt the users to select select something from the list:
#Html.DropDownListFor(m => m.IDs, new SelectList(Model. IDs), "Select Something...")
If you were to post the form in your example as is, you can see the selected item come across in the form. If your view model is setup in such a fashion the model binder would take over and bind this value to your "SelectedID" property.
[HttpPost]
public string DropDown(FormCollection form)
{
var selectedItem = form["IDs"];
return selectedItem;
}
I am doing a edit operation on a record in Grid . One of the column is DropDownValue.
When I go to Edit View , depending upon this dropdownvalue , I make few fields editable and readable. And , One more point is here, I didnt select the dropdown Yet, But whatever its value selected before is the one which I should retrieve. I know I have to use jQuery .But I didnt exact Syntax to do tht.
Here is my dropdown
<div id="dvstatus">
#Html.DropDownListFor(model => model.Study.StudyStatusId, Model.StatusSelectList, new { id = "ddlStatus" })
</div>
NOT SELECTED VALUE, BUT THE VALUE WITH WHICH IT IS LOADED
My requirement is how to get the dropdown value item , when it is loaded onto .cshtml
If you're not referring to the selected value of the dropdown then just pass the value from the controller to your view using your model if you're using a strongly-typed view or pass it some other way like using ViewBag and just set the value when it's passed on view.
You can add a hidden field to save the initially loaded value. Eg
<div id="dvstatus">
#Html.HiddenFor(model => model.Study.StudyStatusId)
#Html.DropDownListFor(model => model.Study.StudyStatusId, Model.StatusSelectList, new { id = "ddlStatus" })
</div>
Then you can use java script to compare current value of the drop down and the value of the hidden field(which has the initial value).