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

7 posts, 1 answers
  1. Aron
    Aron avatar
    13 posts
    Member since:
    Apr 2015

    Posted 06 Oct 2015 Link to this post

    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.

     

  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 08 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Richard
    Richard avatar
    2 posts
    Member since:
    Mar 2015

    Posted 16 Oct 2015 in reply to Vladimir Iliev Link to this post

    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

     

     

     

     ​

     

     

  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 20 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Drewanz
    Drewanz avatar
    6 posts
    Member since:
    Jan 2009

    Posted 06 Jan in reply to Vladimir Iliev Link to this post

    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

  7. Drewanz
    Drewanz avatar
    6 posts
    Member since:
    Jan 2009

    Posted 06 Jan in reply to Drewanz Link to this post

    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.
  8. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 08 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready