Using bootstrap popover with ajax grid

[Bil]

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

@(Html.Kendo().Grid<OffNormalListing>()
            .Name("grid")
            .DataSource(dataSource => dataSource
                .Ajax()
                .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);
            })
            .Pageable()
            .Sortable()
        )

@section scripts
{
    <script>
        function updateTable() {
            var grid = $('#grid').data('kendoGrid');
            if (grid != undefined) {
                grid.dataSource.read();
            }
            $(".tooltip-column").popover({
                trigger: "hover",
                placement: "auto top"
            });
        }

        $(document).ready(function () {
            updateTable();
        });

        $(window).resize(function () {
            updateTable();
        });

    </script>
}

[Daniel]

Hi,

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.

Regards,
Daniel
Telerik

 

 

[Bil]

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