jQuery UI Widgets Forums Grid Issue with linked columns not consistently clickable in IE11

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Martin 5 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • michaeltangen

    One of our agencies that uses the Data Grid is having bizarre IE issues with linked column data — and my suspicion is that absolute positioning and z-indexes may be to blame. There are some links that aren’t reliably clickable and this video screencap that I threw together shows it in action: https://www.youtube.com/watch?v=DVZbgZWSwu0 — when a link is in full view on a page (you don’t have to scroll down to it), the link clicks out to the destination just fine. But when you reduce the browser’s height to less than the position of said link, the link doesn’t work. Instead the browser just scrolls to the top of the grid.

    • It’s only IE — Firefox and Chrome behave normally.
    • The rendered source in the inspector tools show a properly formatted <a> tag
    • The issue only happens when a link’s vertical position is lower than the height of the window from the point where the grid is instantiated.

    I’m at my wit’s end here and am pretty sure this has to do with the inline CSS generated by the data grid script. The click behavior of the links is the same if you were to click anywhere (outside the link) within the data grid.

    • This topic was modified 5 years, 11 months ago by  michaeltangen.


    Hello michaeltangen,

    I’ve tried reproducing this issue but without success. The links open correctly in IE11 even when you scroll down to them or when you reduce the height.
    Can you send you code so we can take a look at it?
    Here is the example that I’ve tried (I added more item entries in the feed.xml file, so there are enough records in the grid to scroll down):

    <!DOCTYPE html>
    <html lang="en">
        <title id='Description'>Grid</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <meta name="viewport" content="width =device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript" src="scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var url = "sampledata/feed.xml";
                var source =
                        datatype: "xml",
                        datafields: [
                            { name: 'title', type: 'string' },
                            { name: 'link', type: 'string' },
                            { name: 'pubDate', type: 'date' },
                            { name: 'creator', map: 'dc\\:creator', type: 'string' },
                        root: "channel",
                        record: "item",
                        url: url
                var linkrenderer = function (row, column, value) {
                    if (value.indexOf('#') != -1) {
                        value = value.substring(0, value.indexOf('#'));
                    var format = { target: '"_blank"' };
                    var html = $.jqx.dataFormat.formatlink(value, format);
                    return html;
                var dataAdapter = new $.jqx.dataAdapter(source);
                // Create jqxGrid.
                        width: 1200,
                        source: dataAdapter,
                        pageable: false,
                        autoheight: true,
                        columns: [
                            { text: 'Link', datafield: 'link', width: 550, cellsrenderer: linkrenderer },
                            { text: 'Title', datafield: 'title', width: 200 },
                            { text: 'Publish Date', datafield: 'pubDate', width: 250, cellsformat: "D" },
                            { text: 'Creator', datafield: 'creator', width: 200 }
    <body class='default'>
        <div id="grid">

    Best Regards,

    jQWidgets Team

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.