Quick Info Popup Customization

[Brad Shannon]

In reference to this post: https://www.syncfusion.com/forums/143086/customize-quick-info-window-of-an-existing-event

It is mentioned that you can add custom fields to the Quick Info, and the documentation mentions that you can do this with e-devices, but it doesn't go further. Where can I see an example of customizing a Quick Info popup to show additional fields of an object?

[Vengatesh Maniraj]

Hi Brad, 

Thanks for contacting Syncfusion Support. 

We have validated your requirement “Quick Info popup customization” and we suspect that you need to customize the quick info popup in mobile mode but we regret to let you know that the quick info popup does not support in mobile mode. And, you can include the additional fields of object like in the below documentation. 

https://ej2.syncfusion.com/aspnetcore/documentation/schedule/editor-template/?no-cache=1#customizing-quick-popups 

Please refer to the above link and get back to us if you need any further assistance. 

Regards, 

Vengatesh  

[Brad Shannon]

I don't need to customize it in mobile mode. I have a couple custom objects with properties that I need to display in the quick info popup. Here's the code that doesn't work.  In this example, Route.Name and User.FullName do not display.

<script id="contentTemplate" type="text/x-template">

    <div>

        ${if (elementType === 'cell')}

        <div class="e-cell-content">

            <form class="e-schedule-form">

                <div>

                    <input class="subject e-field" type="text" name="Subject" placeholder="Title">

                </div>

                <div>

                    <input class="location e-field" type="text" name="Location" placeholder="Location">

                </div>

            </form>

        </div>

        ${else}

        <div class="e-event-content">

            <div class="e-subject-wrap">

                ${if (Subject)}

                <div class="subject">${Subject}</div>${/if} ${if (User)}

                <div class="location">${User.FullName}</div>${/if} ${if (StartTime)}

                <div class="subject">${StartTime}</div>${/if} ${if (EndTime)}

                <div class="subject">${EndTime}</div>${/if} ${if (Route)}

                <div class="description">${Route.Name}</div>${/if}

            </div>

        </div>

        ${/if}

    </div>

</script>

[Balasubramanian Sattanathan]

Hi Brad Shannon, 

 

Thanks for the update. 

 

We have validated your reported scenario “Here's the code that doesn't work” at our side and prepared a sample based on that by making use of the quickInfoTemplates like the below code snippet. Since the quick popup is rendering properly at our side. 

 

<script id="contentTemplate" type="text/x-template"> 

    <div> 

        ${if (elementType === 'cell')} 

        <div class="e-cell-content"> 

            <form class="e-schedule-form"> 

                <div> 

                    <input class="subject e-field" type="text" name="Subject" placeholder="Title"> 

                </div> 

                <div> 

                    <input class="location e-field" type="text" name="Location" placeholder="Location"> 

                </div> 

            </form> 

        </div> 

        ${else} 

        <div class="e-event-content"> 

            <div class="e-subject-wrap"> 

                ${if (Subject)} 

                <div class="subject">${Subject}</div>${/if} ${if (Location)} 

                <div class="location">${Location}</div>${/if} ${if (Description)} 

                <div class="description">${Description}</div>${/if} 

            </div> 

        </div> 

        ${/if} 

    </div> 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/154699/ze/Core_Sample1078569517.zip 

UG: https://ej2.syncfusion.com/aspnetcore/documentation/schedule/editor-template/ #customizing-quick-popups 

 

Kindly try and refer the above sample and let us know if you need further assistance. 

 

Regards, 

Balasubramanian S