Using bootstrap popover with ajax grid

3 posts, 1 answers
  1. Bil
    Bil avatar
    29 posts
    Member since:
    Aug 2012

    Posted 11 Mar 2014 Link to this post

    Hi guys,

    I'm trying to use the bootstrap popover as a tooltip with a kendo grid that has ajax binding. I've put the markup into the ClientTemplate for specific colums and when viewing the source the markup is there. The markup is also valid and if I have static content on the page the popover works, I just can't get it to work on a column in the grid. Not sure if the .popover script isn't finding the columns or something.

    Here's my markup:

    @using Kendo.Mvc.UI
                .DataSource(dataSource => dataSource
                    .Read(read => read.Action("RefreshTable", "OffNormals"))
                    .Sort(sort => sort.Add(x => x.StartTime).Descending())
                .Columns(columns =>
                    columns.Bound(x => x.Device).ClientTemplate(
                        "<span class='tooltip-column' data-toggle='tooltip' title='Device Id' data-content='#= Id#'>#= Device#</span>");
                    columns.Bound(x => x.Phase);
                    columns.Bound(x => x.CurrentStatus);
                    columns.Bound(x => x.DeviceType);
                    columns.Bound(x => x.Start);
                    columns.Bound(x => x.DescriptionDisplay);
                    columns.Bound(x => x.OriginalFeeder);
                    columns.Bound(x => x.Operator);
                    columns.Bound(x => x.ServicePoint);
                    columns.Bound(x => x.AbbreviateRegion);
    @section scripts
            function updateTable() {
                var grid = $('#grid').data('kendoGrid');
                if (grid != undefined) {
                    trigger: "hover",
                    placement: "auto top"
            $(document).ready(function () {
            $(window).resize(function () {

  2. Answer
    Daniel avatar
    2231 posts

    Posted 13 Mar 2014 Link to this post


    Since the Grid is using Ajax binding, the elements will not be available on document ready but after the Ajax request is completed and the Grid has rendered the rows. You should use dataBound event to initialize the elements instead.


    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

  3. Bil
    Bil avatar
    29 posts
    Member since:
    Aug 2012

    Posted 13 Mar 2014 in reply to Daniel Link to this post

    Thanks! Yes, that was the answer. Added the tooltip code on the databound event and everything works great.
Back to Top