Adding a custom readonly textfield in the scheduler editor in onPopupOpen(args) and link to tel number

Question

Hi,

I am facing some difficulties with a custom readonly textfield in the scheduluer editor.

1. The field is showing blank at the first opening of the event editor, other fields are ok, the second time I open the event the data for this field is displayed correctly.

What could be wrong with my code below ?

2. With the same code the label of the readonly field is not displayed. I removed Placeholder as it is a readonly field.

if (!args.element.querySelector('.e-clientname')) {

var row = ej.base.createElement('div', { className: 'e-clientname' });

var formElement = args.element.querySelector('.e-schedule-form');

formElement.firstChild.insertBefore(row, args.element.querySelector('.e-description-row'));

var container = ej.base.createElement('div', { className: 'e-clientname-container' });

var inputEle = ej.base.createElement('input', {

className: 'e-field', attrs: { name: 'Customer_Name' }

});

container.appendChild(inputEle);

row.appendChild(container);

new ej.inputs.Input.createInput({

element: inputEle,

floatLabelType: "Never",

readonly: true,

value: (args.data).Customer_Name,

name: 'Customer_Name'

});

}

3. I would like to add another readlonly field with a phone number and an url link of type <a rel='nofollow' href="tel:+33711223344"> to call a client from the event details.

What is the best way to achieve this ?

Thank you

Pascal

Ravikumar Venkatesan · Accepted Answer

Hi Pascal, 

Greetings from Syncfusion support. 

We have validated all your queries at our end and for that, we have prepared a sample that can be downloaded from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/161684/ze/ej2-core-schedule-adding-additional-field-to-editor-window415388350 

Q: The field is showing blank at the first opening of the event editor 
We need to set up the value for the element on the element creation as shown in the below-highlighted code. 
[Index.cshtml] 




    function onPopupOpen(args) { 
        if (args.type === 'Editor') { 
            if (!args.element.querySelector('.e-clientname')) { 
                var inputEle = ej.base.createElement('input', { 
                    className: 'e-field', attrs: { name: 'Customer_Name', value: (args.data.Customer_Name ? args.data.Customer_Name : "") } 
                }); 
            } 
        } 
    } 
 
Q: The label of the read-only field is not displayed 
We have shown the label for the read-only field by adding the placeholder like the code highlighted below. 

[Index.cshtml] 




    function onPopupOpen(args) { 
        if (args.type === 'Editor') { 
            if (!args.element.querySelector('.e-clientname')) { 
                var clientName = new ej.inputs.Input.createInput({ 
                    element: inputEle, 
                    floatLabelType: 'Always', 
                    readonly: true, 
                    properties: { 
                        placeholder: 'Client name' 
                    } 
                }); 
            } 
        } 
    } 

Q: I would like to add another read-only field with a phone number 
We have achieved your above requirement by adding the additional input field to the editor window with the help of the code shown below. 
[Index.cshtml] 




    function onPopupOpen(args) { 
        if (args.type === 'Editor') { 
            if (!args.element.querySelector('.e-clientname')) { 
                row = ej.base.createElement('div', { className: 'e-client-phone' }); 
                formElement.firstChild.insertBefore(row, args.element.querySelector('.e-clientname')); 
                container = ej.base.createElement('div', { className: 'e-client-phone-container' }); 
                inputEle = ej.base.createElement('input', { 
                    className: 'e-field', attrs: { 
                        name: 'Customer_Phone', value: (args.data.Customer_Phone ? args.data.Customer_Phone : "") 
                    } 
                }); 
                container.appendChild(inputEle); 
                row.appendChild(container); 
                var clientPhone = new ej.inputs.Input.createInput({ 
                    element: inputEle, 
                    floatLabelType: 'Always', 
                    readonly: true, 
                    properties: { 
                        placeholder: 'Client phone' 
                    } 
                }); 
                inputEle.setAttribute('name', 'Customer_Phone'); 
            } 
            var container = args.element.querySelector(".e-client-phone-container"); 
            var callLink = args.element.querySelector(".e-phone-tag"); 
            if (args.data.Customer_Phone) { 
                container.firstChild.style.width = "80%"; 
                var link = "tel:" + args.data.Customer_Phone; 
                var linkEle = ej.base.createElement("a"); 
                var linkedEle = Object.assign(linkEle, { href: link, rel: "nofollow", innerText: "Make a Call", className: "e-phone-tag" }); 
                container.appendChild(linkedEle); 
            } else if (callLink) { 
                callLink.remove(); 
                container.firstChild.style.width = "100%"; 
            } 
        } 
    } 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan

Pascal Thomé · Answer

Hi Ravikumar ,Thanks for your response, your code for setting the label, data and phone link is working as expected.The only remaining thing is that the field is not set as readonly.I managed to get it readonly by putting the readonly attribute in ej.base.createElement() as below :    function onPopupOpen(args) {         if (args.type === 'Editor') {             if (!args.element.querySelector('.e-clientname')) {                 var inputEle = ej.base.createElement('input', {                     className: 'e-field', attrs: { name: 'Customer_Name', value: (args.data.Customer_Name ? args.data.Customer_Name : ""), readonly:true }                 });             }         }     } Regards,Pascal

Nevitha Ravi · Answer

Hi Pascal, 

Thanks for your update. 

We are glad that our provided solution helped you, please get back to us if you need any further assistance. 

Regards, 
Nevitha