Start Building Professional
Web Apps Today

problem with enableHeaderMenu function

The undernoted code creates the grid OK but I've been trying today to add in the enableHeaderMenu function. When I rightclick, the menu appears OK, lists all the 30 columns in the grid Ok but also throws an error message at line 119 - object doesn't support this property or method. If I tick or untick one of the checkboxes it throws an error again at line 90. Those line numbers correspond to lines in the function createfinancialyearfile() which is called just before my loadgrid() function mentioned in the html below. No columns appear or disappear. I'm not sure if it's because the grid has three headers, one with filters and the other with autosum functions and the header menu is just incompatible with those features or whether it's because the grid is wrapped within a couple of div tags or some other reason. The code which creates the grid and the html of the form in which it occurs are undernoted. Any ideas?



########### grid creation code ##################

mygrid = new dhtmlXGridObject('gridbox');

mygrid.imgURL = "grid/imgs/";

mygrid.preventIECaching(true);

mygrid.setHeader("{#stat_count},name,larn,firm name,category code,type,date added,quarter,total paid,solicitors fee,counsel fee,expert fee,other payment,contribution paid,pc sum held,expenses held,treasury comments,court,apps interest,does opp have la?,estimated cost,orders sought,nom sol's assessment,actual outcome,stage reports?,merits comments,of concern to merits?,assessed by,further analysis?,prelim comments");
    
mygrid.attachHeader(" ,#text_filter,#text_filter,#select_filter,#select_filter,#select_filter,#select_filter,#numeric_filter,#numeric_filter,#numeric_filter,#numeric_filter,#numeric_filter,#numeric_filter, , , , ,#select_filter,#select_filter, ,#select_filter,#text_filter, , ,#text_filter, ,#select_filter,#select_filter,#select_filter, ");

mygrid.attachHeader(" , , , , , , , ,{#stat_total},{#stat_total},{#stat_total},{#stat_total},{#stat_total}, , , , , , , , , , , , , , , , , ");


mygrid.setInitWidths("20,130,90,220,220,80,80,60,70,70,70,70,70,70,70,70,200,150,70,50,100,200,150,150,100,200,100,100,100,150");

mygrid.setColAlign("center,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left");

mygrid.setColVAlign("top,top,top,top,top,top,top,top,top,top,top,top,top,top,top,top,top,top,top,top,top,top,top,top,top,top,top,top,top,top");
    
mygrid.setColTypes("ch,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro");
    
mygrid.chNoState = "1";
    
mygrid.setColSorting("str,str,str,str,str,str,str,int,int,int,int,int,int,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str");
            
mygrid.init();

mygrid.setSkin("light");
    
mygrid.enableMultiline(true);

mygrid.enableBlockSelection();

mygrid.enableHeaderMenu(true);

thefiletoload = "xmlfolder\\" + thefinancialyearfile;

mygrid.loadXML(thefiletoload);



############## HTML follows ##############


<div class="tabbertab">
    
<h2>final analysis</h2>
    
<form name=thefinalform>


Now showing file for financial year: <span id="yeardisplayspan"> </span>


   

<select name="theyear" onchange=loadgridtwo(this.value);></select>   

<input type=button value="update" onclick="loadgridtwo(yeardisplayspan.innerHTML);">  


<input type=button value="copy grid to clipboard" onclick="mygrid.setCSVDelimiter('\t');var csvNew = mygrid.serializeToCSV();mygrid.gridToClipboard();alert('The whole grid has been copied to the

clipboard for pasting into Excel.');">

  

<input type=button value="copy selection to clipboard" onclick="mygrid.setCSVDelimiter('\t');var csvNew = mygrid.serializeToCSV();mygrid.copyBlockToClipboard();alert('The selected block of the grid

has been copied to the clipboard for pasting into Excel.');">

  

<input id="lateeditbutton" type=button value="show late edits" onclick="showlateedits();">

  

<select name=skinselector onchange="skinchanger(this.value);">
<option value="light" selected>light
<option value="modern">modern
<option value="clear">clear
<option value="xp">xp
<option value="mt">mt
<option value="gray">gray
<option value="sb dark">dark
</select>

  

<a href="Excel Folder/">open Excel Folder</a>   <input type=button value="printable view" onclick="mygrid.printView();">


<br><br><br>
<input type=button value="clear filters" onclick="javascript:mygrid.refreshFilters();loadgridtwo(yeardisplayspan.innerHTML);">
<div id="lateeditdiv" style="width:99%;height:200;display:none;">

<select name=lateeditsselectmenu onchange=loadlateedits(this.value);></select>
  
<input type=button name=lateeditssavebutton value="save late edit changes" disabled onclick=savelateedits(document.thefinalform.lateeditsselectmenu.value);>

<br>
<textarea id="lateedittextarea" cols="100" rows="15" disabled></textarea></div>



<br>


<div id="gridbox" style="width:99%;height:900"></div>


<script>

createfinancialyearfile(); //check to see if there is an xml file for this current financial year and if not, create one

loadgrid(); //load the xml file for this current financial year

populateyearselect(); //populates from the text file in admin folder the select menu which is used to select and display earlier financial years in the grid


populatelateedityearselect(); //likewise for the late edit select menu

</script>


</form>

</div>

The same init code works correctly in case of local samples ( sample sent by email ) 
Which version of grid you are using ? Sample, which sent by email, based on dhtmlxgrid 2.0, if you are using older version - please try to updated dhtmlxgrid_hmenu.js with one from the sample.