Title content doesn't change

4 posts, 0 answers
  1. Nir
    Nir avatar
    2 posts
    Member since:
    Jan 2013

    Posted 31 Oct 2013 Link to this post

    I need to display a tool tip over every date picker in my system
    The tooltip displays the date in a Hebrew notation 
    Therefor I need to set the content of the tooltip dynamically as a function of the date picker value

    I tried setting a dynamic content to a tooltip but failed. It looks like the content is set on first display.

    1.  Please see my code. What am I Doing wrong?
    2.  Is there a way to attach the tooltip to the date picker instead of its “input” element?
    3.  How can I extend this behavior to all date pickers not having to rewrite this code

    <div id="tooltip" class="k-rtl" style="width:150px;border:1px solid red">
                <input id="datepicker" value="10/10/2011" style="width:150px;" />
     </div>
     <script>

            $(document).ready(function() {
                dp = $("#datepicker").kendoDatePicker({});
                var tooltip = $("#tooltip").kendoTooltip({
                     animation: {
                       close: {
                            effects: "fade:out",
                            duration: 500
                       },
                        open:{
                           effects: "fade:in",
                           duration: 500
                        }
                    },

                    autoHide: true,       
                    showAfter: 1000,
                   position: "left",               
                    filter: "input",
                   width: 300,       
                   content: function (e) { return dp.data("kendoDatePicker").value() }
                }).data("kendoTooltip");

                //this row doesnt help  
                 dp.change= function(){tooltip.content( dp.data("kendoDatePicker").value())}
            });

            //this row does alert the correct value        
             $(document).dblclick(function () { alert(dp.data("kendoDatePicker").value()) });

        </script>
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 01 Nov 2013 Link to this post

    Hello Nir,

    There are two major problems in the provided code.

    1. Kendo UI event handlers can be attached in two ways, which are described in our documentation:

    http://docs.kendoui.com/getting-started/widgets#subscribing-to-the-events-of-a-kendo-ui-widget

    2. The tooltip does not have a content() method. You can change the content like this:

    2a) If the Tooltip has NOT been opened, then its content can be set via:

    $("#ID").data("kendoTooltip").options.content = ".........";

    2b) If the Tooltip has been opened at least once, then its content is accessible via:

    $("#ID").data("kendoTooltip").popup.wrapper.find(".k-tooltip-content").html("........");

    In case 2a) the popup property will be undefined.
     
     
    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Nir
    Nir avatar
    2 posts
    Member since:
    Jan 2013

    Posted 06 Nov 2013 Link to this post

    Thank Dimo

    I changed my code like this

    dp = $("#datepicker").kendoDatePicker({
        change : function(){
               if(tooltip.popup)
                         tooltip.popup.wrapper.fing(".k-tooltip-content").html(dp.data("kendoDaePicker").value())
                else
                          tooltip.content = dp.data("kendoDatePicker").value()
        }
    });

    It works fine.

    but How can I make this common behavior for every date picker
    not having to place a tooltip and implement the change event for each date picker

    Thanks
  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 06 Nov 2013 Link to this post

    Hello Nir,

    You have a couple of options:

    1. Create a custom Kendo UI widget, which binds a change event handler automatically during initialization.

    http://docs.kendoui.com/howto/create-custom-kendo-widget

    2. Encapsulate the DatePicker creation in your own custom function, which attaches the event handler automatically.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready