I currently have the multiselect working the way I want it with one exception. Preloading previously selected items.
My view looks:
<div class="editor-field">
#Html.LabelFor(model => model.UntaggedPersons)
#Html.ListBoxFor(model => model.PeopleToTag,
new SelectList(Model.CommitteeMembers, "PersonId", "FullName"))
</div>
JS:
$("#PeopleToTag").kendoMultiSelect({ "dataTextField": "FullName", "dataValueField": "PersonId", "placeholder": "Tag or Untag Persons to Action Item" });
PeopleToTag is an IEnumerable<int> int that posts to the controller
CommitteeMembers consists of a persons First, Last, FullName, and PersonId
This works perfectly, I can manipulate who is tagged in the post to the controller.
Now I want to add the functionality of preselecting those that are currently tagged.
How do I add a preselected Value? I have a model with:
model.TaggedPersons consists of a persons First, Last, Fullname, PersonId.
How do I wire up the javascript to display the model.TaggedPersons as the already selected value?
I don't mind using the MVC wrapper approach if it is easier.
I've tried something like:
<div class="editor-field">
#Html.LabelFor(model => model.TaggedPersons)
#(Html.Kendo().MultiSelectFor(model => model.PeopleToTag)
.Name("PeopleToTag")
.Placeholder("These people are Tagged")
.DataTextField("FullName")
.DataValueField("PersonId")
.BindTo(Model.CommitteeMembers)
.Value(Model.TaggedPersons)
)
</div>
However this isn't even rendering a kendo multiselect for me at present. That's the general thought of how I want to approach it though.
Any help is much appreciated!
Change:
DataTextField("FullName") to DataTextField("Text")
DataValueField("PersonId") to DataValueField("Value")
SelectList uses "Text" and "Value", respectively. You already filled the fields of the select list with FullName and PersonId when the selectlist was created.
Related
I need a way to set already selected values in a multi select dropdown in a edit view in a web application (ASP.NET, Mvc)
<div class="form-group">
<label>Choose Categories</label>
#Html.DropDownListFor(model => model.SelectedValues, new MultiSelectList(Models.GetCategoryList().OrderBy(c => c.Value), "Key", "Value"), "Select Category", new { #class = "chzn-select form-control", multiple = "multiple" })
</div>
this is view code, here I passed selected ids in to selected values array.(when I return values from DB , assign those in to a array then assign to here.
I need a edit view like this
please anyone suggest way to do this
Thank you.
To generate this view you can use select2 jquery plugin. Check out the following link.
https://select2.github.io/examples.html#multiple
I created a simple Tasks webapp using .NET 4.0 MVC & Entity Framework. Pulling data from a database.
I have tables:
Staff {PkId, FirstName, LastName}
Tasks {PkId, Task, TaskDescription, DueDate}
TasksAssigned {PkId, StaffId, TaskId}
When I go to Edit TasksAssigned record (Edit page) I'll get a form (stripped div/css for space)
#Html.LabelFor(model => model.PkId)
#Html.EditorFor(model => model.PkId)
#Html.LabelFor(model => model.StaffId)
#Html.EditorFor(model => model.StaffId)
#Html.LabelFor(model => model.TaskId)
#Html.EditorFor(model => model.TaskId)
But I need to be shown Task instead TaskId, and LastName instead StaffId. And I need is to have drop-downs in the form instead text field with all names and all tasks available so I can select other person or other task (or both).
I'm assuming I should use DropDownList() or DropDownListFor() ?
Thanks for any help.
(addon)
Let me try to explain better...
So, let's say there are Staff members:
{ 12, "John", "Dow" },
{ 15, "Bill", "Smith" }.
Let's say there is task
{ 3, "Clean the printer", "Call company to clean the printer... ", "2016-06-25" }.
So, there's going to be a record in TaskAssigned
{ 8, 12, 3 }
Ok?
Let's change the the record so the task is assigned to Bill instead John. So, I would click on "Edit" button and on the Edit page I would have form with two text fields ( [ and ] represent text field of the form)
Staff: John Dow
Task: Clean the printer
To change it I have to replace the name with 15, Bill's ID, right? I would like to have a drop-down with names of John and Bill and then select Bill's name and when submit, Bill's ID will be stored in TasksAssigned table.
I'm assuming you're including the other two tables when you call for your data. If so you should easily be able to display the fields you're needing with referencing towards the correct ones. Purely based on what's in your question this should look something like the below.
#Html.HiddenFor(model => model.TaskId)
#Html.LabelFor(model => model.Tasks.Task)
#Html.EditorFor(model => model.Tasks.Task)
#Html.LabelFor(model => model.Staff.LastName)
#Html.EditorFor(model => model.Staff.LastName)
I don't see the immediate need to show or even give an option to edit the PK value of the TaskAssigned entry. That's the reason I moved it to Hidden
If you want to give the users a dropdownlist you'll have to make sure you're sending the potential choices along in your Model. In this case you'll preferably want to be using a ViewModel to send along the choices.
That way you'll be able to do something like the below.
List<SelectListItem> listOfStaff = new List<SelectListItem>();
listOfStaff.Add(new SelectListItem
{
Text = "Mark",
Value = "1"
});
listOfStaff.Add(new SelectListItem
{
Text = "John",
Value = "2",
Selected = true
});
Leading you to the DropDownListFor you already referenced in your question.
#Html.DropDownListFor(model => model.StaffId, model.listOfStaff, "-- Select Staffmember --")
Hope this helps you along a little more towards a working solution.
I have Kendo MVC Grid with Popup Editor template.
I need to add Checkbox list for a model property. This is what I am doing
I declared a property in my view model like this...
public List<string> Category { get; set; }
This is how I am declaring Checkboxes in view
<ul>
#foreach (var g in (MultiSelectList)ViewData["BondPermitTypes"]) {
<li class="checkbox">
<label>
<input type="checkbox" name="Category" class="checkbox-removekvalid" id="Category_#g.Value" value="#g.Value.ToString()" />#g.Text
</label>
</li>
}
</ul>
This code is working fine when I edit the existing records...
The problem is when I try to create new record and select any checkbox, all of the checkboxes are getting checked
Moreover, even if I hack around using jquery and force it to check only selected checkboxes then when I post back the "Category" property has only one string all the time, which is "true".
I appreciate your help!
Sorry for the late reply...
To make it work, I have added the default value for the Category property in the Kendo Grid. Like this
.Model(model =>
{
model.Id(p => p.PkProperty);
model.Field(p => p.Category).DefaultValue(new List<string>());
})
Hope it helps you! :-)
I have my program with the following model:
public class PlayToy {
public int PlayToyID {get;set;}
public string Name {get;set;}
public bool Available {get;set;}
}
In my controller I have:
Viewbag.PlayToyID = new SelectList(db.PlayToys, "PlayToyID", "Name");
Here is the View
<div class="editor-label">
#Html.LabelFor(model => model.PlayToy
</div>
<div class="editor-field">
#Html.DropDownList("PlayToyID", "Choose a Toy")
#Html.ValidationMessageFor(model => model.PlayToyID)
</div>
This works fine for showing dropdown list of all the Toys on the list, but I would like
to only show the the Items that are 'Available' to play with.
I am new to MVC, so I don't know AJAX or any other Scripting languages to integrate into MVC. So I was wondering how to do this with using just MVC, and would the code to filter the list go in the controller or the view?
Use LINQ to filter your list using the Where() operator
Viewbag.PlayToyID = newSelectList(db.PlayToys.Where(x=>x.Available).ToList(), "PlayToyID", "Name");
I recommend reading up a little on LINQ and how you can apply it to Lists and use in things like Entity Framework. It is an extremely powerful tool in the .NET toolkit for filtering, ordering, grouping, sorting, etc.
I am playing with the Scaffolding that is in Asp.net mvc
I have a property on my view model for countries
public IEnumerable<SelectListItem> Countries { get; set; }
Yet, when I create a view and specify the viewmodel it doesn't scaffold a drop down list as I expected it to. In fact it get completely ignored.
I have compiled the project before doing it
I also tried adding a property like this
public int CountryId { get; set; }
As this article suggested there is a convention at work
http://blog.stevensanderson.com/2011/01/28/mvcscaffolding-one-to-many-relationships/
I am using the Add view option you have when right clicking in a controller action method
Any ideas what is wrong?
In my current project, i faced this problem and couldn't find a quick way to scaffold the Dropdown list of a one-many relation inside one of my Entities.
What I ended up doing was like the following:
1- Create the normal AddView=>Create way.
2- If i had a ID property in my model class, the defaul;t template will generate something like this to represent this property in my view:
<div class="editor-label">
#Html.LabelFor(model => model.CityID)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.CityID)
#Html.ValidationMessageFor(model => model.CityID)
</div>
3- Now I need to replace this default template with a working one, so I wrote this code in the CREATE method:
IEnumerable<SelectListItem> cityItems = dataContext.Cities.AsEnumerable().Select(c => new SelectListItem()
{
Text = c.Name,
Value = c.ID.ToString(),
Selected = false,
});
SelectList cityList = new SelectList(cityItems, "Value", "Text");
ViewBag.CityList = cityList;
this will fetch the Cities table and create a Selectlist that i can pass to my view and work with it to provide the DrobDown with it's items.
4- replace the default code in my View by one like the following:
<div class="Post-label">
<div class="editor-label">
#Html.LabelFor(model => model.CityID)
</div>
<div class="editor-field">
#Html.DropDownListFor(m => m.CityID, ViewData["CityList"] as SelectList)
#Html.ValidationMessageFor(model => model.CityID)
</div>
</div>
The reason I've used ViewData["CityList"] instead of ViewBag.CityList is that this one worked but the other not.
5- now my view is working find and is fetching the City data just like what I expected, and using the same model inside my Edit view resulted in a working one too.
Give it a try and let me know what happened, Thanks.
I have noticed that for a given model, the "Create" scaffold-generated code when creating a new controller is different than if you right-click in an existing controller and say "Add View" and choose the "Create" scaffolding template. In the first case, given you have the correct properties on the child class
public Country Country {get;set;}
public int CountryID {get;set;}
then this case (adding controller with MVC scaffolding read/write and appropriate Model class) WILL generate a #Html.DropDownList for the parent relationship, whereas right-clicking within the controller Create method will not scaffold the drop-down but will instead create an #Html.EditorFor for the relationship.
So the answer if you want scaffolding code to generate the drop-down may be to delete and re-create your controller if possible, otherwise manually add in the appropriate code.
In order to have the option to choose a country with a dropdown the property in your Model should be:
public Country Country{ get; set; } Navigation property used by EF, doesn't involve the database
with
public Country CountryId{ get; set; }
Create the foreign key on the Person table
Each instance/record of a person is associated with a country: the relation is defined with the navigation property via code and with the CountryID for the database.
The scaffholding template will then generate the edit/create methods and views using :
ViewBag.PossibleCountries
Here's a similar scenario.