Formatting date in the Kendo Grid of a List/Library Control

Forms
1

We are an international company and using USA date format confuses the heck out of everyone except for folks from Canada, Philippines and Belize.
Here is where we currently stand.

image
image764×573 119 KB

Question: How do we change the formatting of a date column in the Kendo Grid?

2

Hello @vhancock ,

It was my pleasure to spent some time to solve this issue :slight_smile:

window.fd = fd;
window.pnp = pnp;
window.$ = $;

fd.spRendered(() => {
  const library = fd.control('ListOrLibrary1');
  const formatDateInGrid = () => {
    // Get the Kendo Grid widget from the Plumsail Forms control
    const gridWidget = library.widget;
    // Access the data source of the grid
    const dataSource = gridWidget.dataSource;
    // Iterate through each item in the data source
    dataSource.data().forEach((item) => {
      // Access and parse the 'Modified' date string for the current item
      // I used only a column "Modified"
      let modifiedDateStr = item.Modified;
      // Parse the date string into a Date object
      let modifiedDate = new Date(modifiedDateStr);
      // Format the date to "dd-MMM-yyyy" (e.g., "18-Apr-2024")
      // Select the formatting
      let formattedModifiedDate = modifiedDate
        .toLocaleDateString('en-GB', {
          day: '2-digit',
          month: 'short',
          year: 'numeric',
        })
        .replace(/ /g, '-');

      // Update the 'Modified' property in the current item with the formatted date
      item.Modified = formattedModifiedDate;
    });

    // Refresh the Kendo Grid to reflect the updated data
    gridWidget.refresh();
  };

  // Wait for the document to be ready before executing the script
  library.ready().then(() => {
    formatDateInGrid();
  });
  // Handle Edit event - Works gresat
  library.$on('edit', () => {
    formatDateInGrid();
  });
  // Handle Change Event
  // I could not solve this issue with the executing the script too fast - it works with timeout, but it is not clear as it could be
  library.$on('change', () => {
    setTimeout(() => {
      formatDateInGrid();
    }, 200);
  });
});

Please, read the comments in the code to adjust the code for your needs.

Regards,
Stepan

3

This worked just GREAT. Thank you. The only hickup I had was when I click on the Kendo "Refresh" icon in the grid control. See below:

image
image1003×766 113 KB

I inserted the following code, but that did not work:

library.$on('refresh', () => {
setTimeout(() => {
formatDateInGrid();
}, 200);
});

Thoughts?

And thanks again. Just really good work getting done here. I have another installment of how we use Plumsail Forms to customize the individual user experience. Stay tuned.

4

Hi @vhancock ,

There should be an event how to handle this "refresh" button, but when I inspected the control, event like "refresh" does not exist.

Right now, I am not sure how to do it. I was thinking about .binding an event "refresh" for the control before the Form is rendered, but it is quite far from my knowledge right now :smiley:

Stepan

5

Hello there
You can try to customize the date pattern based on the users location.