I have a dropdownlist of car brands:
#Html.DropDownListFor(
model => model.Brand,
new SelectList(
new List<Object>{
new { value = "Opel" , text = "Opel" },
new { value = "Lada" , text = "Lada" },
new { value = "BMW" , text = "BMW"}
},
"value",
"text"
As you can see, i was too lazy for making any classes, and thies code at the View.
How can i make a second dropdownlist: with car models ? I mean that user selects "Opel" and then can select "Corsa" or "Vectra" but not "X6" or "2110" ?
Looking for the most simple way to do it.
You want to make a cascading dropdown, probably using ajax.
This tutorial was almost made perfectly for you (car themed)
http://stephenwalther.com/archive/2008/09/07/asp-net-mvc-tip-41-creating-cascading-dropdown-lists-with-ajax.aspx
Related
I've looked all over for help on this, which should be extremely easy, but I can't find exactly what I need. Here is my jsFiddle, which contains a super basic Kendo grid. I just want to get all data for the row that is currently selected (using a column of radio buttons) when the button is clicked.
http://jsfiddle.net/HTXua/412/
I know that when a row is selected, it is altering a property in the css class. Therefore, the row that I am trying to retrieve is going to have the property:
.detailGridRowSelector:checked
I have managed to implement the first row using checkboxes (instead of radio buttons) and count how many are checked, but I can't access the data for some reason!
var dataSource = {
data: [
{
"first": "Adam",
"last": "Paul"},
{
"first": "Shannon",
"last": "Harris"},
{
"first": "Frank",
"last": "Rolinson"},
]
};
var columns = [
{
template:'<input type="radio" class="detailGridRowSelector" title="Select Lines" name="radioLineSelector" />', width: 20
},
{
field: "first",
title: "First Name",
width: "90px"},
{
field: "last",
title: "Last Name",
width: "90px"},
];
$("#grid1").kendoGrid({
dataSource: dataSource,
columns: columns,
});
$("#getInfoButton").bind("click", function () {
var lineData ="line data would be set here";
//I know the selected row has the property: .detailGridRowSelector:checked
alert(lineData);
});
You should do:
// Get a reference to the grid
var grid = $("#grid1").data("kendoGrid");
// Get checked row by getting the input and then the row containing the input
var row = $("input:checked", grid.tbody).closest("tr");
// Get the item
var item = grid.dataItem(row);
// Format and display item
alert (JSON.stringify(item));
Your JSFiddle modified here: http://jsfiddle.net/OnaBai/HTXua/414/
SOLVED
Turns out I was making this way too hard on myself. I just learned that Kendo has a feature built in that handles this for you, so instead of using a column of radio buttons, I deleted it and implemented the
selectable: 'row'
feature. Then I just got it using
var grid = $("#grid1").data("kendoGrid");
var row = grid.select();
var data = grid.dataItem(row);
alert(data.first);
I'm using ASP.NET MVC3
I need to create a DropDownList with 4 values :
Don't mind
0
1
2 or +
with "Don't mind" as selected item.
Here is my code :
public static IEnumerable<SelectListItem> ListAnimals()
{
List<SelectListItem> items = new List<SelectListItem>();
items.Add(new SelectListItem { Text = "Don't mind", Value = "-1", Selected = true });
items.Add(new SelectListItem { Text = "0", Value = "0" });
items.Add(new SelectListItem { Text = "1", Value = "1" });
items.Add(new SelectListItem { Text = "2 or +", Value = "2" });
return items;
}
and I use it like this in my view :
#Html.DropDownListFor(m => m.AnimalNumber, new SelectList(Animal.ListAnimals() , "Value", "Text"))
With this code, the selected item is always "0" whereas it should be "Don't mind" as I explicitly write it.
BUT
when : items.Add(new SelectListItem { Text = "0", Value = "0" });
became : items.Add(new SelectListItem { Text = "0", Value = "[Anything but 0]" });
it perfectly works and "Don't mind" is correctly selected.
So, I think MVC automatically select item where Value = "0", in spite of the keyword Selected... How can I override it ? I really need to let Value = "0", and I'm sure we can override this behavior.
Do someone know how ?
(BTW, I know my question is very close of this one but the answers given in this thread don't satisfy me. I don't want to write my DDL in HTML because I'll loose the binding between my value and my model, and writing a jQuery script to change the selected value is "a little bit hacky".)
Do any proper way exists ?
When you use the strongly-typed html helper for a DropDownList (Html.DropDownListFor), the Selected property of SelectListItem is overwritten by the value of your Model Property. It makes sense. So, when you use the Html Helper like below, the selected value will be Model.AnimalNumber. Since, the default value for an int is 0, when you create a new Model, and send it to your View, the value of its int properties are defaulted to 0. So, in this case, Model.AnimalNumber is 0, and therefore, the selected value of the DropDownList is the item with the value of 0.
#Html.DropDownListFor(m => m.AnimalNumber, Animal.ListAnimals())
In order to solve that issue, you can either change the type of your property to int? or you can make sure that the value of none of your SelectListItems is 0, or you can set a default value for your property (in this case AnimalNumber = -1).
I have a Grid which has edit set to Popup.
In my grid model, I have defined a field level validation for uniqueness like below. How can I know which is the currently select row so I can avoid comparing my field value with the same row's value?
model: {
id: "id",
fields: {
id: {
nullable: false,
editable: false,
hidden : true
},
"timeStamp": {
type: "date",
validation: { // validation rules
required: true, // the field is required
unique: function (input) {
if (!input.is("[name=timeStamp]")) {
return true;
}
input.attr("data-unique-msg", '${msg.UNIQUE_TIME}' );
var data = grid.dataSource.data();
//HOW CAN I KNOW WHICH ROW Is currently selected?
I am also working with custom validators on a Kendo Grid Popup Window. I used the following code to obtain the model:
var m = $(input).closest('.k-popup-edit-form').data('kendoEditable').options.model;
I prefer this mechanism because I don't have refer to the grid object, making the code more portable from page to page.
Maybe a little tricky solution but it should work... Each record in a DataSource has a Unique Id assigned by Kendo UI. These uid, for popup editing is used in the window in such a way that Kendo UI can easily identify the record being edited without having to save the state. You should do the same.
Your function just need to do:
var uid = $(input).closest(".k-popup-edit-form").data("uid");
var item = grid.dataSource.getByUid(uid);
Now, item contains all the fields of the record being edited.
I'm trying to achieve a very common scenario whereas given a list of options to choose from, the last one says "Other" and when selected the user is presented with the input field to specify what "other" is.
In my case, it's a list of Person's titles:
public List<string> TitleList
{
get
{
return new List<string> { "Mr", "Mrs", "Miss", "Dr", "Other" };
}
}
and what I'm trying to do is this:
#Html.DropDownListFor(m => m.Title, new SelectList(Model.TitleList), "Please select...") #Html.TextBoxFor(m => m.Title)
I want the model to bind the TextBox value when "Other" is selected in the DropDownLis, and bind to selected item in DropDownList in all other cases.
Is this achievable without adding an extra property on the Model?
a better solution is not to bind to two fields, instead, copy selected item from a drop-down into bound textbox with some clever javascript:
#Html.DropDownList("ddlTitle", new SelectList(Model.TitleList), "Please select")
#Html.TextBoxFor(m => m.Title, new { maxLength = 10 })
Javascript:
ToggleTitleFields = function () {
var title, txtTitle;
title = $('select#ddlTitle').val();
txtTitle = $('input#Title');
if (title === "Other") {
txtTitle.val("");
txtTitle.show();
return txtTitle.focus();
} else {
txtTitle.hide();
txtTitle.val(title);
return $('span[data-valmsg-for="Title"]').empty();
}
};
$(document).on("change", "select#ddlTitle", function(e) {
return ToggleTitleFields();
});
hope this helps somebody
found a client-side solution: add/remove the "name" attribute from DropDownList. Here's my coffee script:
ToggleTitleFields = () ->
if $('select#Title').val() == "Other"
$('select#Title').removeAttr('name')
else
$('select#Title').attr('name','Title')
Tsar,
Being honest, this isn't a scenario that I've had to deal with before, but is nonetheless a good one. If I were faced with this dilemma and was allowed to use a javascript solution, i'd present a previously 'hidden' textbox when other was chosen. The user would then have to enter the new value into this texbox, which on loosing focus would populate the selectlist and be selected. Then when the form was submitted, you'd have this new value still as part of the exisiting model.
Of course, you could also do a similar logic of showing the textbox when selecting other but this time, do a little logic on the httpost controller action to determine if the 'other' item was selected and then populate the model from the 'textbox' value.
Of course, both scenarios would need a heap of validation, but in principle, either approach would 'work'
Below is the Javascript code used.
google.load("elements", "1", {packages : ["newsshow"]});
function loadNews(newsQuery)
{
//Load the news feed according to the topic selected
var options =
{
"format": "300x250",
"queryList" :
[
{
"title" : newsQuery,
"q" : newsQuery
}
]
}
var content = document.getElementById('content');
var newsShow = new google.elements.NewsShow(content, options);
}
The newsAddress value is a text box value entered by user. And based on the textbox value, the div element 'content' gets updated with a new element.
My problem is, every-time when I enter a value in text box (newsAddress), a news item in 'content' element is getting inserted one below the other. My requirement is to update the same news element based on the new search criteria.
How can this be done?