sporadic error filtering grid sometimes

[alex.l]

Hi,

Please review this topic viewtopic.php?p=130261#p130261
Doesn't that sound to you as the same problem you have? Do you see any similar logic?

[gregc]

That one sounded like a tree child issue. This issue is pretty simple to reproduce and see where the issue is. I put in my own fix for now but will revisit later

[alex.l]

Actually, the issue I mentioned is not related to the tree, it's related to id collision problem, as far as I found it while debugging, but originally it had same error as you did. The test case user attached doesn't have any tree feature enabled.
Anyway, thanks for looking into it!

Could you please post a test case we can use to reproduce the issue if it's pretty simple to do? Because we still cannot confirm this bug on our side.

[gregc]

The bug is still there in alpha-3. Our pages are now super clean, no dojo, nothing actually except for bootstrap and fontawesome, but still get the issue. I can try to setup an example but would have to email you a private URL next week after configuring an example. Unless you can figure it out from this:

Again, all I have to do is scroll down to the bottom of the screen, select a row, and then use the filter, it actually breaks even harder in alpha-3. My fix to check for a null record resolves it again.

<div id='refselecteds'> <div id='myGrid-80148009' style='height: 86vh; width:98%' ></div><style>.b-grid-cell {
  min-height:1em;
}
</style></div><script type='module'>

import { Grid, DomHelper, AjaxStore, CollectionFilter, GridRowModel, Widget, EventHelper, Toast, DateHelper  } from '/bryntum/grid-5.6.0-alpha-3/build/grid.module.js?v7'; 
 window.Toast = Toast; 
 
  

window.genericgrid = new Grid({ 
    appendTo : 'myGrid-80148009', 
 
   fixedRowHeight : false, rowHeight : 24 
    , preserveScrollOnDatasetChange : true,  features : {    rowCopyPaste : false, 
        filter: true,   group : false,            excelExporter : true,      cellTooltip : { 
            hoverDelay      : 30, 
           textContent     : true, 
           allowOver     : true,      align : {
            align : 'b-t',
            minHeight : 400
        }} 
 
  , cellEdit : true 
		 ,  headerMenu : { 
             items : { 
                 exportTree : { text: 'Tree Export', weight : 15, onItem : rightclickitem, actionRefId: 1400, urlParams : 'orgId=1753028' }, 
                 viewSelectedItem : { text: 'View Selected Vendors', weight :  0,  						onItem : rightclickurl,  						urlParams : 'all=0&orgId=1753028&parentRefId=0&refGroup=Vendor', 							actionRefId : 1100  } 
             } 
         }, 
		cellMenu : { 
 items : { 
	  removeRow : false, 
		editselItem : { text: 'Edit', weight: 10, onItem : rightclickitem,  actionRefId:928 }, 
	  },   processItems({ items, record, column }) { 
	 },		} 
    }, 
 
 store : { 
 fields : [ 
],
        readUrl : 'v7.do?crud=r&actionRefId=1103&orgId=1753028&all=1&refGroup=Vendor&parentRefId=0&activeInd=1&',   

        createUrl : 'v7.do?crud=c&actionRefId=1103&orgId=1753028&all=1&refGroup=Vendor&parentRefId=0&activeInd=1&',   

        updateUrl : 'v7.do?crud=u&actionRefId=1103&orgId=1753028&all=1&refGroup=Vendor&parentRefId=0&activeInd=1&',   

        deleteUrl : 'v7.do?crud=d&actionRefId=1103&orgId=1753028&all=1&refGroup=Vendor&parentRefId=0&activeInd=1&',     filterParamName : 'filter', 
    sortParamName   : 'sort', 
        autoLoad : true, 
        autoCommit: true  

    },  
 
 columns : [ 
 {text: 'id',       field: 'f0', resizable: true , sortable: false , filterable: false , hidden: true , editor: false ,  renderer({ cellElement, value, isExport, record }) { 
                if (record.styleColor && cellElement) {                  cellElement.style.color = record.styleColor;                }              if (record.styleBackgroundColor && cellElement) {                  cellElement.style.backgroundColor = record.styleBackgroundColor;                }              return value;            } , type: 'number', format: '9' },
 {text: 'Selected',       field: 'f1', resizable: true , sortable: false , sum: 'count' , filterable: false , editor: true , type: 'check' },
 {text: 'display', headerRenderer ({ column, headerElement} ) {
 headerElement.setAttribute('data-btip', 'Filter will also search child levels'); 
     return 'display'; }, 
       field: 'f2', resizable: true , sortable: true , filterable: true , flex: 2, editor: false , htmlEncode : false, renderer({ cellElement, value, isExport, record, meta  }) { 
                if (record.styleColor && cellElement) {                  cellElement.style.color = record.styleColor;                }              if (record.styleBackgroundColor && cellElement) {                  cellElement.style.backgroundColor = record.styleBackgroundColor;                }                if (isExport) { 
                  return value;              } else { 
                 return record.href0; 
              } 
            }  },
 {text: 'description',       field: 'f3', resizable: true , sortable: true , filterable: true , flex: 2, editor: false ,  renderer({ cellElement, value, isExport, record }) { 
                if (record.styleColor && cellElement) {                  cellElement.style.color = record.styleColor;                }              if (record.styleBackgroundColor && cellElement) {                  cellElement.style.backgroundColor = record.styleBackgroundColor;                }              return value;            }  },
 {text: 'Updated',       field: 'f4', resizable: true 
, tooltipRenderer : ({ record, column }) => record.updatedInfo
, sortable: true , filterable: false , editor: false ,  renderer({ cellElement, value, isExport, record }) { 
                if (record.styleColor && cellElement) {                  cellElement.style.color = record.styleColor;                }              if (record.styleBackgroundColor && cellElement) {                  cellElement.style.backgroundColor = record.styleBackgroundColor;                }              return value;            }  },
 {text: '',       field: 'f5', resizable: true , sortable: false , filterable: false , flex: 3, editor: false ,  renderer({ cellElement, value, isExport, record }) { 
                if (record.styleColor && cellElement) {                  cellElement.style.color = record.styleColor;                }              if (record.styleBackgroundColor && cellElement) {                  cellElement.style.backgroundColor = record.styleBackgroundColor;                }              return value;            }  }] 
     

 
}); 
 
if (window.genericgrid.widgetMap.nextPageButton) {  window.genericgrid.widgetMap.nextPageButton.on('click', function() {
window.genericgrid.scrollable.y = 0
});}
window.genericgrid.addListener('cellDblClick', (event, column) =>  {
  });
 window.genericgrid.addListener('startCellEdit', (event) =>  {
	try {
	} catch (ex1) {
		console.log(ex1);
	}
});
  </script>
<script>document.addEventListener('DOMContentLoaded', () => {
    const actionButtons = document.querySelectorAll('button[data-action]');
    actionButtons.forEach(button => {
        button.addEventListener('click', executeJavascriptParamv7);
    });
});
</script></body>

[alex.l]

Hi,

If you also attach JSON with initial dataset and dataset you get after filtering, that should be enough to reproduce this.

[gregc]

Initial: initial.json

scroll to bottom, select row, popup filter button, enter filter

filter.json

[alex.l]

Thank you for cooperation! I finally reproduced that and confirmed a bug. Here is a ticket https://github.com/bryntum/support/issues/7518
You can subscribe on ticket updates to be notified when it's done.

[gregc]

Great, no rush.