Date Formatting not working - Telerik grid details - asp.net-mvc

Question

I am hoping this is easy. I googled and looked through the forums and cannot find a solid answer. One answer was to add the calendar js file but that did not seem to work.
Look at the highlighted code below. The first 2, with formatting defined, are blank and should not be. The next 2 have real long date formats when all I need is “MM/dd/yyyy”. Yikes!
<%= Html.Telerik().Grid<ViewModelProcurementAction>(Model.ProcurementActions) //
.Name("ProcurementActionGrid")
.DetailView(details => details.ClientTemplate(
Html.Telerik()
.TabStrip()
.Name("TabStrip_<#= Id #>")
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("Additional Info").Content(
"<table>" +
"<tr>" +
"<td style='vertical-align: top'>" +
"<b>Summary Description:</b><br/><#= SummaryDescription #>" +
"</td>" +
"<td style='vertical-align: top'>" +
//"<ul>" +
"<b>Modification Number:</b> <#= ModificationNumber #><br/>" +
"<b>Funding Type:</b> <#= FundingTypeName #><br/>" +
"<b>Department Name:</b> <#= DepartmentName #><br/>" +
"<b>Solicitation Type:</b> <#= SolicitationTypeName #><br/>" +
"<b>Date Entered:</b> <#= $.telerik.formatString('{0:d}', DateEntered) #><br/>" +
//"</ul>" +
"</td>" +
"<td style='vertical-align: top'>" +
"<b>FY12:</b> <#= $.telerik.formatString('{0:c0}', FyByKey[\"FY12\"]==null ? 0 : FyByKey[\"FY12\"]) #><br/>" +
"<b>FY13: </b><#= $.telerik.formatString('{0:c0}', FyByKey[\"FY13\"]==null ? 0 : FyByKey[\"FY13\"]) #><br/>" +
"<b>FY14: </b><#= $.telerik.formatString('{0:c0}', FyByKey[\"FY14\"]==null ? 0 : FyByKey[\"FY14\"]) #><br/>" +
"<b>FY15: </b><#= $.telerik.formatString('{0:c0}', FyByKey[\"FY15\"]==null ? 0 : FyByKey[\"FY15\"]) #><br/>" +
"<b>FY16: </b><#= $.telerik.formatString('{0:c0}', FyByKey[\"FY16\"]==null ? 0 : FyByKey[\"FY16\"]) #><br/>" +
"<b>FY17: </b><#= $.telerik.formatString('{0:c0}', FyByKey[\"FY17\"]==null ? 0 : FyByKey[\"FY17\"]) #><br/>" +
"<b>Out Year Funding: </b><#= $.telerik.formatString('{0:c0}', OutYearFunding==null ? 0 : OutYearFunding ) #><br/>" +
"</td>" +
"<td style='vertical-align: top'>" +
"<b>DBE %: </b><#= $.telerik.formatString('{0:0}', DBE==null ? 0 : DBE) #><br/>" +
"<b>Amount Exceeds: </b><#= AmountExceeds #><br/>" +
//--------------------------------------------------------------------------------
"<b>Cost/Price Analysis Date: </b><#= $.telerik.formatString('{0:MM/dd/yyyy}', CostPriceAnalysisDate==null ? '' : CostPriceAnalysisDate) #><br/>" +
"<b>OIG Review Completion Date: </b><#= $.telerik.formatString('{0:shortDate}', OIGReviewCompletionDate==null ? '' : OIGReviewCompletionDate) #><br/>" +
"<b>Required Procurement Initiation Date: </b><#= RequiredProcurementInitiationDate #><br/>" +
"<b>Required Date of Award: </b><#= RequiredDateOfAward #><br/>" +
//--------------------------------------------------------------------------------
"<b>Number of Option Years: </b><#= NumberOfOptionYears #><br/>" +
"<b>Budget Approval: </b><#= BudgetApproval #><br/>" +
"<b>Point of Contact: </b><#= PointOfContact #><br/>" +
"</td>" +
"<td style='vertical-align: top'>" +
"<b>PRMT Group: </b><#= PRMTGroupName #><br/>" +
"<b>Planned CA Responsible: </b><#= PlannedCAResponsibleFullName #><br/>" +
"<b>Value of Option Years: </b><#= $.telerik.formatString('{0:0}', ValueOfOptionYears==null ? 0 : ValueOfOptionYears) #><br/>" +
"<b>Award Amount: </b><#= $.telerik.formatString('{0:0}', AwardAmount==null ? 0 : AwardAmount) #><br/>" +
"<b>Awarded Vendor: </b><#= AwardedVendor #><br/>" +
"<b>Multiple Year Funding: </b><#= MultipleYearFunding #><br/>" +
"<b>Period of Performance: </b><#= $.telerik.formatString('{0}{1}{2}', PeriodOfPerformanceStartDate==null ? '' : PeriodOfPerformanceStartDate, PeriodOfPerformanceEndDate==null ? '' : ' - ', PeriodOfPerformanceEndDate==null ? '' : PeriodOfPerformanceEndDate) #><br/>" +
"<b>Comments: </b><#= Comments #><br/>" +
"</td>" +
"</tr>" +
"</table>"
);
items.Add().Text("Purchase of Materials").Content(
"<br/><input type='checkbox' disabled='disabled' name='AwaitingProcurementPackEnabled' <#= AwaitingProcurementPackEnabled ? checked='checked' : '' #> /> <b>Awaiting Procurement pack from Point of Contact</b><br/>" +
Html.Telerik()
.Grid<ViewModelProcurementActivity>()
.Name("ActionGrid_<#= Id #>")
.Footer(false)
.Columns(c =>
{
c.Command(commands =>
{
commands.Edit().ButtonType(GridButtonType.ImageAndText);
}).Title("Actions").Width(120);
c.Bound(e => e.ActivityId).Visible(false);
c.Bound(e => e.Activity);
c.Bound(e => e.OriginalPlannedDate);
c.Bound(e => e.CurrentPlannedDate);
c.Bound(e => e.ActualDate);
c.Bound(e => e.ReasonForDateChange);
})
.DataBinding(dataBinding =>
dataBinding.Ajax()
.Select("AjaxGetActionDatesFor", "ProcurementActions", new { procurementActionId = "<#= Id #>" })
.Update("AjaxUpdateActionDatesFor", "ProcurementActions")
.Enabled(true)
)
.DataKeys(keys => keys.Add(c => c.ActivityId))
.Editable(editing => editing.Mode(GridEditMode.InLine)
)
.Selectable()
.ToHtmlString()
);
})
.ToHtmlString()
))
.Columns(c =>
{
c.Command(commands =>
{
commands.Edit().ButtonType(GridButtonType.ImageAndText);
commands.Delete().ButtonType(GridButtonType.ImageAndText);
commands.Custom("showHistory")
.ButtonType(GridButtonType.ImageAndText)
.Text("History")
.Action("Show", "ProcurementActions")
.DataRouteValues(route => { route.Add(o => o.Id).RouteKey("id"); });
}).Title("Actions").Width(100);
c.Bound(e => e.Id).Visible(false);
c.Bound(e => e.ActionId).Visible(false);
c.Bound(e => e.ContractNumber).HtmlAttributes(new {style = "vertical-align: top"});
c.Bound(e => e.ContractManager).Width(120).HtmlAttributes(new {style = "vertical-align: top"});
c.Bound(e => e.ActualCAResponsible).Width(150).HtmlAttributes(new {style = "vertical-align: top"});
c.Bound(e => e.TitleOfRequirement).HtmlAttributes(new {style = "vertical-align: top"});
c.Bound(e => e.CipOrName).Title("Project Id").HtmlAttributes(new {style = "vertical-align: top"});
c.Bound(e => e.RecordTypeName).Title("Record Type").HtmlAttributes(new {style = "vertical-align: top"});
c.Bound(e => e.FullContractType).Title("Contract Type").HtmlAttributes(new { style = "vertical-align: top" });
c.Bound(e => e.ProcurementActionYearDisplayName).Title("Plan FY").HtmlAttributes(new { style = "vertical-align: top" });
})
.DataKeys(keys => keys.Add(o => o.Id))
.DataBinding(dataBinding =>
dataBinding.Ajax()
.OperationMode(GridOperationMode.Client)
.Select("AjaxGetAll", "ProcurementActions") //, new { procurementActionId = "<#= CurrentAction #>" })
.Update("AjaxUpdate", "ProcurementActions")
.Delete("AjaxDelete", "ProcurementActions")
.Enabled(true)
)
.Editable(editing =>
editing.Mode(GridEditMode.PopUp)
.TemplateName("EditProcurementAction")
//? .AdditionalViewData(new { ListAllProcurementActionDateTypes = Model.AllProcurementActionDateTypes })
//? .AdditionalViewData(Model.AllUsers)
//? .AdditionalViewData(Model.ContractTypes)
//? .AdditionalViewData(Model.FundingTypes)
)
.Pageable(paging => paging.PageSize(15))
.Scrollable(scrolling => scrolling.Height(500))
.Filterable()
.Sortable()
%>
At the end of my file I changed this:
<%= Html.Telerik().ScriptRegistrar() %>
To this:
<%= Html.Telerik()
.ScriptRegistrar()
.DefaultGroup(group => group.Add("telerik.common.js")
.Add("telerik.calendar.js")
.Add("telerik.datepicker.js")
.Add("telerik.textbox.js"))
%>
Still nothing.
I am trying to deliver this today (for the final time) and am getting dinged for formatting.
Any thoughts?
-kb

Answer 1

So I finally tracked down how to do this correctly in the ClientTemplate:
"<b>Cost/Price Analysis Date: </b><#= $.telerik.formatString('{0:MM/dd/yyyy}', CostPriceAnalysisDate==null ? \"\" : CostPriceAnalysisDate) #><br/>" +
"<b>OIG Review Completion Date: </b><#= $.telerik.formatString('{0:MM/dd/yyyy}', OIGReviewCompletionDate==null ? \"\" : OIGReviewCompletionDate) #><br/>" +
"<b>Required Procurement Initiation Date: </b><#= $.telerik.formatString('{0:MM/dd/yyyy}', RequiredProcurementInitiationDate==null ? \"\" : RequiredProcurementInitiationDate) #><br/>" +
"<b>Required Date of Award: </b><#= $.telerik.formatString('{0:MM/dd/yyyy}', RequiredDateOfAward==null ? \"\" : RequiredDateOfAward) #><br/>" +
You need to make a call into $.telerik.formatString(...)