Tooltip data from Kendo.DS

[Gurcan Yucel]

     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>

[Dimitar]

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

[Gurcan Yucel]

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"
            });
    });

 

 

[Dimitar]

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