Disabled and Readonly Editors for Grid

kane81

Hi,

I want to use the panel editor, but I want to have the option to disable or enable fields.

Looking at Editor.svelte - there doesnt appear to be any options to control if fields are disabled or display only. When I say display only - some fields like keys you dont want to allow the user to ever edit, however you want it to show in the side panel - the current code in the svelte files doesnt allow that granuality / control.

It would also be good if Editor accepted you to plugin your own custom field editors too...

tasha

Hello kane81
To make some fields disabled or readonly you can recieve items for Editor with the help of getEditorConfig and apply a built-in control readonly or just set the property disabled = true; in the item config.
Please check the example: https://stackblitz.com/edit/sveltejs-kit-template-default-jhjdl2xg?file=src%2Froutes%2FMyGrid.svelte

kane81

Great thank you Tasha

Can you also help with date time display?
I have a audit column displaying readonly timestamp

at the moment it shows

Thu Mar 20 2025 18:49:50 GMT+1030 (Australian Central Daylight Time)

how can I set custom format - so I want it to be

dd/MM/yyyy hh:mm:ss
Thank you

tasha

To set a custom format you can use toLocaleString("en-GB"); method:
dataToEdit.date = dataToEdit.date.toLocaleString("en-GB");

or Intl.DateTimeFormat object:

const options = {
        year: "numeric",
        month: "numeric",
        day: "numeric",
        hour: "numeric",
        minute: "numeric",
        second: "numeric",
        timeZone: "Europe/London",
      };
dataToEdit.date = new Intl.DateTimeFormat("enGB",options).format( dataToEdit.date  );

And apply the format you need to the current date.
Please check the example: https://stackblitz.com/edit/sveltejs-kit-template-default-jhjdl2xg?file=src%2Froutes%2FMyGrid.svelte

kane81

Thank you Tash

FYI I implemented it like this

api.intercept('open-editor', ({ id }) => { valuesToEdit = api.getRow(id); valuesToEdit.created = formatDate(valuesToEdit.created); valuesToEdit.modified = formatDate(valuesToEdit.modified); return false; });

it would be nice (good separation of concerns) it you could apply a formatter at the column definition rather than as each row is selected which is a pattern that you have implemented quite a lot in a lot of other components.