Hi,
Datepicker selection is not working other than first row. please find the below code.
<script type="text/javascript" language="javascript">
$(function () {
var date = new Date();
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var currentYear = date.getFullYear();
$(".datepicker").datepicker({
showOn: "button",
buttonImage: "/calendar.jpg",
buttonImageOnly: true,
buttonText: "Select date",
minDate: new Date(currentYear, currentMonth, currentDate)
});
});
$(function () {
$('.edit-mode').hide();
$('.edit-user, .cancel-user').on('click', function () {
var tr = $(this).parents('tr:first');
tr.find('.edit-mode, .display-mode').toggle();
});
$('.save-user').on('click', function () {
var tr = $(this).parents('tr:first');
var cmpId = tr.find("#EditCompId").val();
var endDate = tr.find("#EditEndDate").val();
tr.find("#lblEndDate").text(endDate);
tr.find('.edit-mode, .display-mode').toggle();
var url = '@Url.Action("UpdateComplementaryDetails", "Complimentary")';
url = url + "?complementaryId=" + cmpId + "&endDate=" + endDate;
window.location.href = url;
});
})
</script>
<tr style="width: 100%;">
<td style="width: 100%;">
@{ WebGrid grid = new WebGrid(Model, canPage: true, rowsPerPage: 20); }
@if (Model != null)
{ @grid.GetHtml(tableStyle: "booking_table",
headerStyle: "",
alternatingRowStyle: "booking_row",
selectedRowStyle: "booking_row",
htmlAttributes: new { id = "Benefit Details", style = "Width:100%" },
rowStyle: "booking_row", columns: grid.Columns(
grid.Column("Action", format: @<text>
<img class="edit-user display-mode" alt='Edit' src='@Url.Content("~/Content/Images/Main/edit.jpg")' />
<button class="save-user edit-mode">Save</button>
<button class="cancel-user edit-mode">Cancel</button>
<button class="save-user edit-mode" type="button">
Save</button>
<button class="cancel-user edit-mode" type="button">
Cancel</button>
<input id="hdnComplementaryId" type="hidden" value="@item.iComplementaryId" />
</text>, style: "col3Width", canSort: false),
grid.Column("Name", "Name", format: (item) => item.Name, style: null, canSort: false),
grid.Column("Email", "Email", format: (item) => item.Email, style: null, canSort: false),
grid.Column("CardName", "Card Name", format: (item) => item.CardName, style: null, canSort: false),
grid.Column("StartDate", "Start Date", format: (item) => string.Format("{0:dd-MMM-yyyy}", item.StartDate), style: null, canSort: false),
grid.Column("EndDate", "End Date", format: @<text>
<span class="display-mode">
<label id="lblEndDate">@string.Format("{0:dd-MMM-yyyy}", item.EndDate)</label>
</span>
<span class="edit-mode">
<input id="EditEndDate" type='text' class='datepicker' value="@string.Format("{0:dd-MMM-yyyy}", item.EndDate)" />
<input id="EditCompId" type="hidden" value="@item.iComplementaryId" />
</span>
</text>, style: "col2Width"),
grid.Column("Status", "Status", format: (item) => item.Status, style: null, canSort: false)))
}
</td>
</tr>
Thanks,
Sriram