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.
Question: How do we change the formatting of a date column in the Kendo Grid?
Hello @vhancock ,
It was my pleasure to spent some time to solve this issue
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
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:
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.
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
Stepan