Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tree plugin displaying blank rows after scrolling, not querying from store #817

Closed
gregington opened this issue Jan 22, 2014 · 1 comment

Comments

@gregington
Copy link

When a tree has a root node expanded, and then another root node below is expanded, if there are more child nodes than the minimum query size, no further queries are issued to the store, leaving a blank area where data should be displayed.

To reproduce using the gist at https://gist.github.com/gregington/8553325

  1. Expand node 0
  2. Scroll down until node 4 is shown (last root node)
  3. Expand node 4
  4. Scroll past node 4:24

Expected Result
Row 4:25 and subsequent rows are queried to fill the visible area.

Actual Result
The required rows are not queried from the store.

I instrumented the store to display when it was queried. I get the following results.

Query: {}, options: {"start":0,"count":25}
Query: {"parentId":"0"}, options: {"originalQuery":{},"start":0,"count":25,"queryLevel":0} 
Query: {"parentId":"0"}, options: {"originalQuery":{},"start":24,"count":48,"queryLevel":0}
Query: {"parentId":"0"}, options: {"originalQuery":{},"start":71,"count":29,"queryLevel":0} 
Query: {"parentId":"4"}, options: {"originalQuery":{},"start":0,"count":25,"queryLevel":0}

Note that only 25 children of root node 4 are queried - there are 100 children.

Screen Shot
See the following screen shot which shown rows 4:25 and beyond missing.
image

Browsers
This behaviour is seen on Chrome version 32.0.1700.76 m and Firefox v 22.0. This gist does not seem to work for me under IE, but I have seen the same behaviour in a more complex example, not suited for filing a bug report.

Library versions
Libraries used to reproduce this behaviour

  • dojo 1.9.2
  • dgrid 0.3.12
  • put-selector 0.3.5
  • xstyle 0.2.0
@gregington
Copy link
Author

I can make this occur in the standard a test page by changing testCountryData in dgrid/test/data/base.js.

To reproduce:

  1. Edit dgrid/test/data/base.js and replace the declaration of testCountryData with the code below.
  2. Open a browser and go to dgrid/test/tree.html
  3. Go to any of the first three grids.
  4. Expand Africa > Egypt. There should 30 30 Cairo rows.
  5. Scroll to the bottom of the list.
  6. Expand South America -> Argentina.
  7. Scroll down. There should be 30 Buenos Aires rows, but there are only 25.

image

  var testCountryData = [
    { id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km',
        timezone: '-1 UTC to +4 UTC'},
      { id: 'EG', name:'Egypt', type:'country', parent: 'AF' },
        { id: 'Cairo-1', name:'Cairo1', type:'city', parent: 'EG' },
        { id: 'Cairo-2', name:'Cairo2', type:'city', parent: 'EG' },
        { id: 'Cairo-3', name:'Cairo3', type:'city', parent: 'EG' },
        { id: 'Cairo-4', name:'Cairo4', type:'city', parent: 'EG' },
        { id: 'Cairo-5', name:'Cairo5', type:'city', parent: 'EG' },
        { id: 'Cairo-6', name:'Cairo6', type:'city', parent: 'EG' },
        { id: 'Cairo-7', name:'Cairo7', type:'city', parent: 'EG' },
        { id: 'Cairo-8', name:'Cairo8', type:'city', parent: 'EG' },
        { id: 'Cairo-9', name:'Cairo9', type:'city', parent: 'EG' },
        { id: 'Cairo-10', name:'Cairo10', type:'city', parent: 'EG' },
        { id: 'Cairo-11', name:'Cairo11', type:'city', parent: 'EG' },
        { id: 'Cairo-12', name:'Cairo12', type:'city', parent: 'EG' },
        { id: 'Cairo-13', name:'Cairo13', type:'city', parent: 'EG' },
        { id: 'Cairo-14', name:'Cairo14', type:'city', parent: 'EG' },
        { id: 'Cairo-15', name:'Cairo15', type:'city', parent: 'EG' },
        { id: 'Cairo-16', name:'Cairo16', type:'city', parent: 'EG' },
        { id: 'Cairo-17', name:'Cairo17', type:'city', parent: 'EG' },
        { id: 'Cairo-18', name:'Cairo18', type:'city', parent: 'EG' },
        { id: 'Cairo-19', name:'Cairo19', type:'city', parent: 'EG' },
        { id: 'Cairo-20', name:'Cairo20', type:'city', parent: 'EG' },
        { id: 'Cairo-21', name:'Cairo21', type:'city', parent: 'EG' },
        { id: 'Cairo-22', name:'Cairo22', type:'city', parent: 'EG' },
        { id: 'Cairo-23', name:'Cairo23', type:'city', parent: 'EG' },
        { id: 'Cairo-24', name:'Cairo24', type:'city', parent: 'EG' },
        { id: 'Cairo-25', name:'Cairo25', type:'city', parent: 'EG' },
        { id: 'Cairo-26', name:'Cairo26', type:'city', parent: 'EG' },
        { id: 'Cairo-27', name:'Cairo27', type:'city', parent: 'EG' },
        { id: 'Cairo-28', name:'Cairo28', type:'city', parent: 'EG' },
        { id: 'Cairo-29', name:'Cairo29', type:'city', parent: 'EG' },
        { id: 'Cairo-30', name:'Cairo30', type:'city', parent: 'EG' },
      { id: 'KE', name:'Kenya', type:'country', parent: 'AF'},
        { id: 'Nairobi', name:'Nairobi', type:'city', parent: 'KE' },
        { id: 'Mombasa', name:'Mombasa', type:'city', parent: 'KE' },
      { id: 'SD', name:'Sudan', type:'country', parent: 'AF'},
        { id: 'Khartoum', name:'Khartoum', type:'city', parent: 'SD' },
      { id: 'AS', name:'Asia', type:'continent', population: '3.2 billion'},
        { id: 'CN', name:'China', type:'country', parent: 'AS' },
          { id: 'Shanghai', name:'Shanghai', type:'city', parent: 'CN' },
        { id: 'IN', name:'India', type:'country', parent: 'AS' },
          { id: 'Calcutta', name:'Calcutta', type:'city', parent: 'IN' },
        { id: 'RU', name:'Russia', type:'country', parent: 'AS' },
          { id: 'Moscow', name:'Moscow', type:'city', parent: 'RU' },
        { id: 'MN', name:'Mongolia', type:'country', parent: 'AS' },
          { id: 'UlanBator', name:'Ulan Bator', type:'city', parent: 'MN' },
      { id: 'OC', name:'Oceania', type:'continent', population:'21 million'},
      { id: 'AU', name:'Australia', type:'country', population:'21 million', parent: 'OC' },
        { id: 'Sydney', name:'Sydney', type:'city', parent: 'AU' },
      { id: 'EU', name:'Europe', type:'continent', population: '774 million' },
      { id: 'DE', name:'Germany', type:'country', parent: 'EU' },
        { id: 'Berlin', name:'Berlin', type:'city', parent: 'DE' },
      { id: 'FR', name:'France', type:'country', parent: 'EU' },
        { id: 'Paris', name:'Paris', type:'city', parent: 'FR' },
      { id: 'ES', name:'Spain', type:'country', parent: 'EU' },
        { id: 'Madrid', name:'Madrid', type:'city', parent: 'ES' },
      { id: 'IT', name:'Italy', type:'country', parent: 'EU' },
        { id: 'Rome', name:'Rome', type:'city', parent: 'IT' },
    { id: 'NA', name:'North America', type:'continent', population: '575 million'},
      { id: 'MX', name:'Mexico', type:'country',  population:'108 million', area:'1,972,550 sq km', parent: 'NA' },
        { id: 'Mexico City', name:'Mexico City', type:'city', population:'19 million', timezone:'-6 UTC', parent: 'MX'},
        { id: 'Guadalajara', name:'Guadalajara', type:'city', population:'4 million', timezone:'-6 UTC', parent: 'MX' },
      { id: 'CA', name:'Canada', type:'country',  population:'33 million', area:'9,984,670 sq km', parent: 'NA' },
        { id: 'Ottawa', name:'Ottawa', type:'city', population:'0.9 million', timezone:'-5 UTC', parent: 'CA'},
        { id: 'Toronto', name:'Toronto', type:'city', population:'2.5 million', timezone:'-5 UTC', parent: 'CA' },
      { id: 'US', name:'United States of America', type:'country', parent: 'NA' },
        { id: 'New York', name:'New York', type:'city', parent: 'US' },
    { id: 'SA', name:'South America', type:'continent', population: '445 million' },
      { id: 'BR', name:'Brazil', type:'country', population:'186 million', parent: 'SA' },
        { id: 'Brasilia', name:'Brasilia', type:'city', parent: 'BR' },
      { id: 'AR', name:'Argentina', type:'country', population:'40 million', parent: 'SA' },
        { id: 'BuenosAires-1', name:'Buenos Aires1', type:'city', parent: 'AR' },
        { id: 'BuenosAires-2', name:'Buenos Aires2', type:'city', parent: 'AR' },
        { id: 'BuenosAires-3', name:'Buenos Aires3', type:'city', parent: 'AR' },
        { id: 'BuenosAires-4', name:'Buenos Aires4', type:'city', parent: 'AR' },
        { id: 'BuenosAires-5', name:'Buenos Aires5', type:'city', parent: 'AR' },
        { id: 'BuenosAires-6', name:'Buenos Aires6', type:'city', parent: 'AR' },
        { id: 'BuenosAires-7', name:'Buenos Aires7', type:'city', parent: 'AR' },
        { id: 'BuenosAires-8', name:'Buenos Aires8', type:'city', parent: 'AR' },
        { id: 'BuenosAires-9', name:'Buenos Aires9', type:'city', parent: 'AR' },
        { id: 'BuenosAires-10', name:'Buenos Aires10', type:'city', parent: 'AR' },
        { id: 'BuenosAires-11', name:'Buenos Aires11', type:'city', parent: 'AR' },
        { id: 'BuenosAires-12', name:'Buenos Aires12', type:'city', parent: 'AR' },
        { id: 'BuenosAires-13', name:'Buenos Aires13', type:'city', parent: 'AR' },
        { id: 'BuenosAires-14', name:'Buenos Aires14', type:'city', parent: 'AR' },
        { id: 'BuenosAires-15', name:'Buenos Aires15', type:'city', parent: 'AR' },
        { id: 'BuenosAires-16', name:'Buenos Aires16', type:'city', parent: 'AR' },
        { id: 'BuenosAires-17', name:'Buenos Aires17', type:'city', parent: 'AR' },
        { id: 'BuenosAires-18', name:'Buenos Aires18', type:'city', parent: 'AR' },
        { id: 'BuenosAires-19', name:'Buenos Aires19', type:'city', parent: 'AR' },
        { id: 'BuenosAires-20', name:'Buenos Aires20', type:'city', parent: 'AR' },
        { id: 'BuenosAires-21', name:'Buenos Aires21', type:'city', parent: 'AR' },
        { id: 'BuenosAires-22', name:'Buenos Aires22', type:'city', parent: 'AR' },
        { id: 'BuenosAires-23', name:'Buenos Aires23', type:'city', parent: 'AR' },
        { id: 'BuenosAires-24', name:'Buenos Aires24', type:'city', parent: 'AR' },
        { id: 'BuenosAires-25', name:'Buenos Aires25', type:'city', parent: 'AR' },
        { id: 'BuenosAires-26', name:'Buenos Aires26', type:'city', parent: 'AR' },
        { id: 'BuenosAires-27', name:'Buenos Aires27', type:'city', parent: 'AR' },
        { id: 'BuenosAires-28', name:'Buenos Aires28', type:'city', parent: 'AR' },
        { id: 'BuenosAires-29', name:'Buenos Aires29', type:'city', parent: 'AR' },
        { id: 'BuenosAires-30', name:'Buenos Aires30', type:'city', parent: 'AR' }
  ];

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant