This sample is using when you are implementing MVC with
Angular 1.x and Angular Ui Grid.
Formatting of date field will be appearing like:
You should have the Newtomsoft. json convertor.
Import Namespace in MVC Code
using Newtonsoft.Json;
using
Newtonsoft.Json.Converters;
|
In MVC you need to return as the JSON object by converting the Datetime
to JSON standard like below
Content = JsonConvert.SerializeObject(result,
new IsoDateTimeConverter()),
Get values from DB as
result and pass it to serializeobject.
Full Code MVC Code
[HttpGet]
public ActionResult GetPatientDetails()
{
//
System.Web.HttpContext.Current.Session["sessionString"]
var result = new CustomBAL<PatientDetailModels>().GetAllRecords(new PatientDetailModels() { FollowupId =
31231959 });
var patientDetails = new ContentResult
{
Content = JsonConvert.SerializeObject(result,
new IsoDateTimeConverter()),
ContentType = "application/json"
};
return patientDetails;
}
|
Javascript code
You have to implement Angularui Grid and in ColumsDef you have to
place below code as one Colum
Formatting the Date using the cellTemplate and using the
pipe symbols as like below.
{
field: 'DateOfBirth', displayName: 'Date Of Birth',
cellTemplate: '<div
class="ui-grid-cell-contents ng-binding
ng-scope">{{row.entity.DateOfBirth | date:"dd-MMM-yyyy" }}
</div>'
//cellTemplate:
'row.entity.DateOfBirth'
},
|
Full Code for Angular UI Grid as
columnDefs: [
{ name: 'FullName' },
{ name: 'PhoneNo' },
{
field: 'DateOfBirth', displayName: 'Date
Of Birth',
cellTemplate: '<div
class="ui-grid-cell-contents ng-binding ng-scope">{{row.entity.DateOfBirth
| date:"dd-MMM-yyyy" }} </div>'
//cellTemplate: 'row.entity.DateOfBirth'
},
{ name: 'sex' },
{
name: 'Action',
//cellTemplate: '<div>' +
// '
<a href="void(0)"
ng-click="editcontact(\'{{row.entity.PatientDetailId}}\')">Edit</a>'
+
// '</div>'
cellTemplate: '<div
class="ui-grid-cell-contents ng-binding ng-scope">' +
'<button class="btn
btn-danger btn-xs "
ng-click="grid.appScope.deleteRow(row)">' +
'<span class="glyphicon
glyphicon-trash"></span></button>' +
//'<button
ui-sref="editcontact({ contactId:
\'{{row.entity.PatientDetailId}}\'})" class="btn btn-warning btn-xs
" >' +
'<button
ng-click="grid.appScope.editcontact(row)" class="btn
btn-warning btn-xs " >' +
'<span class="glyphicon
glyphicon-pencil"></span></button>' +
'</div>'
}
]
|
Output of formatting the date in Angular Ui grid is like
below.
No comments:
Post a Comment