Problem with Selection and Pagination in IE9 #379

pverloop · 2013-01-05T17:50:56Z

When I use a dgrid with Selection and Pagination, the dgrid-select and dgrid-deselect events do not work anymore after I select a different page.

With the code below I get the following:
Select a row:
LOG: select: dgrid-select - important
Select another row:
LOG: select: dgrid-deselect - important
LOG: select: dgrid-select - note
Select page 2 and select a row:
LOG: select: dgrid-cellfocusout - no rows
LOG: select: dgrid-cellfocusin - no rows

Using dojo 1.8.1 and dgrid 0.3.5-dev.
Happens only in IE9, works ok in Chrome and IE8 (= IE9 with IE8 compatibility mode)
Also does no happen anymore after I refresh the page in IE9.

Any ideas?

Code to reproduce. Put in dgrid\test\extensions

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test Pagination Extension</title>
        <meta name="viewport" content="width=570">
        <style>
            @import "../../../dojo/resources/dojo.css";
            .heading {
                font-weight: bold;
                padding-bottom: 0.25em;
            }
            .dgrid {
                width: 750px;
                margin: 10px;
            }

            #grid2 .dgrid-row {
                height: 22px;
            }
            #grid2 .dgrid-cell {
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            /* styles for establishing automatic height on the 2nd grid */
            #grid2 {
                height: auto;
            }
            #grid2 .dgrid-scroller {
                position: relative;
                overflow-y: hidden;
            }
            #grid2 .dgrid-header-scroll {
                display: none;
            }
            #grid2 .dgrid-header {
                right: 0;
            }

        </style>
        <script type="text/javascript" src="../../../dojo/dojo.js" 
            data-dojo-config="async: true"></script>
        <script type="text/javascript">
            // allow retrieving skin from GET param
            var skin = "claro",
                match = /\bskin=([^&]*)/.exec(location.search),
                skinDep, updateGrid,
                getColumns, getColumns2;
            if(match){ skin = match[1]; }
            skinDep = "xstyle/css!dgrid/css/skins/" + skin + ".css";

            require([skinDep, "dgrid/Grid", "dgrid/extensions/Pagination",
                    "dgrid/Selection", "dgrid/Keyboard",
                    "dojo/_base/lang", "dojo/_base/declare", "dojo/dom-construct", "dojo/dom-form", "dojo/on", "dgrid/test/data/base", "dojo/domReady!"],
                function(skinResource, Grid, Pagination, Selection, Keyboard,
                        lang, declare, domConstruct, domForm, on, testStore) {
                    on(document.body, "dgrid-select,dgrid-deselect",
                        function(event) {
                            console.log("select: " + event.type + ' - ' + 
                                (event.rows == null ? "no rows" : event.rows[0].data.col1));
                        });

                    var CustomGrid = declare([Grid, Keyboard, Selection, Pagination]);

                    document.body.className = skin;

                    window.grid = new CustomGrid({
                        store: testAsyncStore,
                        columns: {
                            col1: 'Column 1',
                            col2: { label: 'Column2', sortable: false },
                            col3: 'Column 3',
                            col4: 'Column 4',
                            col5: 'Column 5'
                        }
                    }, "grid");


                });
        </script>
    </head>
    <body>
        <div id="grid"></div>
    </body>
</html>

ktiedt · 2013-01-26T17:18:57Z

This is the same issue I was trying to track down earlier this week... it appears to be a race condition at first glance... but I was not able to track down an overall cause.

luisjotapepe · 2013-03-07T00:02:35Z

Same issue here. Still havent found the cause. Anyone?

mmaxwell · 2013-03-07T00:16:03Z

This error is actually happening when Keyboard is thrown into the mix. We are still working on finding the best way to fix this.

luisjotapepe · 2013-03-07T00:26:49Z

Sorry. We actually dont have Keyboard in the mix and still get the exact same issue. Any known work around for this that you might know? Thanks in advance

ghost · 2013-03-07T00:28:18Z

Interesting that you say you are experiencing the issue even without Keyboard. Can you tell us what mixins you are using (or perhaps even share a small gist)? That might provide us a new angle to poke at this from.

luisjotapepe · 2013-03-07T01:02:21Z

Hi Ken. Here you go. I hope this helps and you can keep us update on the issue.

It happens only in IE9 and as it was mentioned before after refreshing the page sometimes the select works (as in dgrid-deselect - dgrid-select) other times after refreshing goes like (dgrid-select - dgrid-deselect) as I was able to notice logging to the console.

Cheers.

require([module,'dojo/dom-style', 'dijit/registry', 'dojo/_base/declare', 'scapi/dialogs', 'dgrid/OnDemandGrid', 'dgrid/Selection', 'dgrid/extensions/Pagination', 'dojo/store/Memory', 'dijit/TitlePane', 'dojo/_base/array', 'dijit/ProgressBar', 'dijit/Tooltip', 'dojo/parser'], 
            function(orgDao, domStyle, registry, declare, dialogs, OnDemandGrid, Selection, Pagination, Memory, TitlePane, array) {
            ...
            
            orgDao.dashboard(organization, function(tableRowValues) {
                ...
                
                var someListGrid = declare([OnDemandGrid, Selection, Pagination, PageFlipNotification, declare([], {
                    onPageDisplay: function(results) {
                        ...
                    }
                })]);
                someStore = new dojo.store.Memory({idProperty: 'someId', data: tableRowValues});
                grid = new someListGrid({
                    query: function(tableRowValue) {
                        ...
                    },
                    store: someStore,
                    columns: {
                        ...
                    },
                    selectionMode: 'single'
                }, 'someName'); // end of grid creation
                
                grid.on('dgrid-select', function(event) {
                    someReferrals.selectEncounter(event.rows[0].data);
                    console.log('Selection happening...');
                });
                
                grid.on('dgrid-deselect', function(event) {
                    someReferrals.selectEncounter(null);
                    console.log('De-selection happening...');
                });
            });
        });

ghost · 2013-03-07T01:06:39Z

One thing I would immediately point out here is that you've got a declare call inside another declare call, though I imagine that's probably harmless, just sub-optimal. i.e. why not do this instead:

                var someListGrid = declare([OnDemandGrid, Selection, Pagination, PageFlipNotification], {
                    onPageDisplay: function(results) {
                        ...
                    }
                });

You reference a PageFlipNotification mixin in your declare hierarchy; does that emit any events by any chance? Could you possibly try removing some mixins and see whether the problem goes away at a certain point? That might help us narrow things down.

luisjotapepe · 2013-03-08T16:50:08Z

Thanks for the comment Ken. I have implemented your suggestion on the declare. Good catch! As for the mixins the PageFlipNotification does not throw any events. I started removing mixins and their functionality would go away but the problem stay. ie: when removing pagination it would show one big list of items. when removing Selection i would no be able to select items. when PageFlipNotification it would not update a cell status after loading content. OnDemandGrid i was not able to removed as it is obviously needed.

ghost · 2013-03-08T17:56:17Z

I missed that in your original code sample - you shouldn't be mixing Pagination into OnDemandGrid; mix it into Grid directly. Not sure whether that will solve the problem in your case. Basically I was wondering if the issue would happen to you with just Grid + Pagination + Selection, since in our experience it didn't seem to happen then.

luisjotapepe · 2013-03-11T18:06:55Z

We need to use OnDemandGrid since we have a store. I still tried with Grid and had the same issue. I have a work around using this:

grid.on(".dgrid-row:click", function(event){
    if (internetExplorerVersion() == 9) {
        doTheJob(grid.row(event).data);
    }
});

I truly hope this can be resolved soon.

ghost · 2013-03-14T00:21:05Z

So, this was a really weird issue that ended up being fixed by a wild guess. The thing that was setting IE9+ off was clicking the a tags in the navigation controls. Changing them to spans (which is something we had a mind to do anyway) resolved the issue.

This necessitated some other changes in Pagination in order to preserve existing functionality (i.e. tab stops, and ability to activate navigation controls by pressing enter when they have keyboard focus), but it should all be working now. If you see anything odd as a result of the latest changes, please open a ticket. Thanks!

kfranqueiro · 2013-03-14T00:57:04Z

Also, @luisjotapepe, I just realized you mentioned you were using OnDemandGrid to be able to use a store. The thing is, Pagination also builds in that logic - you do not need to (and should not) include OnDemandGrid in your declare hierarchy when using Pagination. Both OnDemandList and Pagination extend _StoreMixin, which is what provides the base store logic.

ghost closed this as completed in 0543a7d Mar 14, 2013

kfranqueiro mentioned this issue Sep 25, 2013

Selector plugin gets confused on IE9 and IE10 #733

Closed

kfranqueiro mentioned this issue Oct 11, 2013

Cell-Editor crashes on IE #366

Closed

This issue was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problem with Selection and Pagination in IE9 #379

Problem with Selection and Pagination in IE9 #379

pverloop commented Jan 5, 2013

ktiedt commented Jan 26, 2013

luisjotapepe commented Mar 7, 2013

mmaxwell commented Mar 7, 2013

luisjotapepe commented Mar 7, 2013

ghost commented Mar 7, 2013

luisjotapepe commented Mar 7, 2013

ghost commented Mar 7, 2013

luisjotapepe commented Mar 8, 2013

ghost commented Mar 8, 2013

luisjotapepe commented Mar 11, 2013

ghost commented Mar 14, 2013

kfranqueiro commented Mar 14, 2013

Problem with Selection and Pagination in IE9 #379

Problem with Selection and Pagination in IE9 #379

Comments

pverloop commented Jan 5, 2013

ktiedt commented Jan 26, 2013

luisjotapepe commented Mar 7, 2013

mmaxwell commented Mar 7, 2013

luisjotapepe commented Mar 7, 2013

ghost commented Mar 7, 2013

luisjotapepe commented Mar 7, 2013

ghost commented Mar 7, 2013

luisjotapepe commented Mar 8, 2013

ghost commented Mar 8, 2013

luisjotapepe commented Mar 11, 2013

ghost commented Mar 14, 2013

kfranqueiro commented Mar 14, 2013