MVC Grid with a datepicker - what is the best way?

Question

I have previously asked how to put a datepicker in a grid, and I did not get a response. I found that the way I did it didn't work, becuse the ID of all the fields in the same column was the same. So when I put in a date, only the first field in a column got updated. I sent a message asking how to set the ID of a field to prevent this, but no one seemed to know. So I am now looking at JQ Grid and MVC Contrib grid. I am new to both and I am concerned it will take me some time to figure it out. Which one should I use?

* EDIT * This is some extra information as to where I am In my view I have a foreach look and I render a partial view thus;

<tr>
    <td><%: Model.T.BankHolidayDescription%></td>
    <td><%: Html.EditorFor(model => model.BH.NullableBankHolidayDate)%></td>
    <td><%: Html.EditorFor(model => model.BH.BankHolidayComment)%></td>
</tr>

I also have an editor template to assign the datepicker to the date field thus;

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>
<%:Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" }) %>

The problem I have is that the ID for every NullableBankHolidayDate field in the grid is the same. So when I select a date, the first field in the column gets updated regardless of the one I choose.

Answer 1

You can do what you originally require with JQuery and a standard grid. Set a class attribute on your textboxes you want updating then set jquery to add a datepicker on those classes - rather than on the element id.

For example - assuming you are using JQuery UI datepicker.

<% foreach (var myObject in Model) { %>
    <tr>
        <td><%= Html.TextBox("MyProperty", myObject.MyProperty, new { @class = "date" }) %></td>
    </tr>
<% } %>

<script type="text/javascript">
    $(function()
    {
        $('.date').each(function()
        {
            $(this).removeClass('hasDatepicker').datepicker();
        });
    });
</script>