in Kendo, how to make a tooltip with a custom databinding?

Question

I'd like to show a custom tooltip when my user hovers over a node in a line chart.

In this tooltip, I need to databind to a string that is contained within the object bound in the series

In the below example, the MyObject class has three properties Date, Point, and Point_Info

@(Html.Kendo().Chart<MyObject>()
        .Name("chart")
        .Title("")
        .DataSource(ds => 
            ds.Read(read => read.Action("_X", "Y"))
        )
        .Series(series =>
        {
            series.ScatterLine(model => model.Date, model => model.Point);
        })
        .XAxis(x=>x
            .Date()
            .Title("Date")
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
           . Format("{1} on {0} -- #=Point_Info#")  <-- this doesnt work for me
        )
      )

score 1 · Accepted Answer · answered Oct 23 '13 at 20:05

1

Instead of using format use .Template("#= customTip #") where customTip is one of the properties in the model that contains the custom tooltip text. Format is much more limited and is only used for numbers.

answered Oct 23 '13 at 20:05

Mike Beeler

4,081
2
29
44

score 0 · Answer 2 · answered Oct 23 '13 at 20:43

Thanks Mike!

@(Html.Kendo().Chart<MyObject>()
        .Name("chart")
        .Title("")
        .DataSource(ds => 
            ds.Read(read => read.Action("_X", "Y"))
        )
        .Series(series =>
        {
            series.ScatterLine(model => model.Date, model => model.Point).Tooltip(x=>x.Template("#=dataItem.Point_Info#"));
        })
        .XAxis(x=>x
            .Date()
            .Title("Date")
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
        )
      )

in Kendo, how to make a tooltip with a custom databinding?

2 Answers2