Howto custom render for Editor Edit window.

MarkAndersonUK

hi,

I have a field in my data that is an URL. I would like to display this as an icon with the URL as an anchor around the icon. I was able to get this working fine for the grid display, using this :

{label: "",name: "recruiters.bookingLink", type: "readonly",
    render: function (data) {
        if (isValidHttpUrl(data)) {
            const blink = "<a href='" + data + "' target='_blank' ><img src='https://www.dlf.pt/dfpng/middlepng/518-5187293_logo-google-meet-png-hd-transparent-png.png' width='50px' class='ml-2' data-toggle='popover' data-title='Content' data-html='true' data-content='Some text'</img></a>";
            return blink;
        } else {
            return ''
        }
    }
},

Note: isValidHttpUrl is a function that checks if the URL is valid.

I don't care about saving this field ever, as it is always a read-only field.

However when using the Form Edit, the field is displayed as a basic text input field.
I am using a custom template for my Edit form, but I tried using the internal Edit form too.

I know I saw this somewhere before, but now cannot find how to apply a render to the edit form

Can anyone help?

kthorngren

Check this thread for an example. The columns.render option use used with the Datatables config options, not Editor. Note the use of type ===display`` to render the, in your case link, and just return the data to edit the raw data.

Kevin

MarkAndersonUK

Hi @kthorngren,

Thanks for the example. From what I can see the example is talking about passing the raw (un-rendered) original data into the Edit Window and using a rendered version of the data in the rows inside the grid view. Unfortunately, I am actually looking for the 100% opposite of this. I want the rendered version to display inside the Editor edit window (not the original data). I will not be ever editing the raw data and saving it, this is a read-only field and in fact, the fields it set to ' .set( false ), ' in the controller in nodeJS.

I listed the columns render example in the original post to show what I am trying to achieve, but not in the grid, I want this rendered format in the Edit window.

thanks
Mark

kthorngren

Not sure if this has changed but these old threads indicate this is not built into Editor:
https://datatables.net/forums/discussion/comment/106007/#Comment_106007
https://datatables.net/forums/discussion/15691
https://datatables.net/forums/discussion/comment/74506/#Comment_74506
https://datatables.net/forums/discussion/comment/152541/#Comment_152541

I may be wrong but it sounds like the suggestion is to create a custom field type plugin.

Kevin

MarkAndersonUK

Thanks, @kthorngren,

before I goto the work of writing a custom field type, I will check will
@allan and see if anything has changed since those old threads.. I can see
that allan said in a few of them that it was a great idea, and that was, in some
cases, 10 years ago. So I am hoping there might have been some movement in this direction since then.. Or perhaps someone has already written a custom type for displaying a URL link, which I think would be useful to many..

Can you confirm if this is possible @allan ? or if you have any custom field type examples for this kind of function ?

thanks
Mark

allan

Hi Mark,

I've got to confess I don't quite understand what you are trying to do. Do you want the link with the image to show in the Editor form as well as in the table? And it wouldn't be editable? Is recruiters.bookingLink itself editable in another field?

We have added formatting options in Editor 2 which might be of use here, but I'd like to understand what your goal is before I send you the wrong route!

Allan

MarkAndersonUK

Hi @allan,

Simply put, I want to be able to use the contents of a field as part of some HTML inside the edit window (not the table). The field in question contains a URL, that I want to enclose with a <a> tag, where the field value will be used as the HREF value. I was also adding an <IMG> tag inside the <a> basically to create a clickable button.

The value of the data field, is not ever changed by the editor and I am not using it anywhere else as an input field that the user can change. In my case, the field value is set by an external process.

The code I posted, which I think confused the issue, was an example of what I wanted to do that works in the table view, but I want to take that type of functionality and move it into an edit form view.

PS: If it makes any difference, I am using a custom template for my form view.

thanks

montoyam

couldn't you use editor.on('open') to change the contents of <img> that you put in your template?

allan

PS: If it makes any difference, I am using a custom template for my form view.

If it were a static image / link, then you could just put it in the template, but since it is dynamically updated based on the row data, you'll need to either:

1. Do as @montoyam suggests (although I'd recommend the displayOrder event)
2. Or create a custom field that would display the HTML you need.

Option 1 is probably the better of the two. More flexibility.

Allan