Hide Some Content if Null ( Custom Template )

[K.Ramadan]

Hello every one,

first of all .. I'm using the tooltip with a scheduler...

I have a custom template for the ToolTip which shows few properties (Title, Time, Type, Room, . . . ). (see ToolTip_1.png)

some times Type or Room are null so I don't want them to be shown... I want to hide them somehow...

I tried to wrap the Div of the Room and Type with an if Statment so that if Room is null skip this part .. but it shows me an error all the time...

This is my Custom Template :

@(Html.Kendo().Tooltip()

       .For("#scheduler")

       //.Filter(".k-event:not(.k-event-drag-hint) > div, .k-task")

       .Filter(".k-event:not(:empty) > div, .k-task")

       .Position(TooltipPosition.Right)

       .Width(150)

       .Events(e => { e.ContentLoad("ContentLoad_ToolTip");

                      e.Show("onShow_ToolTip");

                    })

   .ContentTemplateId("tipTemplate")

    )

 

 

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

        #var element = target.is(".k-task") ? target : target.parent();#

        #var uid = element.attr("data-uid");#

        #var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#

         

        @*#var model = scheduler.occurrenceByUid(uid);#*@

 

        #var model =  scheduler ? scheduler.occurrenceByUid(uid) : null;#

 

        #if(model){#

        @*<strong>start:</strong> #=kendo.format('{0:d}', model.start)#

            <br />

            <strong>end  :</strong> #=kendo.format('{0:d}', model.end)#

            <br />*@

        @*#if(#=model.Typ# != null){*@

        <strong style="text-align:left;@*color:white;*@">Typ:</strong> #=model.Typ#

        <br />

        @* } *@

        <strong>Bemerkung:</strong> #=model.description#

        <br />

        @*<strong>CrmName:</strong> #=model.CrmUserName#

            <br />*@

        <strong>Raum:</strong> #=model.Raum#

        <br />

        @*<strong>Erfasser:</strong> #=model.ErfUser#

            <br />

            <strong>Zuletzt:</strong> #=model.LastUser#

            <br />*@

        <strong>Mitarbeiter:</strong> #=model.Initialen#

        <br />

        #} else {#

        <strong>No event data is available.</strong>

        #}#

    </script>

 

Well, This is my main Question .. but I have another one...
HOW TO ADJUST THE WIDTH OF THE TOOLTIP? (see ToolTip_2.png)

 

 

[K.Ramadan]

It will be also great if you show me how to make Text alignment so that all the properties be on the left side and all the values on the right side.
Thank you 

 

[Martin]

Hello Karam,

In order to hide a field in the template in there is no content, you can wrap the items in a span and add display style based on the content:

<script id="tipTemplate" type="text/x-kendo-template">
        #var element = target.is(".k-task") ? target : target.parent();#
        #var uid = element.attr("data-uid");#
        #var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#

        @*#var model = scheduler.occurrenceByUid(uid);#*@

        #var model =  scheduler ? scheduler.occurrenceByUid(uid) : null;#

        #if(model){#
        <span style="#= (model.Typ == null) ? 'display:none' : '' #">
            <strong style="text-align:left;@*color:white;*@">Typ:</strong> #=model.Typ#
            <br />
        </span>
        <span style="#= (model.description == null) ? 'display:none' : '' #">
            <strong>Bemerkung:</strong> #=model.description#

            <br />
        </span>
        <span style="#=(model.Raum == null) ? 'display:none' : '' #">
            <strong>Raum:</strong> #=model.Raum#
            <br />
        </span>
        <span style="#= (model.Initialen == null) ? 'display:none' : '' #">
            <strong>Mitarbeiter:</strong> #=model.Initialen#
            <br />
        </span>
            #} else {#
            <strong>No event data is available.</strong>
            #}#
    </script>

Regarding the width, you can bind to the Show event and add a custom class to the popup element:

e.sender.popup.element.addClass("myTooltip");

.myTooltip{
        width: auto !important;
    }

Attached you will find a small project to see the above in action.

Let me know if you have any questions.

Regards,
Martin
Progress Telerik

[K.Ramadan]

Hello Martin,

Thank you very much for your answer...

I'm confronting a little problem here.

When I open or reload the page .. and I hover on an event .. the longest text in the TipTool will be shown like in the

image(TipTool_1).

And Then after that, it changes to the correct form (Text-Alignment) like in the image (TipTool_2).

can you please help figure out what causing this changing . . .

[Martin]

Hello Karam,

The behavior is happening because on the first Tooltip show, the myTooltip class is not yet added to the popup, and therefore the width is still 150px (preset in the ToolTip configuration) instead of auto. In order to fix this, you can check if the popup has the class. If it does not, you can add it and then use the hide and show methods so that the tooltip will be displayed with the correct width:

function onShow(e) {
    if (!e.sender.popup.element.has("myTooltip")) {
        e.sender.popup.element.addClass("myTooltip");
        e.sender.popup.element.hide().show();
    }
}

Let me know how that works on your side.

Regards,
Martin
Progress Telerik

[K.Ramadan]

Hello Martin,

I tried both .. but with no success .. when I write the if statement from the example above .. the text will ignore the width of the that is

given in class myTooltip (ToolTip_02.png).

and to give an exact width will not be helpful in my situation...

it will be great if you have another idea to overcome this problem...

Thanks in Advance . . . .

[Martin]

Hello Karam,

I am sharing a small video demonstrating how the tooltips are displayed on my side. Could you please try to reproduce the state from the screenshot in the project from my previous reply? I will debug it and see what is causing the problem.

Looking forward to your reply.

Regards,
Martin
Progress Telerik

[K.Ramadan]

Hello Martin,

I downloaded your project to see the differences between the both projects ..

I see now that you wrote a short description for Fast and furious 6 Event..

so I just changed it from 123123123123123123        to        this_is_a_very_long_text_to_read_and_to_text_tooltip

and then I got the exactly same result that I'm getting from my Tooltip.

[K.Ramadan]

MY ANSEWR :

<table>

         <tr style="#= (model.StartTime == null) ? 'display:none' : '' #">
              <td style="text-align:left;"><strong>start</strong></td>
             <td style="text-align:right;">#=kendo.format('{0:d}', model.StartTime)#</td>
          </tr>
          <tr style="#= (model.EndTime == null) ? 'display:none' : '' #">
                <td style="text-align:left;"><strong>end</strong></td>
                <td style="text-align:right;">#=kendo.format('{0:d}', model.EndTime)#</td>
         </tr>
        <tr style="#= (model.title == null) ? 'display:none' : '' #">
              <td style="text-align:left;"><strong>Betreff</strong></td>
              <td style="text-align:right;">#=model.title#</td>
         </tr>
        <tr style="#= (model.komm_Title == null) ? 'display:none' : '' #">
             <td style="text-align:left;"><strong>kommunikation</strong></td>
             <td style="text-align:right;">#=model.komm_Title#</td>
        </tr>

</table>

 

I replaced all spans with a table ..

[Martin]

Hello Karam,

I am glad that you were able to resolve the problem. Also thank you for sharing the solution. It will be helpful to other users experiencing a similar problem.

Do not hesitate to contact us whenever you have further questions.

Regards,
Martin
Progress Telerik