Popovers and tooltips in Responsive grid

[SemWongParticipant]

Hello,

We’re trying to render a grid with some data and one of the columns has some actions in it. These actions are hidden behind a button and should show a popover with the actions in it. Aside from that, we also load tooltips for this button and for links.

Now our website is responsive, and we load the Grid to be fullsize of it’s Content container (width 100%). It looks fine and all, but we’re having problems.

Whenever we resize the window, all Javascript functions loaded within the Grid are removed and the tooltips and popovers stop working.

I can’t seem to find the Event that handles this, so we can’t reload it either.

This is our current code:

var dataadapter = new $.jqx.dataAdapter(source);

$('#websites').jqxGrid({
    source: dataadapter,
    width: '100%',
    autoheight: true,
    rowsheight: 50,
    filterable: true,
    showfilterrow: true,
    filterrowheight: 50,
    pageable: true,
    sortable: true,
    editable: true,
    theme: 'style',
    columns: {columns: 'columns'},
    ready: function () {
        load_jqxtooltips();
        load_jqxpopovers();
    }
});
//Pagination page changed
$('#websites').on('pagechanged', function () {
    load_jqxtooltips();
    load_jqxpopovers();
});
//I thought this was called when the Browser resizes, but apparently it's not?
$('#websites').on('columnresized', function () {
    load_jqxtooltips();
    load_jqxpopovers();
});

//Load Tooltip functionality
function load_jqxtooltips() {
    $(".jqxtooltip").each(function () { //Loop through all elements that have a Tooltip
        var c = $(this).attr('jqx-title'); //Get the Content for the tooltip
        $(this).jqxTooltip({position: 'top', showArrow: true, theme: 'metrodark', content: c}); //Add a tooltip for the Element
    });
};

//Loads Popover functionality
function load_jqxpopovers() {
    $('.jqxPopover').each(function() { //Loop through the buttons that contain a Popover
        var pid = $(this).attr('id').substr(3); //Gets the ID number from the Button ID
        $('#jqxPopover' + pid).jqxPopover({ width: 150, selector: $(this), autoClose: true }); //Generate a Popover for the Button
    });
}

The grid itself loads fine, and all the data is shown. The popovers and tooltips work, until we resize the page. What could be going wrong and how do we fix it? I tried looking everywhere but I can’t find anything.

[Peter StoevKeymaster]

Hi SemWong,

The way you do it is wrong. To create widgets, bind to events of these widgets and so on, you should use this approach: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customwidgetscolumn.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[SemWongParticipant]

Hello,

I’ve tried an implementation of a Widget, like so:

{
    'text': "Last Update",
    'datafield': "latest",
    'width': "20%",
    'height': "40px",
    'createwidget': function(row, column, value, htmlElement) {
        var c = htmlElement.getAttribute("jqx-title");
        if ($(htmlElement).find(".jqxtooltip").length > 0) 
            $(htmlElement).find(".jqxtooltip")[0].jqxTooltip({position: "top", showArrow: true, theme: "metrodark", content: c});
    },
    'initwidget': function(row, column, value, htmlElement) { 
        console.log('init'); 
    }
}

This is a column, but when I do this, I get an empty column for ‘latest’. I’m unsure what I’m supposed to do with initwidget.
This is what the ‘latest’ datasource looks like (javascript implementation):
"latest":"<a href='#'>2016-02-04 13:20:22</a>"

What am I doing wrong?

[SemWongParticipant]

Okay so I found out that I have to add the data to the htmlElement variable from the function. I will keep trying to figure this out :P.

[Author]

Posts