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()
});
}
