EasyUI Forum

Scrollview duplicate data after calling Load method when number of rows is less than the pageSize value.

Also causes DetailView to go bonkers by calling the subgrid url then reloading then reloading the table twice.

Kind of a road block that I have not been able to find a workaround for yet.

Please provide an example to demonstrate your issue.

Well here is the Javascript.   A little background on the data.  It is Json coming from a Database that has approx 2300 rows.  Would have liked to just search and find the index of the row and go to it, but scrollview doesn't seem to want to do that.  so i decided to just filter.  And what I discovered was when I had less data come back from the filter call than the amount of the PageSize (50) it will call the cong.php url twice.  One request with just the filter field and the second with the filter field, the pageSize and rows.  And it fills the table with the same data twice.  and When I expandRow it makes the sub grid call to php to get whatever data it needs amd opens up just long enough to see it flicker color, but then reloads the full table again with the 2 calls, and that is where I am stuck.

As you can see below in the DoSearch function I use the Load Argument and  it works fine.  I would expect that line to only be called once no matter how many records are returned.

I attached an example of what it looks like.  The duplicate values is not good, but workable. The not workable piece is the fact that my detailViews wont work. 

So just a reminder, it I have enough rows to fill the space it does not duplicate, does not call anything twice and works as expected. 


var table='damcc';
         $(function(){
            var now = new Date();
            var minmax = [];
            $('#td').datebox({
               onSelect: function(date){
                  //$('#topbottom').datagrid('loadData', {"total":0,"rows":[]});
                  $('#topbottom').datagrid({
                     url:'./scripts/cong.php?date='+date.format("yyyy-mm-dd")
                  });
               }
            });
            
            /*$('#searchnodes').combobox({
               url:'./scripts/nodes.php',
               textField:'nodeid',
               valueField:'nodeid'
               });*/
            
            $('#td').datebox('setValue', now.format("mm/dd/yyyy"));
            
            $('#topbottom').datagrid({
               url:'./scripts/cong.php?date='+now.format("yyyy-mm-dd"),
               autoRowHeight:false,
               scrollbarSize:0,
               striped:true,
               title:"Congestion Viewer",
               toolbar:'#tb',
               singleSelect:false,
               fit:true,
               columns:[[
                  {field:'nodeid',title:'Nodeid',width:130, sortable:true},
                  {field:'1',title:'1',width:45, styler:styler100200, sortable:true},
                  {field:'2',title:'2',width:45, styler:styler100200, sortable:true},
                  {field:'3',title:'3',width:45, styler:styler100200, sortable:true},
                  {field:'4',title:'4',width:45, styler:styler100200, sortable:true},
                  {field:'5',title:'5',width:45, styler:styler100200, sortable:true},
                  {field:'6',title:'6',width:45, styler:styler100200, sortable:true},
                  {field:'7',title:'7',width:45, styler:styler100200, sortable:true},
                  {field:'8',title:'8',width:45, styler:styler100200, sortable:true},
                  {field:'9',title:'9',width:45, styler:styler100200, sortable:true},
                  {field:'10',title:'10',width:45, styler:styler100200, sortable:true},
                  {field:'11',title:'11',width:45, styler:styler100200, sortable:true},
                  {field:'12',title:'12',width:45, styler:styler100200, sortable:true},
                  {field:'13',title:'13',width:45, styler:styler100200, sortable:true},
                  {field:'14',title:'14',width:45, styler:styler100200, sortable:true},
                  {field:'15',title:'15',width:45, styler:styler100200, sortable:true},
                  {field:'16',title:'16',width:45, styler:styler100200, sortable:true},
                  {field:'17',title:'17',width:45, styler:styler100200, sortable:true},
                  {field:'18',title:'18',width:45, styler:styler100200, sortable:true},
                  {field:'19',title:'19',width:45, styler:styler100200, sortable:true},
                  {field:'20',title:'20',width:45, styler:styler100200, sortable:true},
                  {field:'21',title:'21',width:45, styler:styler100200, sortable:true},
                  {field:'22',title:'22',width:45, styler:styler100200, sortable:true},
                  {field:'23',title:'23',width:45, styler:styler100200, sortable:true},
                  {field:'24',title:'24',width:45, styler:styler100200, sortable:true},
                  {field:'25',title:'offpeak',width:50, styler:styler200400, sortable:true},
                  {field:'26',title:'onpeak',width:50, styler:styler200400, sortable:true}
               ]],
               onLoadSucces:function(){
                  
               },
               view: scrollview,
               rownumbers:true,
               pageSize:50,
               detailFormatter: function(index, data){
                  var index = data.nodeid;
                  index = index.replace(".","_");
                  index = index.replace(".","_");
                  index = index.replace(".","_");
                  index = index.replace(".","_");
                  return '<div style="padding:2px"><table id="tt-' + index + '"></table></div>';
               },
               onExpandRow: function(index,row){
                  var index = row.nodeid;
                  index = index.replace(".","_");
                  index = index.replace(".","_");
                  index = index.replace(".","_");
                  index = index.replace(".","_");
                  $('#tt-'+index).datagrid({
                     url:'./scripts/subcong.php?date='+$('#td').datebox('getValue')+'&nodeid='+row.nodeid+'&table='+table,
                     fitColumns:false,
                     singleSelect:true,
                     autoRowHeight:false,
                     height:'auto',
                     scrollsize:0,
                     columns:[[
                     {field:'nodeid',title:'Nodeid',width:127, sortable:true},
                     {field:'1',title:'1',width:45, styler:styler100200, sortable:true},
                     {field:'2',title:'2',width:45, styler:styler100200, sortable:true},
                     {field:'3',title:'3',width:45, styler:styler100200, sortable:true},
                     {field:'4',title:'4',width:45, styler:styler100200, sortable:true},
                     {field:'5',title:'5',width:45, styler:styler100200, sortable:true},
                     {field:'6',title:'6',width:45, styler:styler100200, sortable:true},
                     {field:'7',title:'7',width:45, styler:styler100200, sortable:true},
                     {field:'8',title:'8',width:45, styler:styler100200, sortable:true},
                     {field:'9',title:'9',width:45, styler:styler100200, sortable:true},
                     {field:'10',title:'10',width:45, styler:styler100200, sortable:true},
                     {field:'11',title:'11',width:45, styler:styler100200, sortable:true},
                     {field:'12',title:'12',width:45, styler:styler100200, sortable:true},
                     {field:'13',title:'13',width:45, styler:styler100200, sortable:true},
                     {field:'14',title:'14',width:45, styler:styler100200, sortable:true},
                     {field:'15',title:'15',width:45, styler:styler100200, sortable:true},
                     {field:'16',title:'16',width:45, styler:styler100200, sortable:true},
                     {field:'17',title:'17',width:45, styler:styler100200, sortable:true},
                     {field:'18',title:'18',width:45, styler:styler100200, sortable:true},
                     {field:'19',title:'19',width:45, styler:styler100200, sortable:true},
                     {field:'20',title:'20',width:45, styler:styler100200, sortable:true},
                     {field:'21',title:'21',width:45, styler:styler100200, sortable:true},
                     {field:'22',title:'22',width:45, styler:styler100200, sortable:true},
                     {field:'23',title:'23',width:45, styler:styler100200, sortable:true},
                     {field:'24',title:'24',width:45, styler:styler100200, sortable:true},
                     {field:'25',title:'offpeak',width:50, styler:styler200400, sortable:true},
                     {field:'26',title:'onpeak',width:46, styler:styler200400, sortable:true}
                  ]],
                  onResize:function(){
                     $('#topbottom').datagrid('fixDetailRowHeight',index);
                     
                  },
                  onLoadSuccess:function(){
                     setTimeout(function(){
                        $('#topbottom').datagrid('fixDetailRowHeight',index);
                     },0);
                  }
               });
               $('#topbottom').datagrid('fixDetailRowHeight',index);
               
            }
            });
            
         
            $("#rtmcc, #damcc, #delta").change(function(){
               if ($("#rtmcc").is(":checked")) {
                  table = 'rtmcc';
                  $('#topbottom').datagrid({
                     url:'./scripts/cong.php?date='+$('#td').datebox('getValue')+"&ret="+ret+"&table=rtmcc"
                  });
               }
               if ($("#damcc").is(":checked")) {
                  table = 'damcc';
                  $('#topbottom').datagrid({
                     url:'./scripts/cong.php?date='+$('#td').datebox('getValue')+"&ret="+ret+"&table=damcc"
                  });
               }
               if ($("#delta").is(":checked")) {
                  table = 'delta';
                  $('#topbottom').datagrid({
                     url:'./scripts/cong.php?date='+$('#td').datebox('getValue')+"&ret="+ret+"&table=delta"
                  });
               }
            });
         
         });
      
         
         
         function styler200400(value,row,index){
            if(value>=0){
               return 'background-color:'+GreenYellowRed(value, 600, 300)+';';
            }else{
               return 'background-color:'+Greentoblue(value, 600, 300)+';';
            }
         }
         
         function styler100200(value,row,index){
            if(value>=0){
               return 'background-color:'+GreenYellowRed(value, 100, 50)+';';
            }else{
               return 'background-color:'+Greentoblue(value, 100, 50)+';';
            }
         }
         function componentToHex(c) {
            var hex = c.toString(16);
            return hex.length == 1 ? "0" + hex : hex;
         }

         function rgbToHex(r, g, b) {
            return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
         }
                  
         function GreenYellowRed(number, high, low) {
            var number; // working with 0-99 will be easier
            var r;
            var g;
            var b;
            number = number--;
           if (number < low) {
            // green to yellow
            if(number<0){
               r=0;
            }else{
               r = Math.floor(255 * (number / low));
            }
            g = 255;
            

           }else if (number>=low & number<high) {
            // yellow to red
            r = 255;
            g = Math.floor(255 * ((low-number%low) / low));
           }else{
            r=255;
            g=0;
           }
           b = 0;

           return rgbToHex(r, g, b);
         }
         
         function Greentoblue(number, high, low) {
            var number; // working with 0-99 will be easier
            var r;
            var g;
            var b;
            number = Math.abs(number);
           if (number < low) {
            // green to yellow
            if(number<0){
               b=0;
            }else{
               b = Math.floor(255 * (number / low));
            }
            g = 255;
            

           } else if(number>=low & number<high) {
            // yellow to red
            b = 255;
            g = Math.floor(255 * ((low-number%low) / low));
           }else{
            b=255;
            g=0;
           }
           r = 0;

           return rgbToHex(r, g, b);
         }
         
         function doSearch(){
            $('#topbottom').datagrid('load',{
               nodeid: $('#searchnodes').val()
            });
         }

When the filled rows do not reach the bottom of datagrid, the next page request will be sent to server again. If the next page rows do not exist, you must return the result with empty rows.

Yes that seems to be what is going on.

not sure how to stop it from happening