1. Home
  2. Forum
  3. Vue
  4. How do I set the date modified column to a template

How do I set the date modified column to a template

Hello,

So, I basically want to be able to set the datemodified to be similar to name in this object:
detailsViewSettings: {
                    columns: [{
                        field: 'name', headerText: 'Name', minWidth: 120,
                        template: '<span class="e-fe-text">${name}</span>', customAttributes: { class: 'e-fe-grid-name' }
                    },
                    {
                        field: '_fm_modified', headerText: 'Date Modified', type: 'dateTime',
                        format: 'dd/MM/yyyy HH:mm', minWidth: 120, width: '190'
                    },
                    {
                        field: 'size', headerText: 'Size', minWidth: 80, width: '90', template: '<span class="e-fe-size">${size}</span>'
                    }]
                }
But I don't know the name of the variable I should put in ${} and I can't find it in the documentation.

Thanks,

4 Replies 1 reply marked as answer
IL Indhumathy Loganathan Syncfusion Team May 20, 2021 03:28 PM UTC

Hi Omar, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement in File Manager component. Yes, you can set the template value for date column as well and specify the value inside the ${} tag. You can set any value inside the tag which are returned from server. Refer to the below code snippet. 
 
  detailsViewSettings: { 
    columns: [ 
      { 
        field: "name", 
        headerText: "Name", 
        minWidth: 120, 
        template: '<span class="e-fe-text">${name}</span>', 
        customAttributes: { class: "e-fe-grid-name" }, 
      }, 
      { 
        field: "date", 
        headerText: "Date Created", 
        type: "dateTime", 
        minWidth: 120, 
        width: "190", 
        template: "${dateCreated}", 
      }, 
      { 
        field: "size", 
        headerText: "Size", 
        minWidth: 80, 
        width: "90", 
        template: "${size}", 
      }, 
    ], 
  }, 
 
In the code, we have shown the dateCreated values in second column, which is returned from server for all files and folders. Check the below sample for reference. 
 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


OM Omar May 21, 2021 11:59 AM UTC

Hi Indhumathy,

I tried this but I lost the format of the date:
                    {
                        field: '_fm_modified', headerText: 'Date Modified', type: 'dateTime',
                        format: 'dd/MM/yyyy HH:mm', minWidth: 120, width: '190',
                        template: '${moment(new Date(dateModified)).format("MMMM d, YYYY")}'
                    }

the thing is I want to be able to add javascript code inside the template text.

Thanks,
Omar

KR Keerthana Rajendran Syncfusion Team May 24, 2021 03:10 PM UTC

Hi Omar, 
 
Based on your code, we suspect that you are invoking a JavaScript method within template of Date Modified field for the purpose of changing the date format. If so, this can be directly changed using format option instead of passing template.  
 
Refer to the following code and sample. 
 
detailsViewSettings: { 
columns: [ 
          { 
            field: "name", 
            headerText: "Name", 
            minWidth: 120, 
            template: '<span class="e-fe-text">${name}</span>', 
            customAttributes: { class: "e-fe-grid-name" }, 
          }, 
          { 
           field: '_fm_modified', headerText: 'Date Modified', type: 'dateTime', 
           format: 'MMMM d, yyyy', minWidth: 120, width: '190' 
          }, 
          { 
            field: 'size', headerText: 'Size', minWidth: 80, width: '90', 
            template: '<span class="e-fe-size">${size}</span>', 
          }, 
        ], 
 
 
 
If you wish to perform any customization other than this format, then we can achieve this using fileLoad event. Currently we are making a sample for this scenario and we will update further details within May 27, 2021. 
 
Meanwhile, please confirm whether the first suggested way of setting format(format: 'MMMM d, yyyy') would suit your requirement else share us the expected customization required with the date format. These details will help us to serve you better. 
 
Regards, 
Keerthana.  


IL Indhumathy Loganathan Syncfusion Team May 27, 2021 10:33 AM UTC

Hi Omar, 
 
Thanks for your patience. 
 
We have prepared a File Manager sample, where we used fileLoad event to achieve the required date format. We have made a method call inside fileLoad event, which will return the modified date in a required format. This formatted date is then assigned to the date column of File Manager. Refer to the below code snippet. 
 
fetchDate: function (date) { 
  //Returns the date in mentioned format 
  return moment(new Date(date)).format("MMMM D, YYYY"); 
}, 
fileLoad: function (args) { 
  if (args.module === "DetailsView") { 
    //Method call to format the date 
    var date = this.fetchDate(args.fileDetails.dateModified); 
    var cell = args.element.querySelector('[aria-colindex="' + 3 + '"]'); 
    //Append the date inside column 
    cell.innerText = date; 
  } 
}, 
 
Similar to above code, you can perform your required date formatting inside the JavaScript method call and append them to the column. 
 
You can find the sample demonstrating the solution from below link. 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L

Marked as answer
Loader.
Up arrow icon