Tooltip data from Kendo.DS

4 posts, 1 answers
  1. Gurcan Yucel
    Gurcan Yucel avatar
    7 posts
    Member since:
    Dec 2009

    Posted 10 Dec 2018 Link to this post

         Hi,

    I'm using Kendo DataSource with templates.But also I've to using Kendo.Tooltip with this Itemtemplate.

    I'm wondering if i have any chance to get data without givin a div or any html tag as a data attirbutes from my ItemTemplate to myTooltip template?

    Normally you can set data tag with any html tag like this

    <div class="col1" data-HistoryType="#:HistoryType#"></div>

    and reach data in tooltip like #=target.data('HistoryType')# 

     

    But my problem is a have many data to need to pass tooltip like that.

    Here is my code example,

    //I'm reach the model data using like #:HistoryType# etc.
     
    <script type="text/x-kendo-template" id="newsfeedsItemTemplate">
        <li id="items">
            <div class="col1">
                <div class="cont">
                    <div class="cont-col1">
                        <div class="label label-sm #:IconColor#">
                            <i class="#:FontAwesomeIconName#"></i>
                        </div>
                    </div>
                    <div class="cont-col2">
                        <div class="desc">
                            #:shortenText(Description,49)#
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </script>
    <script type="text/x-kendo-template" id="newsFeedsToolTipTemplate">
         //I want to reach here model data  I didnt use in Itemtemplate like ObjectName
        <div>#:ObjectName#</div>
    </script>
  2.
  3. Dimitar
    Admin
    Dimitar avatar
    807 posts

    Posted 12 Dec 2018 Link to this post

    Hi Gurcan Yucel,

    You could pass additional parameters to the Tooltip's content option by defining it as a function:
    <script>
     $("#products").kendoTooltip({
        autoHide: false,
        filter: "a",
        content: function(dataItem){
          dataItem.someParam = 'someValue';
          return kendo.template($("#template").html())(dataItem);
        },
        width: 400,
        height: 200,
        position: "top"
    });
    </script>

    I have setup similar scenario on the following Dojo example for your reference. 

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Gurcan Yucel
    Gurcan Yucel avatar
    7 posts
    Member since:
    Dec 2009

    Posted 12 Dec 2018 in reply to Dimitar Link to this post

    Hi Dimitar,

    Thanks for your reply. But my real problem is my dataItem to pass tooltip comes from another kendo datasource. Here is my accual code,

    Here is my datasource item and provides my model from controller.This model included data like called ObjectName, Size ,etc. which i didnt use this template. How can i pass these to my kendotooltip.

    <script type="text/x-kendo-template" id="newsfeedsItemTemplate">
        <li id="items">
            <div class="col1" data-HistoryType="#:HistoryType#">
                <div class="cont">
                    <div class="cont-col1">
                        <div class="label label-sm #:IconColor#">
                            <i class="#:FontAwesomeIconName#"></i>
                        </div>
                    </div>
                    <div class="cont-col2">
                        <div class="desc">
                            #:shortenText(Description,49)#
                        </div>
                    </div>
                </div>
            </div>
            <div class="col2">
                <div class="date"> #:formatDate(kendo.parseDate(Date))#</div>
            </div>
        </li>
         
    </script>
     
    ----------And its JQuery Call------------
    var template = kendo.template($("#newsfeedsItemTemplate").html());
                    Archive.ActivitiesDataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: Archive.ActivitiesUrl,
                                data: { feedType: feedType, masterId: Archive.MasterId },
                                dataType: "json",
                                cache: false
                            }
                        },
                        schema: {
                            errors: "error"
                        },
                        error: function (e) {
                            alert("bad request");
                        },
                        requestStart: function () {
                            kendo.ui.progress($("#newsfeeds"), true);
                        },
                        requestEnd: function () {
                            kendo.ui.progress($("#newsfeeds"), false);
                        },
                        change: function () {
                            $("#newsfeeds").html(kendo.render(template, this.view()));
                        }
                    });
    Archive.ActivitiesDataSource.read();

     

    and also this code below from tooltip

    <script type="text/x-kendo-template" id="newsFeedsToolTipTemplate">
    <div>//HERE I want to pass data from kendo.ds like #:ObjectName#</div>
    </script>
     
    jQuery(document).ready(function () {
            $("#items").kendoTooltip({
                    autoHide: true,
                    filter: "div",
                content: kendo.template($("#newsFeedsToolTipTemplate").html()),
                    width: 400,
                    height: 200,
                    position: "top"
                });
        });

     

     

  7. Answer
    Dimitar
    Admin
    Dimitar avatar
    807 posts

    Posted 12 Dec 2018 Link to this post

    Hi Gurcan Yucel,

    Adding a data to an external template could be achieved as follows:
    var templateContent = $("#myTemplate").html();
    var template = kendo.template(templateContent);
             
    var data = [
      { name: "John", isAdmin: false },
      { name: "Alex", isAdmin: true }
    ];
     
    var result = kendo.render(template, data); //render the template
     
    $("#users").html(result); //append the result to the page

    You should be able to use the above approach in the dataSource change event to add the desired data to the Tooltip template. In case this does not help and the issue continues to persist, I would suggest you to open a separate support thread where we can continue our communication and also provide an isolated example that demonstrates the issue.

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8.
Back to Top