Showing Extrafields in Lookup Drop Down

Hi There

I have a drop down in a form for Contact which is a lookup field. from the look up I am getting extra fields as follows:


I have added the Expand field


In the CSS......I have inserted the following

.k-dropdown .k-dropdown-wrap .k-input{
height: auto !important;

flex-direction: column;
margin-bottom: 5px;
padding-top: 10px;
margin-left: 10px;

margin-bottom: 3px;
font-size: 16px;

margin-bottom: 3px;
font-size: 14px;

margin-bottom: 5px;
font-size: 15px;
font-weight: bold;

and in the JS I have inserted this:

fd.spRendered(function () {

   var template = '';
    template += '<span class="lookup-col">';
    template += '<p class="lookup-title"> #: data.LookupValue # </p>';
template += '<p class="lookup-desc"> #: data.WorkAddress #';
    template += '#: " - " + data.WorkCity #';
    template += '#: " - " + data.Business_x0020_Country.Description # </p>';
    template += '<p class="lookup-phone"> #: data.WorkPhone # </p>';
    template += '</span>';
    fd.field('Contact').widgetOptions = {
        template: template,
        height: 400,
        virtual: {
            itemHeight: 100
        dataSource: {
            pageSize: 16

The problem is here:

template += '#: " - " + data.Business_x0020_Country.Description #


Without that line of code it works and shows all the data, but with that line of code nothing works and there are no dropdown objects. What am I doing wrong?

How can I render the Extra field Business_x0020_Country/Description ??

Dear @Daniel_Privitelli,
Thank you for posting! I think the issue here is a weird mix up of 'single' and "double" quote marks, as well as some unusual inserts into template.

Take a look at this line:

template += '<p class="lookup-desc"> #: data.WorkAddress #';

Here, the 'single' quote marks indicate String variable for the JS (see how it starts and ends with '), while "double" cross marks are used to indicate an HTML property for the <p> tag. Finally, pay close attention at how the dynamic content is inserted into template - it's all inside the string, with no + signs, isolated from the rest with #: # symbols.

Compare it to your lines:

template += '#: " - " + data.WorkCity #';

The #: # symbols do not isolate the dynamic content, instead, they have some other string inside, and it also uses "double" quotes for some reason...

Maybe you want to use something like this?

template += ' - #: data.WorkCity #';
1 Like

Thanks a lot for your help :slight_smile:

Much Appreciated

1 Like