Others

Friday, 18 May 2018

Format date in ui-grid cellTemplate


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