This is a migrated thread and some comments may be shown as answers.
Hide Some Content if Null ( Custom Template )
9 Answers 18 Views
This is a migrated thread and some comments may be shown as answers.
K.Ramadan
Top achievements
Rank 2
K.Ramadan asked on 08 May 2020, 01:10 PM

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)

 

 

9 Answers, 1 is accepted

Sort by
0
K.Ramadan
Top achievements
Rank 2
answered on 08 May 2020, 01:15 PM
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 
 
0
Accepted
Martin
Telerik team
answered on 12 May 2020, 12:00 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
K.Ramadan
Top achievements
Rank 2
answered on 12 May 2020, 03:07 PM

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 . . .

0
Martin
Telerik team
answered on 14 May 2020, 12:14 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
K.Ramadan
Top achievements
Rank 2
answered on 14 May 2020, 03:28 PM

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 . . . .

0
Martin
Telerik team
answered on 18 May 2020, 12:41 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
K.Ramadan
Top achievements
Rank 2
answered on 22 May 2020, 09:24 AM

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.

0
K.Ramadan
Top achievements
Rank 2
answered on 22 May 2020, 12:50 PM

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 ..

0
Martin
Telerik team
answered on 26 May 2020, 08:31 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Asked by
K.Ramadan
Top achievements
Rank 2
Answers by
K.Ramadan
Top achievements
Rank 2
Martin
Telerik team
Share this question
or