using Html.Kendo().Tooltip for events(tasks?) inside the scheduler?

[Aron]

Hello!

 

I'd like to create a tooltip displaying information about a task-item (event-item?) in the scheduler, however i have run into some problems.

 Based on the demos you provide that shows the source for how to create the tooltip I tried to createa tooltip for the scheduled events inside of my scheduler. The code for the tooltip looks like this: 

@(Html.Kendo().Tooltip()
        .For("div.k-scheduler-content")
        .Filter("div.k-event")
        .Position(TooltipPosition.Top)
        .Width(120)
)

Since this is not working, im assuming that it is incorrect. I also tried doing it like this: 

@(Html.Kendo().Tooltip()
        .For("div.k-scheduler-content")
        .Filter("[data-uid=]")
        .Position(TooltipPosition.Top)
        .Width(120)
)

 This did not work either. 

 Thanks for helping me.

 

[Vladimir Iliev]

Hello Aron,

Please check the example below of Tooltip configuration which works as expected:

@(Html.Kendo().Tooltip()
    .For("#scheduler")
    .Filter(".k-event:not(.k-event-drag-hint) > div, .k-task")
    .Position(TooltipPosition.Top)
    .Width(120)
)

Additionally you can define template to get additional information as follows:

.ContentTemplateId("template")

<script id="template" 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);#

    #if(model) {#
        <strong>event start:</strong> #=kendo.format('{0:d}',model.start)#<br />
        <strong>event end:</strong> #=kendo.format('{0:d}',model.end)#<br />
        <strong>event description:</strong> #=model.description#<br />
    #} else {#
        <strong>No event data is available</strong>
    #}#
</script>

Regards,
Vladimir Iliev
Telerik

[Richard]

I have implemented a custom tooltip for the scheduler.  works great.

BUT - on mouse over the "title" popup is appearing along with the tooltip.

 How do I disable the "title" popup.

I tried using

    $("#scheduler").kendoCalendar({
        //....
        navigate: function (e) {
            this.element.find("tbody").find("a").removeAttr("title");
        }
    });

and it messed up the whole formatting of the calendar

 

 

 

 ​

 

 

[Vladimir Iliev]

Hello Richard,

I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Could you please open new support thread or forum post and provide runable project where the issue is reproduced? 

Regards,
Vladimir Iliev
Telerik

[Drewanz]

Hi Vladimir,

 I tried your code to format the content of the tooltip and with the latest version 2015.3.1111 and VS2015 U1, whenever I include the ContentTemplate, I receive a JavaScript runtime error, stating the template is invalid - the debug window shows the first two lines of the script as the source of the error (0x800a139e - kendo.all.min.js, line 9, column 7789)

<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.occurenceByUid(uid);#

    #if(model) {#
        <strong>event start:</strong> #=kendo.format('{0:dd/MMM/yyyy}', model.start)#<br />
        <strong>event end  :</strong> #=kendo.format('{0:dd/MMM/yyyy}', model.end)#<br />
        <strong>event description:</strong> #=model.description)#<br />
    #} else {#
        <strong>No event data is available.</strong>
    #}
</script>

 If I remove the ContentTemplateId, the tooltip works fine. Is there something wrong with it?

 Regards,

Marcello

[Drewanz]

Last minute update, I pasted the wrong piece of code as I changed the kendo.Format to HH:mm but I still have the same exception.

[Vladimir Iliev]

Hi Marcello,

After inspecting the provided template it appears that the issue is related to missing closing "#" symbol at the end of the template and closing brace on one of the rows. Please check the template below:

<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);#

    #if(model){#
        <strong>event start:</strong> #=kendo.format('{0:d}', model.start)#<br />
        <strong>event end  :</strong> #=kendo.format('{0:d}', model.end)#<br />
        <strong>event description:</strong> #=model.description#<br />
    #} else {#
        <strong>No event data is available.</strong>
    #}#
</script>

Regards,
Vladimir Iliev
Telerik

[K.Ramadan]

Hello Vladimir,

this is my Code :

@(Html.Kendo().Tooltip()
        .For("#scheduler")
        .Filter(".k-event:not(.k-event-drag-hint) > div, .k-task")
        .Position(TooltipPosition.Top)
        .Width(120)
    )
<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);#

    #if(model){#
    <strong>event start:</strong> #=kendo.format('{0:d}', model.start)#
    <br />
    <strong>event end  :</strong> #=kendo.format('{0:d}', model.end)#
    <br />
    <strong>event description:</strong> #=model.description#
    <br />
    #} else {#
    <strong>No event data is available.</strong>
    #}#
</script>

 

this is the error handler:

function error_handler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
                var scheduler = $("#scheduler").data("kendoScheduler");
                scheduler.one("dataBinding", function (e) {
                    //prevent saving if server error is thrown
                    e.preventDefault();
                })
            }
        }

 

I did exactly what you guys did on github .

and this is my result

i can't see any info

[Aleksandar]

Hello Lu,

The provided code snippet indicates that the Tooltip should use a template, however, the TemplateId is not specified. Try adding the contentTemplateID configuration option and passing the template Id and let me know if this resolves the issue:

@(Html.Kendo().Tooltip()
        .For("#scheduler")
        .Filter(".k-event:not(.k-event-drag-hint) > div, .k-task")
        .Position(TooltipPosition.Top)
        .Width(120)
        .ContentTemplateId("tipTemplate")
    )

 

Regards,
Aleksandar
Progress Telerik

[K.Ramadan]

Thanks for replying so fast.

But i found the problem it was that i defined the Tooltip before i define the scheduler .. so i just wrote it after the scheduler tag and that was it.

The unsolved problem is waiting for someone . . . . I'll drop a link for it .. thx anyway

The UNSOLVED PROBLEM

[Aleksandar]

Hello Lu,

I am glad you were able to find what was causing the problem and resolve the issue.

I would like to ask you to keep the thread focused on the issue reported. The other issue is already in our queue and I can see it was already handled by a colleague.

Regards,
Aleksandar
Progress Telerik