I am currently trying to create a page which needs two date pickers in order to get the date time. I have to use another viewmodel to show person detail,so the system time model could not be used on the same page?
Is there anyont got idea about how to solve this problem?
cheers.
Add your 2 date time properties to your viewmodel.
public DateTime MyDate1{ get; set; }
public DateTime MyDate2{ get; set; }
In your view add a class to your input fields
#Html.TextBoxFor(m => m.MyDate1, new{ Class = "datepicker" })
#Html.TextBoxFor(m => m.MyDate2, new{ Class = "datepicker" })
Use JQuery's date picker. http://jqueryui.com/demos/datepicker/
<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>
Related
I want to custom edit filed for KENDO UI grid with date.
I created grid like this:
#(Html.Kendo().Grid<TT.TT.Web.Models.ViewModel.WorkViewModel>()
.Name("gridAdd")
.Columns(columns =>
{
columns.Bound(work =>
work.Date).EditorTemplateName("WorkDate");
})
)
Editor template look like this:
#model DateTime?
#(Html.Kendo().DatePicker()
.Name("WorkDate")
.Value(Model == null ? DateTime.Now.Date : #Model).Format("dd.MM.yyyy")
)
And in TT.TT.Web.Models.ViewModel.WorkViewModel have this property:
[Display(Name = "Datum")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd.MM.yyyy}")]
public DateTime Date { get; set; }
Everythink works, but when I click to edit date column, the value is always empty. I need to set default value due to value in non edit mode. Thanks!
When i look to DateTime modeli in editor:
#model DateTime?
#Html.Raw(#Model)
The value is always: 01.01.0001 0:00:00 and it should be 11.07.1990
Below is the Property in my viewModel of Datetime,I want to display only date on the View,
Can any one help me out in formatting this. right Now Im seeing 01/01/2010 12:00:00 AM
public DateTime ModifiedDate
{
get
{
return Region.ModifiedDate;
}
set
{
Region.ModifiedDate = value;
}
}
#Html.TextBoxFor(model => model.ModifiedDate)
Model
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyy}" )]
public DateTime RecipeDate{ get; set; }
Edit Template
#model DateTime
#Html.TextBox("", string.Format(ViewData.TemplateInfo.FormattedModelValue.ToString(), Model), new { #class = "date" })
EditorFor doesn't allow for custom attributes, you must use a TextBox or TextBoxFor
I created an editor template (located in the Shared\EditorTemplates folder in my solution) that looks like this:
#model System.DateTime?
#Html.TextBox("", Model.HasValue ? Model.Value.ToString("MM/dd/yyyy") : string.Empty, new { #class = "date"})
And then when I want to use it,
#Html.EditorFor(model => model.RecipeDate, new { #class = "date" })
#Html.ValidationMessageFor(model => model.RecipeDate)
Seems to work pretty well for me.
I am using the MVC version of the Telerik controls with ASP.NET MVC and the razor view engine. I have an AJAX grid. When I click edit I want it to display the data in form style. But the issue is that I want to rearrange the in form controls they way that I want them to display. How would I do something like that? Currently the controls are all beneath each other. I want to create my own layout for editing.
I have a whole lot of other controls on the view, one of them being this grid. My view model object has a list of Children objects and I want to use my grid to populate this list.
The view model for my view:
public class EditGrantApplicationViewModel
{
public string EmployeeNumber { get; set; }
public string Title { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
// Other properties
// I want this to be populated from the grid
public IEnumerable<Children> Children { get; set; }
}
My grid's code for the Children list:
#(Html.Telerik().Grid(Model.Children)
.Name("grdChildren")
.Columns(column =>
{
column.Bound(x => x.Id);
column.Bound(x => x.FullName);
}
)
.DataKeys(keys =>
{
keys.Add(x => x.Id);
}
)
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select("_SelectAjaxEditing", "Grid")
.Insert("_InsertAjaxEditing", "Grid")
.Update("_SaveAjaxEditing", "Grid")
.Delete("_DeleteAjaxEditing", "Grid");
}
)
.ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text))
.Editable(editing => editing.Mode(GridEditMode.InForm))
)
I'm not sure how my editor template must look like? What must it extend? And I can't get it to show in the inline form. I worked through the sample from Brad Wilson but I am not getting it. Can someone please explain what is happening?
Just another questions.. On my other page I have a grid with other HTML controls on the page. If I am busy editing data in the grid, and click insert, how would I prevent the other controls on the page not to be validated?
You can define a custom editor template for your model and arrange the fields as you wish. This code library project shows how.
I have two classes, Vat and Product. Product has a property of IVat. I am trying to use editor templates in MVC to display a dropdown list of all the Vat objects when creating/editing a Product. For the dear life of me I cannot get this working.
I have the following code which displays the dropdown but it does not set the Vat for the Product when the form gets submitted.
Controller:
IList<IVatRate> vatRates = SqlDataRepository.VatRates.Data.GetAllResults();
ViewBag.VatRates = new SelectList(vatRates, "Id", "Description");
Add.cshtml
#Html.EditorFor(model => model.VatRate.Id, "VatSelector", (SelectList)ViewBag.VatRates)
VatSelector.cshtml
#model SelectList
#Html.DropDownList(
String.Empty /* */,
(SelectList)ViewBag.Suppliers,
Model
)
I would be grateful if anyone can shed some light on this or even point me to a good example on the web somewhere...I have been stuck with this for quite a few days now.
I would use strongly typed views and view models as it makes things so much easier rather than ViewBag.
So start with a view model:
public class VatRateViewModel
{
public string SelectedVatRateId { get; set; }
public IEnumerable<IVatRate> Rates { get; set; }
}
then a controller:
public class HomeController: Controller
{
public ActionResult Index()
{
var model = new VatRateViewModel
{
Rates = SqlDataRepository.VatRates.Data.GetAllResults()
};
return View(model);
}
[HttpPost]
public ActionResult Index(VatRateViewModel model)
{
// model.SelectedVatRateId will contain the selected vat rate id
...
}
}
View:
#model VatRateViewModel
#using (Html.BeginForm())
{
#Html.DropDownListFor(
x => x.SelectedVatRateId,
new SelectList(Model.Rates, "Id", "Description")
)
<input type="submit" value="OK" />
}
And if you wanted to use editor template for the VatRateViewModel you could define one in ~/Views/Shared/EditorTemplates/VatRateViewModel.cshtml:
#model VatRateViewModel
#Html.DropDownListFor(
x => x.SelectedVatRateId,
new SelectList(Model.Rates, "Id", "Description")
)
and then whenever somewhere you have a property of type VatRateViewModel you could simply:
#Html.EditorFor(x => x.SomePropertyOfTypeVatRateViewModel)
which would render the corresponding editor template.
I'm trying to bind a list of model objects to a grid using the MvcContrib Grid helper. Obviously, emitting an HTML table is easy enough, but I'm struggling with returning all the selected rows (or all rows and filtering via a Where(x => x.Selected)).
Here's a dummy version of what I mean:
Model:
public class Player
{
[ScaffoldColumn(false)]
public int Id { get; set; }
public string Name { get; set; }
public int JerseyNumber { get; set; }
public string Position { get; set; }
[ScaffoldColumn(false)]
public bool Selected { get; set; }
}
View:
#model democode.Models.Player
#using (Html.BeginForm())
{
#{
var grid = Html.Grid(Model)
.AutoGenerateColumns()
.Columns(c => c.For(p => Html.CheckBoxFor(_ => p.Selected)).InsertAt(0))
.Columns(c => c.For(p => Html.HiddenFor(_ => p.Id)))
grid.Render();
}
<p>
<input type="submit" value="Submit" />
</p>
}
So, what you are looking at is a grid of hockey players with a checkbox before each one, allowing the user to select one or more. On clicking submit, I'd like for it to post the collection back (understanding that all but Selected and Id would be null/default), but I understand the problem is that the records coming across in the POST data have overlapping keys in the list of key-value pairs.
I have successfully worked around this in the past by hand-writing the HTML table and using the strategy Phil Haack outlines here: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx
My question is, can I do the same thing using the Grid helper from MvcContrib, or is it more work than what it's worth?