I am using 3.6 Pro but I find a lot of the code does not work in IE9 / 10.
hsGrid.setHeader("NOT SPOT,LA, PREMISES,3,4,5,6,7,8,9,10,11,12,13,14,15");//set column names
hsGrid.setInitWidths("*");//set column width in px
//hsGrid.setColAlign("right,left,left");//set column values align
//hsGrid.setColTypes("ro,ro,ro");//set column types
hsGrid.setColumnsVisibility("false,false,false,true,true,true,true,true,true,true,true,true,true,true,true,true");
hsGrid.init();//initialize grid
The above code works in Chrome, Opera, Firefox and Safari but in IE9/10 does not hide the columns.
Full Code Supplied.
<!DOCTYPE html>
<html>
<head>
<title>DMN ONLINE DRIVE TEST VIEWER</title>
<script src="codebase/dhtmlx.js"></script>
<script src="codebase/types/ftypes.js"></script>
<script src="codebase/connector/connector.js"></script>
<script src="codebase/connector/dataprocessor.js"></script>
<script src="geotools.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
<link rel="STYLESHEET" type="text/css" href="codebase/types/ftypes.css">
<style>
html, body {
width: 100%;
height: 100%;
}
div#dataview {
width: 100%;
height: 100%;
}
div.img_cont {
width: 120px;
float: left;
}
div.client_info {
float: left;
padding-left: 10px;
}
span.hint {
display: block;
width: 150px;
font-weight: bold;
float: left;
color: #777777;
}
div#dsc {
padding: 10px;
font-family:Tahoma;
font-size:13px;
height: 100%;
}
div#data_template {
display: none;
}
/****************************************************
function init() {
}
****************************************************/
</style>
<script>
var myAccordion, GMaps, myLayout, data, myMenu;
var markers = [], mid, pmarker;
var circles = [], cid;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay;
var origin = null;
var destination = null;
var directionsVisible = true;
var mGrid;
var location;
var rowId = 1;
var siteID = null;
var loading = true;
var Opacity = 0.10;
var siteSelected = 0;
var oldmap;
// Global variable
var img = null, needle = null, ctx = null, degrees = 0;
var xmlStr = "<toolbar><item id='word' text='Word Doc'/></toolbar>";
var opts = {
center: new google.maps.LatLng(53.693161,-2.693837),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function doOnLoad(){
myLayout = new dhtmlXLayoutObject(document.body,"3J");
myLayout.cells("a").setText("Drive Test Location");
myLayout.cells("a").setWidth(300);
myLayout.cells("a").attachObject("dataview");
myLayout.cells("b").setText("Drive Test Details");
myLayout.cells("c").setText("GPS INFO");
sideBar = myLayout.cells("c").attachAccordion();
myAccordion = myLayout.cells("b").attachAccordion();
sideBar.addItem("GPS","GPS Locations");
sideBar.addItem("HS","NOT SPOTS");
mGrid = sideBar.cells("GPS").attachGrid();
hsGrid = sideBar.cells("HS").attachGrid();
hsGrid.attachEvent("onRowCreated", function(id){
mGrid.attachEvent("onXLE", CalcRoute());
notspot = [
new google.maps.LatLng(hsGrid.cells(id,3).getValue(),hsGrid.cells(id,4).getValue()),
new google.maps.LatLng(hsGrid.cells(id,5).getValue(),hsGrid.cells(id,6).getValue()),
new google.maps.LatLng(hsGrid.cells(id,7).getValue(),hsGrid.cells(id,8).getValue()),
new google.maps.LatLng(hsGrid.cells(id,9).getValue(),hsGrid.cells(id,10).getValue()),
new google.maps.LatLng(hsGrid.cells(id,11).getValue(),hsGrid.cells(id,12).getValue())
];
notSpotSquare = new google.maps.Polygon({
paths: notspot,
strokeColor: hsGrid.cells(id,13).getValue(),
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: hsGrid.cells(id,13).getValue(),
fillOpacity: 0.35,
map: GMaps
});
});
//myAccordion.setEffect(true);
myAccordion.addItem("a1","Map Location");
GMaps = myAccordion.cells("a1").attachMap();
myMenu = myLayout.attachMenu();
myMenu.addNewSibling(null, "Radius", "Radius", false); // adding the first item to the menu, "nextToId" param is null
myMenu.addCheckbox("child", "Radius", 0, "1", "1K Radius",true,false);
myMenu.addCheckbox("child", "Radius", 1, "2", "2K Radius",true,false);
myMenu.addCheckbox("child", "Radius", 2, "3", "5K Radius",true,false);
myMenu.addCheckbox("child", "Radius", 3, "4", "8K Radius",true,false);
myMenu.addCheckbox("child", "Radius", 4, "5", "10K Radius",true,false);
myMenu.addCheckbox("child", "Radius", 5, "6", "15K Radius",true,false);
myMenu.addCheckbox("child", "Radius", 6, "7", "20K Radius",true,false);
myMenu.addCheckbox("child", "Radius", 7, "fill", "Fill",true,false);
myMenu.addNewChild("Radius", 8, "remove","Remove Radius", false);
myMenu.addNewSibling("Radius", "Route", "Route", false); // adding the first item to the menu, "nextToId" param is null
myMenu.addNewChild("Route", 0, "calc", "Calc Route", false);
myMenu.addNewSibling("Route", "markers", "Markers", false); // adding the first item to the menu, "nextToId" param is null
myMenu.addNewChild("markers", 0, "hide", "Hide Markers", false);
myMenu.addNewChild("markers", 1, "show", "Show Markers", false);
mGrid.setHeader("Site ID,Marker, Latitude, Longitude");//set column names
mGrid.setInitWidths("50,50,130,130");//set column width in px
mGrid.setColAlign("right,left,left,left");//set column values align
mGrid.setColTypes("ro,ro,ro,ro");//set column types
mGrid.init();//initialize grid
hsGrid.setHeader("NOT SPOT,LA, PREMISES,3,4,5,6,7,8,9,10,11,12,13,14,15");//set column names
hsGrid.setInitWidths("*");//set column width in px
//hsGrid.setColAlign("right,left,left");//set column values align
//hsGrid.setColTypes("ro,ro,ro");//set column types
hsGrid.setColumnsVisibility("false,false,false,true,true,true,true,true,true,true,true,true,true,true,true,true");
hsGrid.init();//initialize grid
mGrid.attachEvent("onRowCreated", function (id) {
mLatlng = new google.maps.LatLng(mGrid.cells(id,2).getValue(),mGrid.cells(id,3).getValue());
mGrid.cells(id,1).setValue(mGrid.getRowIndex(id));
displayMarker(mLatlng);
});
directionsDisplay = new google.maps.DirectionsRenderer({
'map': GMaps,
'preserveViewpoint': true,
'suppressMarkers': true,
'draggable':true
});
directionsDisplay.setPanel(document.getElementById("directions"));
myMenu.attachEvent("onCheckboxClick", menuCheckboxClick);
myMenu.attachEvent("onClick", menuClick);
function menuCheckboxClick(id, state) {
if(id == "fill") {
if(state == false) {
Opacity = 0.10;
} else { Opacity = 0.00; }
}
if(id == '1'){
if(state == false)
drawRadius(siteSelected, 1000, 1,'#FF0000');
else circles[1].setMap(null);
}
if(id == '2'){
if(state == false)
drawRadius(siteSelected, 2000, 2,'#99CC99');
else circles[2].setMap(null);
}
if(id == '3'){
if(state == false)
drawRadius(siteSelected, 5000, 3,'#333399');
else circles[3].setMap(null);
}
if(id == '4'){
if(state == false)
drawRadius(siteSelected, 8000, 4,'#FFFF00');
else circles[4].setMap(null);
}
if(id == '5'){
if(state == false)
drawRadius(siteSelected, 10000,5,'#CC0000');
else circles[5].setMap(null);
}
if(id == '6'){
if(state == false)
drawRadius(siteSelected, 15000,6,'#007f00');
else circles[6].setMap(null);
}
if(id == '7'){
if(state == false)
drawRadius(siteSelected, 20000,7,'#00007f');
else circles[7].setMap(null);
}
return true;
}
function menuClick(id) {
if(id == "calc") {
CalcRoute();
}
if(id == "hide") {
clearOverlays();
}
if(id == "show") {
showOverlays();
}
if(id == "all" ) {
dhtmlxAjax.get("php/deleteall.php?cell="+siteID, function(loader) {
mGrid.clearAndLoad('php/markers.php?parentID='+siteID);
deleteMarkers();
alert(loader.xmlDoc.responseText);
});
}
if(id == 'remove'){
deleteRadius();
}
return true;
}
set_position(53.794491, -1.5465800, 6);
myAccordion.addItem("a2","Drive Test Driving Instructions");
myAccordion.cells("a2").attachObject("wrapper");
myAccordion.cells("a1").open();
myAccordion.cells("a1").show();
directionsDisplay.setPanel(document.getElementById("directions"));
/*! initialization countries list*/
data = new dhtmlXDataView({
container: "dataview",
type:{
template: "html->data_template",
height: 50,
width: 270
}
});
data.attachEvent("onItemClick", location_selected);
data.attachEvent("onAfterSelect", location_selected);
data.attachEvent("onXLE", function() {
data.select(1, true);
});
data.load("php/sites.php");
}
/*! sets position of GoogleMaps object
*/
function set_position(lat, lng, zoom) {
var myLatlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: zoom,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
GMaps.setOptions(myOptions);
}
/*! item in DataView is selected*/
function location_selected(id, ev, html) {
deleteOverlays();
var location = data.get(id);
siteSelected = id;
siteID = location.SITE;
var lat = location.LAT;
var lng = location.LNG;
var image = "icons/towerMast.png";
var neBound = new google.maps.LatLng(location.NORTH, location.EAST);
var swBound = new google.maps.LatLng(location.SOUTH, location.WEST);
var imageBounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = 'footprints/' + location.IMAGE;
oldmap = new google.maps.GroundOverlay(srcImage, imageBounds);
oldmap.setMap(GMaps);
set_position(lat, lng, 11);
var myLatlng = new google.maps.LatLng(lat, lng);
pmarker = new google.maps.Marker({
position: myLatlng,
icon: image,
animation: google.maps.Animation.DROP,
title:"Arqiva Site ID: "+ location.SITE
});
pmarker.setMap(GMaps);
GMaps.panTo(myLatlng);
drawRadius(id, 1000, 1,'#FF0000');
drawRadius(id, 2000, 2,'#99CC99');
drawRadius(id, 5000, 3,'#333399');
drawRadius(id, 8000, 4,'#FFFF00');
drawRadius(id, 10000,5,'#CC0000');
drawRadius(id, 15000,6,'#7F7F7F');
drawRadius(id, 20000,7,'#303030');
mGrid.clearAndLoad('php/markers.php?parentID='+location.SITE);
mdp = new dataProcessor ('php/markers.php?parentID='+location.SITE);// object constructor. Here you should specify a connector file
mdp.init(mGrid);// initializes dataProcessor. As the parameter you should specify your grid
hsGrid.clearAndLoad('php/notspots.php?cell='+location.NOTSPOTS);
directionsDisplay = new google.maps.DirectionsRenderer({
'map': GMaps,
'preserveViewpoint': true,
'suppressMarkers': true,
'draggable': false
});
directionsDisplay.setPanel(document.getElementById("directions"));
}
function drawRadius(id, size, arr, colour){
var location = data.get(id);
var lat = location.LAT;
var lng = location.LNG;
var radiusCircle;
//create a osgb coordinate
//osgb=new GT_OSGB();
//osgb.setGridCoordinates(elat, nlng);
//convert to a wgs84 coordinate
//wgs84 = osgb.getWGS84();
//var lat = wgs84.latitude;
//var lng = wgs84.longitude;
var myLatlng = new google.maps.LatLng(lat, lng);
var radiusOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: colour,
fillOpacity: Opacity,
map: GMaps,
center: myLatlng,
radius: size
};
radiusCircle = new google.maps.Circle(radiusOptions);
circles[arr] = radiusCircle;
}
function CalcRoute(){
newCalcRoute(directionsService, directionsDisplay);
}
// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
if (markers) {
for (i in markers) {
markers[i].setMap(null);
}
}
}
// Shows any overlays currently in the array
function showOverlays() {
if (markers) {
for (i in markers) {
markers[i].setMap(GMaps);
}
}
}
// Delete all overlays currently in the array
function deleteOverlays() {
if (markers) {
for (i in markers) {
markers[i].setMap(null);
}
markers.length = 0;
}
if (circles) {
for (i in circles) {
circles[i].setMap(null);
}
circles.length = 0;
}
if(pmarker) {
pmarker.setMap(null);
}
if(oldmap) {
oldmap.setMap(null);
}
rowId = 1;
}
function deleteRadius() {
if (circles) {
for (i in circles) {
circles[i].setMap(null);
}
circles.length = 0;
}
}
function deleteMarkers() {
if (markers) {
for (i in markers) {
markers[i].setMap(null);
}
markers.length = 0;
}
}
function createMarker(latlng) {
var tit = markers.length;
var image = "icons/number_"+tit+".png";
var marker = new google.maps.Marker({
id: tit,
title: tit.toString(),
icon: image,
position: latlng,
draggable: false,
zIndex: 10
});
point = marker.getPosition();
mGrid.addRow(rowId, [siteID,tit,point.lat(),point.lng()]);
}
function displayMarker(latlng) {
var tit = markers.length;
var image = "icons/number_"+tit+".png"; var tit = markers.length;
var marker = new google.maps.Marker({
id: markers.length,
icon: image,
title: tit.toString(),
position: latlng,
map: GMaps,
draggable: false,
zIndex: 10
});
GMaps.panTo(latlng);
rowId++;
markers.push(marker);
}
function newCalcRoute(directionsService, directionsDisplay) {
var batches = [];
var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints
var itemsCounter = 0;
var wayptsExist = mGrid.getRowsNum();
var rId;
while (wayptsExist) {
var subBatch = [];
var subitemsCounter = 0;
for (var j = itemsCounter; j < mGrid.getRowsNum(); j++) {
subitemsCounter++;
rId = mGrid.getRowId(j);
subBatch.push({
location: new window.google.maps.LatLng(mGrid.cells(rId,2).getValue(),mGrid.cells(rId,3).getValue()),
stopover: true
});
if (subitemsCounter == itemsPerBatch)
break;
}
itemsCounter += subitemsCounter;
batches.push(subBatch);
wayptsExist = itemsCounter < mGrid.getRowsNum()-1;
// If it runs again there are still points. Minus 1 before continuing to
// start up with end of previous tour leg
itemsCounter--;
}
// now we should have a 2 dimensional array with a list of a list of waypoints
var combinedResults;
var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort
var directionsResultsReturned = 0;
for (var k = 0; k < batches.length; k++) {
var lastIndex = batches[k].length - 1;
var start = batches[k][0].location;
var end = batches[k][lastIndex].location;
// trim first and last entry from array
var waypts = [];
waypts = batches[k];
waypts.splice(0, 1);
waypts.splice(waypts.length - 1, 1);
var request = {
origin : start,
destination : end,
waypoints : waypts,
optimizeWaypoints: true,
travelMode : window.google.maps.TravelMode.DRIVING
};
(function (kk) {
directionsService.route(request, function (result, status) {
if (status == window.google.maps.DirectionsStatus.OK) {
var unsortedResult = {
order : kk,
result : result
};
unsortedResults.push(unsortedResult);
directionsResultsReturned++;
if (directionsResultsReturned == batches.length) // we've received all the results. put to map
{
// sort the returned values into their correct order
unsortedResults.sort(function (a, b) {
return parseFloat(a.order) - parseFloat(b.order);
});
var count = 0;
for (var key in unsortedResults) {
if (unsortedResults[key].result != null) {
if (unsortedResults.hasOwnProperty(key)) {
if (count == 0) // first results. new up the combinedResults object
combinedResults = unsortedResults[key].result;
else {
// only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
// directionResults object, but enough to draw a path on the map, which is all I need
combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
}
count++;
}
}
}
directionsDisplay.setDirections(combinedResults);
}
}
});
})(k);
}
}
</script>
</head>
<body onload="doOnLoad()">
<div id="wrapper" style="width:100%;height:100%;overflow:auto;" >
<div id="directions"></div>
</div>
<div id="access"></div>
<div id="dataview"> </div>
<div id="dsc"> </div>
<div id="data_template">
<div class='client_info'>
<div class='siteid'><span class='hint'>Arqiva Site ID:</span>#SITE#</div>
<div class='lng'><span class='hint'>LAT:</span>#LAT#</div>
<div class='lat'><span class='hint'>LNG:</span>#LNG#</div>
<div class='mast'><span class='hint'>MAST HEIGHT:</span>#MAST#m</div>
</div>
</div>
</body>
</html>