ajax store called twice if you have a filter param

Post by **gregc** » Tue Feb 09, 2021 5:20 am

It will take some time to demonstrate it but it appears that if you
1) create an ajax store
2) create a filter predefined with an initial filter value in the configuration

it will make a call to the remote URL twice, first without the filter, then with the filter applied.
this causes issues as the results may not come back in order.

Post by **mats** » Tue Feb 09, 2021 12:24 pm

Please post your store definition here so we can see it. I see just one load request for:

store = new AjaxStore({
                readUrl         : 'url',
                filterParamName : 'foo',
                autoLoad        : true,
                filters         : {
                    property : 'type',
                    value    : 2
                }
            });

Post by **gregc** » Tue Feb 09, 2021 12:42 pm

The store is

     store : { 
        readUrl : 'Welcome.do?crud=r&actionRefId=922&orgId=1753028&activeInd=1',   

        createUrl : 'Welcome.do?crud=c&actionRefId=922&orgId=1753028&activeInd=1',   

        updateUrl : 'Welcome.do?crud=u&actionRefId=922&orgId=1753028&activeInd=1',   

        deleteUrl : 'Welcome.do?crud=d&actionRefId=922&orgId=1753028&activeInd=1',     pageParamName   : 'page', 
    pageSize        : 100, 
    filterParamName : 'filter', 
    sortParamName   : 'sort', 
        autoLoad : true, 
        autoCommit: true  

    },

Here you can see the two calls:

Here is the full grid definition when it generates two calls, and I have a predefined filter

grid = new Grid({ 
    appendTo : 'myGrid0', 
 
fixedRowHeight : false 
 , bbar : { 
        type : 'pagingtoolbar' 
    } 
    , features : { 
       

filter: [   { property : 'f4', value : ['2234144'] }
 ,   { property : 'f1', value : ['9312876'] }
],
  group : false,            excelExporter : true,      cellTooltip : { 
            hoverDelay      : 30, 
           textContent     : true 
        } 
 
  , cellEdit : true 
		 ,  headerMenu : { 
             items : { 
                 exportItem : { text: 'Export to Excel', weight : 15, onItem : excelexport}, 
                 viewInactiveItem : { text: 'View Inactive Issues', weight :  0,  						onItem : rightclickurl,  						urlParams : 'activeInd=0', 							actionRefId: 921  } 
             } 
         }, 
		cellMenu : { 
 items : { 
	         removeRow : false, 
		headerItem : { text: 'Edit Issue', weight: 15, onItem : rightclickitem,  actionRefId: 923} 
	  },   processItems({ items, record, column }) { 
			for (var key in items) { 
					var item = items[key]; 
					if (item.text && item.text.includes("quals")) { 
                    	item.hidden = true; 
					} 
  if (grid && grid.selectedRecords && grid.selectedRecords.length > 1) {
						if (item.text && item.text.includes("Copy")) { 
                     	item.hidden = true; 
						} 
						if (item.text && item.text.includes("Edit")) { 
                     	item.hidden = true; 
						} 
    }
					} 
 	 },		} 
    }, 
 
 store : { 
    readUrl : 'Welcome.do?crud=r&actionRefId=922&orgId=1753028&activeInd=1&statusRefId=2234144&projectId=9312876&',   
    createUrl : 'Welcome.do?crud=c&actionRefId=922&orgId=1753028&activeInd=1&statusRefId=2234144&projectId=9312876&',   
    updateUrl : 'Welcome.do?crud=u&actionRefId=922&orgId=1753028&activeInd=1&statusRefId=2234144&projectId=9312876&',   
    deleteUrl : 'Welcome.do?crud=d&actionRefId=922&orgId=1753028&activeInd=1&statusRefId=2234144&projectId=9312876&',     pageParamName   : 'page', 
pageSize        : 100, 
filterParamName : 'filter', 
sortParamName   : 'sort', 
    autoLoad : true, 
    autoCommit: true  
},  
 
 columns : [ 
 {text: 'id',       field: 'f0', resizable: true , sortable: false , filterable: false , hidden: true , editor: false , autoHeight:true , type: 'number', format: '9' },
 {text: 'Project',       field: 'f1', resizable: true , sortable: true , filterable: {             filterField : {                 valueField   : 'refId',                displayField : 'display', 
                type  : 'combo',                 multiSelect  : true,                    items        : [{ 
            refId : '', 
            display : '' 
        }, { 
            refId : '1753700', 
            display : 'Current State' 
        }, { 
            refId : '9312876', 
            display : 'Cerner upgrade' 
        }, { 
            refId : '11768813', 
            display : 'Enrollment 20201' 
        }, { 
            refId : '3802743', 
            display : 'Roll-out' 
        }]            }         },  editor: { 
        valueField   : 'refId',        displayField : 'display', 
        type         : 'combo', 
        items        : [{ 
            refId : '', 
            display : '' 
        }, { 
            refId : '1753700', 
            display : 'Current State' 
        }, { 
            refId : '9312876', 
            display : 'Cerner upgrade' 
        }, { 
            refId : '11768813', 
            display : 'Enrollment 20201' 
        }, { 
            refId : '3802743', 
            display : 'Roll-out' 
        }]          

    },  renderer : ({ value, column }) => column.editor.store.getById(value)?.get('display'), autoHeight:true  },
 {text: 'Date',       field: 'f2', resizable: true , sortable: true , filterable: false , editor: false , autoHeight:true  },
 {text: 'Issue Nbr',       field: 'f3', resizable: true , sortable: true , filterable: true , editor: false , autoHeight:true  },
 {text: 'Status',       field: 'f4', resizable: true , sortable: true , filterType: 'text' , filterable: {             filterField : {                 valueField   : 'refId',                displayField : 'display', 
                type  : 'combo',                 multiSelect  : true,                         items        : [{ 
            refId : '0', 
            display : '' 
        }, { 
            refId : '2234144', 
            display : 'Assigned' 
        }, { 
            refId : '12164753', 
            display : 'CAB Approved' 
        }, { 
            refId : '2234149', 
            display : 'Cancelled' 
        }, { 
            refId : '2234148', 
            display : 'Closed' 
        }, { 
            refId : '2234145', 
            display : 'In Process' 
        }, { 
            refId : '2234146', 
            display : 'On Hold' 
        }, { 
            refId : '2234143', 
            display : 'Open' 
        }, { 
            refId : '12164748', 
            display : 'Pending CAB' 
        }, { 
            refId : '2234147', 
            display : 'Resolved' 
        }] 
            }         }, 
    editor: { 
        type         : 'combo', 
        valueField   : 'refId',        displayField : 'display', 
        items        : [{ 
            refId : '0', 
            display : '' 
        }, { 
            refId : '2234144', 
            display : 'Assigned' 
        }, { 
            refId : '12164753', 
            display : 'CAB Approved' 
        }, { 
            refId : '2234149', 
            display : 'Cancelled' 
        }, { 
            refId : '2234148', 
            display : 'Closed' 
        }, { 
            refId : '2234145', 
            display : 'In Process' 
        }, { 
            refId : '2234146', 
            display : 'On Hold' 
        }, { 
            refId : '2234143', 
            display : 'Open' 
        }, { 
            refId : '12164748', 
            display : 'Pending CAB' 
        }, { 
            refId : '2234147', 
            display : 'Resolved' 
        }] 
    },  renderer : ({ value, column }) => column.editor.store.getById(value)?.get('display'), autoHeight:true  },

Here is the grid which is fine, and is without the filter

grid = new Grid({ 
    appendTo : 'myGrid0', 
 
fixedRowHeight : false 
 , bbar : { 
        type : 'pagingtoolbar' 
    } 
    , features : { 
       filter: true,   group : false,            excelExporter : true,      cellTooltip : { 
            hoverDelay      : 30, 
           textContent     : true 
        } 
 
  , cellEdit : true 
		 ,  headerMenu : { 
             items : { 
                 exportItem : { text: 'Export to Excel', weight : 15, onItem : excelexport}, 
                 viewInactiveItem : { text: 'View Inactive Issues', weight :  0,  						onItem : rightclickurl,  						urlParams : 'activeInd=0', 							actionRefId: 921  } 
             } 
         }, 
		cellMenu : { 
 items : { 
	         removeRow : false, 
		headerItem : { text: 'Edit Issue', weight: 15, onItem : rightclickitem,  actionRefId: 923} 
	  },   processItems({ items, record, column }) { 
			for (var key in items) { 
					var item = items[key]; 
					if (item.text && item.text.includes("quals")) { 
                    	item.hidden = true; 
					} 
  if (grid && grid.selectedRecords && grid.selectedRecords.length > 1) {
						if (item.text && item.text.includes("Copy")) { 
                     	item.hidden = true; 
						} 
						if (item.text && item.text.includes("Edit")) { 
                     	item.hidden = true; 
						} 
    }
					} 
 	 },		} 
    }, 
 
 store : { 
    readUrl : 'Welcome.do?crud=r&actionRefId=922&orgId=1753028&activeInd=1&statusRefId=2234144&executionId=12371259&',   
    createUrl : 'Welcome.do?crud=c&actionRefId=922&orgId=1753028&activeInd=1&statusRefId=2234144&executionId=12371259&',   
    updateUrl : 'Welcome.do?crud=u&actionRefId=922&orgId=1753028&activeInd=1&statusRefId=2234144&executionId=12371259&',   
    deleteUrl : 'Welcome.do?crud=d&actionRefId=922&orgId=1753028&activeInd=1&statusRefId=2234144&executionId=12371259&',     pageParamName   : 'page', 
pageSize        : 100, 
filterParamName : 'filter', 
sortParamName   : 'sort', 
    autoLoad : true, 
    autoCommit: true  
},  
 
 columns : [ 
 {text: 'id',       field: 'f0', resizable: true , sortable: false , filterable: false , hidden: true , editor: false , autoHeight:true , type: 'number', format: '9' },
 {text: 'Project',       field: 'f1', resizable: true , sortable: true , filterable: {             filterField : {                 valueField   : 'refId',                displayField : 'display', 
                type  : 'combo',                 multiSelect  : true,                    items        : [{ 
            refId : '', 
            display : '' 
        }, { 
            refId : '1753700', 
            display : 'Current State' 
        }, { 
            refId : '9312876', 
            display : 'Cerner upgrade' 
        }, { 
            refId : '11768813', 
            display : 'Enrollment 20201' 
        }, { 
            refId : '3802743', 
            display : 'Roll-out' 
        }]            }         },  editor: { 
        valueField   : 'refId',        displayField : 'display', 
        type         : 'combo', 
        items        : [{ 
            refId : '', 
            display : '' 
        }, { 
            refId : '1753700', 
            display : 'Current State' 
        }, { 
            refId : '9312876', 
            display : 'Cerner upgrade' 
        }, { 
            refId : '11768813', 
            display : 'Enrollment 20201' 
        }, { 
            refId : '3802743', 
            display : 'Roll-out' 
        }]          

    },  renderer : ({ value, column }) => column.editor.store.getById(value)?.get('display'), autoHeight:true  },
 {text: 'Date',       field: 'f2', resizable: true , sortable: true , filterable: false , editor: false , autoHeight:true  },
 {text: 'Issue Nbr',       field: 'f3', resizable: true , sortable: true , filterable: true , editor: false , autoHeight:true  },
 {text: 'Status',       field: 'f4', resizable: true , sortable: true , filterType: 'text' , filterable: {             filterField : {                 valueField   : 'refId',                displayField : 'display', 
                type  : 'combo',                 multiSelect  : true,                         items        : [{ 
            refId : '0', 
            display : '' 
        }, { 
            refId : '2234144', 
            display : 'Assigned' 
        }, { 
            refId : '12164753', 
            display : 'CAB Approved' 
        }, { 
            refId : '2234149', 
            display : 'Cancelled' 
        }, { 
            refId : '2234148', 
            display : 'Closed' 
        }, { 
            refId : '2234145', 
            display : 'In Process' 
        }, { 
            refId : '2234146', 
            display : 'On Hold' 
        }, { 
            refId : '2234143', 
            display : 'Open' 
        }, { 
            refId : '12164748', 
            display : 'Pending CAB' 
        }, { 
            refId : '2234147', 
            display : 'Resolved' 
        }] 
            }         }, 
    editor: { 
        type         : 'combo', 
        valueField   : 'refId',        displayField : 'display', 
        items        : [{ 
            refId : '0', 
            display : '' 
        }, { 
            refId : '2234144', 
            display : 'Assigned' 
        }, { 
            refId : '12164753', 
            display : 'CAB Approved' 
        }, { 
            refId : '2234149', 
            display : 'Cancelled' 
        }, { 
            refId : '2234148', 
            display : 'Closed' 
        }, { 
            refId : '2234145', 
            display : 'In Process' 
        }, { 
            refId : '2234146', 
            display : 'On Hold' 
        }, { 
            refId : '2234143', 
            display : 'Open' 
        }, { 
            refId : '12164748', 
            display : 'Pending CAB' 
        }, { 
            refId : '2234147', 
            display : 'Resolved' 
        }] 
    },

Post by **mats** » Tue Feb 09, 2021 1:39 pm

You can simply disable autoLoad when you have filters defined to get it working the way you want.

Support Forum

ajax store called twice if you have a filter param