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

Using bootstrap popover with ajax grid

2 Answers 174 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bil
Top achievements
Rank 1
Bil asked on 11 Mar 2014, 05:39 PM
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>
}

2 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 13 Mar 2014, 02:05 PM
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
 

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

 
0
Bil
Top achievements
Rank 1
answered on 13 Mar 2014, 02:16 PM
Thanks! Yes, that was the answer. Added the tooltip code on the databound event and everything works great.
Tags
Grid
Asked by
Bil
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Bil
Top achievements
Rank 1
Share this question
or