Tooltip data from Kendo.DS in Kendo UI for jQuery

This is a migrated thread and some comments may be shown as answers.

Tooltip data from Kendo.DS

3 Answers 16 Views

ToolTip

This is a migrated thread and some comments may be shown as answers.

Gurcan Yucel asked on 10 Dec 2018, 10:57 AM

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

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 class="cont-col2">

<div class="desc">

#:shortenText(Description,49)#

</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>

3 Answers, 1 is accepted

answered on 12 Dec 2018, 06:44 AM

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.

answered on 12 Dec 2018, 07:54 AM

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 class="cont-col2">

<div class="desc">

#:shortenText(Description,49)#

</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"

});

Accepted

answered on 12 Dec 2018, 12:03 PM

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.