Change Workitem Grid table DateTime to Long Date format

Ben_Tey

Anyone have idea how to change the Short Date to Long Date in grid table?

Expected output


Tried with DateTime Setting but still no luck.

Roland_Kind

Hi,

this is not a final solution but the following approach might help (at least in my test environment 8.2 / 2016)

$(document).ready(function () {
 
var mainPageNode = document.getElementById('main_wrapper');
 
// create an observer instance
 var observer = new MutationObserver(function(mutations) {
  
  //The page changed. See if our title exists. If it does, then our gridview should also exist.
  var titleElement = $(".page_title"); //The title always exists. If this page has a gridview, then it also exists as soon as the title does.
  
        if (titleElement.length > 0)  //An element with class of page_title exists.
  {
   var pathArray = window.location.pathname.toLowerCase().split('/');
            var viewPart = pathArray.indexOf('view');
   
   if (viewPart >0)
   {
    var gridElement = $('[data-role=grid]'); // Get the grid object
    if (gridElement.length > 0) {  
     setTimeout(function () {RK_ModDateString()}, 500);
     observer.disconnect();    
    }
   }
        }
 });
 
 // configure the observer and start the instance.
 var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };
 observer.observe(mainPageNode, observerConfig);
 
});
 
 function RK_ModDateString() {
   var grid = $('[data-role=grid]').data().kendoGrid;

  // the columns index must be adjusted to the according field - this is an example for createdDate - and of course the appropriate grid must be checked, too
   grid.columns[8].template="#= Created != null || Created != undefined ? kendo.toString(new Date(Created)): '' #"

grid.dataSource.read();

 }
 

Ben_Tey

Great answer from Cireson.

The only way to do that would be via an unsupported change to the GridBuilder.js code.

 File: C:\inetpub\CiresonPortal\Scripts\grids\gridBuilder.js

 Replace line 113 with:

column.template = "#= " + column.field + " != null || " + column.field + " != undefined ? kendo.toString(new Date(" + column.field + "), 'ddd dd/MM/yyyy h:mm tt'): '' #";

Ben_Tey

Submitted Feature Request please help to vote
https://community.cireson.com/discussion/3744/display-long-date-format-in-active-workitem-grid#latest

Roland_Kind

Hi,

this is not a final solution but the following approach might help (at least in my test environment 8.2 / 2016)

$(document).ready(function () {
 
var mainPageNode = document.getElementById('main_wrapper');
 
// create an observer instance
 var observer = new MutationObserver(function(mutations) {
  
  //The page changed. See if our title exists. If it does, then our gridview should also exist.
  var titleElement = $(".page_title"); //The title always exists. If this page has a gridview, then it also exists as soon as the title does.
  
        if (titleElement.length > 0)  //An element with class of page_title exists.
  {
   var pathArray = window.location.pathname.toLowerCase().split('/');
            var viewPart = pathArray.indexOf('view');
   
   if (viewPart >0)
   {
    var gridElement = $('[data-role=grid]'); // Get the grid object
    if (gridElement.length > 0) {  
     setTimeout(function () {RK_ModDateString()}, 500);
     observer.disconnect();    
    }
   }
        }
 });
 
 // configure the observer and start the instance.
 var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };
 observer.observe(mainPageNode, observerConfig);
 
});
 
 function RK_ModDateString() {
   var grid = $('[data-role=grid]').data().kendoGrid;

  // the columns index must be adjusted to the according field - this is an example for createdDate - and of course the appropriate grid must be checked, too
   grid.columns[8].template="#= Created != null || Created != undefined ? kendo.toString(new Date(Created)): '' #"

grid.dataSource.read();

 }
 

Ben_Tey

Thank you very much @Roland_Kind
That a great start ! will test out in dev and fine tuning before go prod.

Ben_Tey

Looking forward official response from Cireson support. There are able to display the long date format under "My Request"

Ben_Tey

Great answer from Cireson.

The only way to do that would be via an unsupported change to the GridBuilder.js code.

 File: C:\inetpub\CiresonPortal\Scripts\grids\gridBuilder.js

 Replace line 113 with:

column.template = "#= " + column.field + " != null || " + column.field + " != undefined ? kendo.toString(new Date(" + column.field + "), 'ddd dd/MM/yyyy h:mm tt'): '' #";

Edmundo_Acosta