Using Kendo Grid in an MVC application.
The primary model for the View (PlanViewModel) contains a property which is a foreign key to another entity (BuildingId) For instance,
public class PlanViewModel
{
public int PlanId { get; set; }
public string PlanName { get; set; }
public int BuildingId { get; set; }
...
}
The Building ID is to be populated by the selected row of a BuildingGrid on the View.
So with the BuildingGrid, I'm using the .Selectable setting to invoke an onChange event. How in the following event would I update the model.BuildingId
function onChange(arg) {
var selected = $.map(this.select(), function (item) {
return $(item).text();
});
/// UPDATE MODEL BuildingId here
}
Thanks!
Figured it out. First, I associated an Html attribute to the model property like so:
#Html.HiddenFor(m => m.BuildingID, new {id = "Id"})
Then I added the following jquery script:
$('#BuildingGrid').click(function() {
var gview = $(this).data("kendoGrid");
var selectedItem = gview.dataItem(gview.select());
var BuildingId = selectedItem.BuildingId;
$("#Id").val(BuildingId);
});
That set the Model.BuildingId perfectly.
Thanks to a tip I got from here: set a value to model using jQuery
Related
Here I am retrieving items and including the creator of the item. The goal is to include only the first and last name from the creator, not the entire user model.
var items = _db.Items.Include("Creator")
The item model has Creator as a navigation property like this:
public User Creator { get; set; }
It works fine, but it loads the entire user model, when really I just want the first name and last name.
How do I specify I only want specific property returned from the user model?
You cannot do that using Include. You can use Select instead:
var items = _db.Items.Select(i => new { Item = i, Creator = new { i.Creator.FirstName, i.Creator.LastName } });
Update
If you need to return that query as method result you have to create a class which could hold the results:
public class ItemWithCreatorNames
{
public Item Item { get; set; }
public string CreatorFirstName { get; set; }
public string CreatorLastName { get; set; }
}
var items = _db.Items.Select(i => new ItemWithCreatorNames { Item = i, CreatorFirstName = i.Creator.FirstName, CreatorLastName = i.Creator.LastName });
I have difficulties understanding the inner workings of the TreeView widget. I am referring to the Kendo code library example, specifically the Ajax loading snippet:
//Ajax binding data
public JsonResult Employees(string id)
{
XElement element = XElement.Load((Server.MapPath("~/App_Data/employees.xml")));
IEnumerable<Employee> result;
if (!string.IsNullOrEmpty(id))
{
//search for id and return it's children
result = FindByID(id, element.Element("Employee")).Element("items").Elements("Employee").Select(e => ToEmployee(e));
}
else
{
//return first level nodes
result = element.Elements("Employee").Select(e => ToEmployee(e)) ;
}
return Json(result, JsonRequestBehavior.AllowGet);
}
//Find the XML element by Id
private XElement FindByID(string id, XElement element)
{...}
//Convert XML element to Object
private Employee ToEmployee(XElement element)
{
return new Employee()
{
id = int.Parse(element.Element("employeeId").Value),
name = element.Element("name").Value,
hasChildren = element.Element("items") != null
};
}
This is the Model used, which corresponds to the actual XML structure:
public class Employee
{
public int id { get; set; }
public string name { get; set; }
public bool hasChildren { get; set; }
public List<Employee> items { get; set; }
}
The View executes the following code:
#(Html.Kendo().TreeView()
.Name("ajaxTree")
.DataTextField("name")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Employees", "Home");
});
})
)
What bothers me is the fact that the Model needs to be implemented exactly as in this example. Specifically, the "id" and "hasChildren" properties need to be specified exactly in this manner. Modifying, for example, "id" into "Id" would render this example ineffective and the TreeView would not load. Can somebody help me with the following?
How is the binding actually accomplished?
Why must I design my model with lower-case properties? (I know it sound weird, but it conflicts with the rest of my (group) project's formatting...)
Is there a way to bind the Kendo required "id" and "hasChildren" to other properties (same function, different name)?
Not sure if you got an answer for your question.
This link http://demos.kendoui.com/web/treeview/remote-data.html will help you understand how your model data is bound to treeview. Please go through below links.
HierarchicalDataSource - http://docs.kendoui.com/api/framework/hierarchicaldatasource
DataSource - http://docs.kendoui.com/api/framework/datasource
Model - http://docs.kendoui.com/api/framework/model
For question #2, #3
Yes, it is possible to configure your model properties as below:
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees",
children: "EmployeeArray"
}
}
I am stuck with this problem.
I have a model AssessmentModel defined like this:
public class AssessmentModel
{
public Respondent Respondent { get; set; }
public List<CompetencyModel> Competencies { get; set; }
}
public class CompetencyModel
{
public int Id { get; set; }
public string Name { get; set; }
public List<ResultModel> Results { get; set; }
}
public class ResultModel
{
public int Id { get; set; }
public int Score { get; set; }
}
All I need is to set value to the Score property of ResultModel.
Score is the only editable property here.
And I have just 1 View only, this view has a #model List, it displays a list of CompetencyModel items with Edit button for each one.
When I click the Edit button, the Id of CompetencyModel is passed to the same View, and the View draws an Edit form for ResultModel items that belong to the selected CompetencyModel.
However the form for ResultModel items exists on the same View, and the model of the View is still #model List.
How can I get to the Score property by using bindable Html.EditorFor(m=>m.Score) helper for each ResultModel item?
The View is defined like this:
#model List<CompetencyModel>
#foreach(var comp in Model)
{
<p>#comp.Name</p>
Edit
}
In the controller I set ViewBag.CurrentId = comp.Id, and at the bottom of the View:
if(ViewBag.CurrentId != null) //draw a form for ResultModel items
{
// What should I do now?
// how cant I use Html.EditorFor(m=>...) if the Model is still List<CompetencyModel>
}
I need to get to a single ResultModel entity to set a value to a Score property.
Thank you.
You should be able to get this done using Linq. Consider having the following code segment in the your last if statement
var result = Model.Results.FirstOrDefault(r => r.Id == ViewBag.CurrentId);
I dont have a IDE with me, so watchout for syntext errors
I'm working on the first MVC3 project at our company, and I've hit a block. No one can seem to figure out what's going on.
I have a complex Model that I'm using on the page:
public class SpaceModels : List<SpaceModel> {
public bool HideValidation { get; set; }
[Required(ErrorMessage=Utilities.EffectiveDate + Utilities.NotBlank)]
public DateTime EffectiveDate { get; set; }
public bool DisplayEffectiveDate { get; set; }
}
In the Controller, I create a SpaceModels object with blank SpaceModels for when Spaces get combined (this would be the destination Space).
// Need a list of the models for the View.
SpaceModels models = new SpaceModels();
models.EffectiveDate = DateTime.Now.Date;
models.DisplayEffectiveDate = true;
models.Add(new SpaceModel { StoreID = storeID, SiteID = siteID, IsActive = true });
return View("CombineSpaces", models);
Then in the View, I am using that SpaceModels object as the Model, and in the form making a TextBox for the Effective Date:
#model Data.SpaceModels
#using (Html.BeginForm("CombineSpaces", "Space")) {
<div class="EditLine">
<span class="EditLabel LongText">
New Space Open Date
</span>
#Html.TextBoxFor(m => m.EffectiveDate, new {
size = "20",
#class = "datecontrol",
// Make this as a nullable DateTime for Display purposes so we don't start the Calendar at 1/1/0000.
#Value = Utilities.ToStringOrDefault(Model.EffectiveDate == DateTime.MinValue ? null : (DateTime?)Model.EffectiveDate, "MM/dd/yyyy", string.Empty)
})
#Html.ValidationMessageFor(m => m.EffectiveDate)
</div>
<hr />
Html.RenderPartial("_SpaceEntry", Model);
}
The Partial View that gets rendered iterates through all SpaceModels, and creates a containing the Edit fields for the individual SpaceModel objects. (I'm using the List to use the same Views for when the Spaces get Subdivided as well.)
Then on the HttpPost, the EffectiveDate is still back at it's DateTime.MinValue default:
[HttpPost]
public ActionResult CombineSpaces(SpaceModels model, long siteID, long storeID, DateTime? effectiveDate) {
// processing code
}
I added that DateTime? effectiveDate parameter to prove that the value when it gets changed does in fact come back. I even tried moving the rendering of the TextBox into the _SpaceEntry Partial View, but nothing worked there either.
I did also try using the #Html.EditorFor(m => m.EffectiveDate) in place of the #Html.TextBoxFor(), but that still returned DateTime.MinValue. (My boss doesn't like giving up the control of rendering using the #Html.EditorForModel by the way.)
There has to be something simple that I'm missing. Please let me know if you need anything else.
Looking at the source code for DefaultModelBinder, specifically BindComplexModel(), if it detects a collection type it will bind the individual elements but will not attempt to bind properties of the list object itself.
What model binding does is attempt to match the names of things or elements in the view to properties in your model or parameters in your action method. You do not have to pass all of those parameters, all you have to do is add them to your view model, then call TryUpdateModel in your action method. I am not sure what you are trying to do with SpaceModel or List but I do not see the need to inherit from the List. Im sure you have a good reason for doing it. Here is how I would do it.
The view model
public class SpacesViewModel
{
public DateTime? EffectiveDate { get; set; }
public bool DisplayEffectiveDate { get; set; }
public List<SpaceModel> SpaceModels { get; set; }
}
The GET action method
[ActionName("_SpaceEntry")]
public PartialViewResult SpaceEntry()
{
var spaceModels = new List<SpaceModel>();
spaceModels.Add(
new SpaceModel { StoreID = storeID, SiteID = siteID, IsActive = true });
var spacesVm = new SpacesViewModel
{
EffectiveDate = DateTime.Now,
DisplayEffectiveDate = true,
SpaceModels = spaceModels
};
return PartialView("_SpaceEntry", spacesVm);
}
The POST action method
[HttpPost]
public ActionResult CombineSpaces()
{
var spacesVm = new SpacesViewModel();
// this forces model binding and calls ModelState.IsValid
// and returns true if the model is Valid
if (TryUpdateModel(spacesVm))
{
// process your data here
}
return RedirectToAction("Index", "Home");
}
And the view
<label>Effective date: </label>
#Html.TextBox("EffectiveDate", Model.EffectiveDate.HasValue ?
Model.EffectiveDate.Value.ToString("MM/dd/yyyy") : string.empty,
new { #class = "datecontrol" })
Sometimes you need to explicitly bind form data using hidden fields such as
#Html.HiddenField("EffectiveDate", Model.EfectiveDate.)
In order to bind the properties of the SpaceModel object you can add individual properties such as SiteID to the view model or add a SpaceModel property for a single SpaceModel. If you want to successfully bind a complex model, add it as a Dictionary populated with key-value pairs rather than a List. You should then add the dictionary to the view model. You can even add a dictionary of dictionaries for hierarchical data.
I hope this helps :)
This page works in two steps,
Step 1 - The user hits Index() and the SelectList is populated with the applications from the databse.
Step 2 - they select an applicaiton from the list, which posts the page back, which reloads the page with the application Details added
Error: When I run this and get to step 2, I get an error back saying:
The ViewData item that has the key 'ApplicationId' is of type 'System.Int32' but must be of type 'IEnumerable'.
This appears to be because the Model.ApplicationList is now null as it hasn't bound back to the model when the form was posted, can I make it do this?
View:
#using (Html.BeginForm())
{
#Html.DropDownListFor(x => x.ApplicationId, Model.ApplicationList, "Select an Application" , new { #onchange = "this.form.submit();" })
}
Model:
public class IndexModel
{
public int ApplicationId { get; set; }
public List<SelectListItem> ApplicationList { get; set; }
public string Detail { get; set}
}
Controller:
public ActionResult Index()
{
using (var dc = new Entities())
{
var model = new IndexModel();
model.ApplicationList = new List<SelectListItem>();
var applications = dc.Applications.OrderBy(a => a.Name).ToList();
foreach (var application in applications)
{
model.ApplicationList.Add(new SelectListItem
{
Selected = false,
Text = application.Name,
Value = application.Id.ToString()
});
}
model.ApplicationId = 1;
return View(model);
}
}
[HttpPost]
public ActionResult Index(IndexModel model)
{
model.Detail = GetDetail(model.ApplicationId);
return View(model);
}
I was struggling with the same problem. It doesn't look like .net mvc3 lets you do this without the help of jquery. Drop down lists will get their selected item bound to the model when posting but not all the items in the combo box. You would have to rebuild it each time you pass the viewmodel back to the view.
Another way around losing the dropdown list is to use ajax.