Error using tree as cell type in a treegrid
I'm trying to create a treegrid but whenever i choose the celltype as "tree" it gives me an error saying
Error type: Configuration
Description: Incorrect cell type: tree
Any clues?
The possible reason for the problem - the dhtmlxtreegrid.js is not included.
Please, check that the file is correctly included.
this is my code
<!--#include file="../../Include/Authentication.aspx"-->
<%@ Page Language="VB" AutoEventWireup="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" class="crm">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<!--Grid files, ook nodig in de TreeGrid-->
<link rel="Stylesheet" type="text/css" href="/scripts/dhtmlx/dhtmlxGrid/codebase/dhtmlxgrid.css" />
<link rel="Stylesheet" type="text/css" href="/Stijl/css/style.css" />
<script type="text/javascript" src="/scripts/dhtmlx/dhtmlxcommon.js"></script>
<script type="text/javascript" src="/scripts/dhtmlx/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script type="text/javascript" src="/scripts/dhtmlx/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script type="text/javascript" src="/scripts/dhtmlx/dhtmlxTree/codebase/dhtmlxtreegrid.js"></script>
<script type="text/javascript" src="/scripts/dhtmlx/dhtmlxTree/codebase/ext/dhtmlxtreegrid_filter.js"></script>
<script type="text/javascript" src="/scripts/dhtmlx/dhtmlxTree/codebase/ext/dhtmlxtreegrid_lines.js"></script>
<script type="text/javascript" src="/scripts/dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>
<script type="text/javascript" src="/scripts/dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_math.js"></script>
<script type="text/javascript" src="/scripts/dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_srnd.js"></script>
<script type="text/javascript" src="/scripts/dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_nxml.js"></script>
<script type="text/javascript" src="/scripts/dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_mcol.js"></script>
<script type="text/javascript" src="/Stijl/css/StijlVariabelen.js"></script>
<script type="text/javascript" src="/scripts/ajax.js"></script>
<script type="text/javascript" src="/scripts/Excel.js"></script>
<script type="text/javascript" src="/scripts/dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_selection.js"></script>
</head>
<body id="crm">
<form id='excelForm' name='excelForm' target="_blank" action='/AJX/ExportToExcel.aspx' method='post'>
<input type='hidden' id='excelData' name='excelData' value=''/>
<input type='hidden' id='fileName' name='fileName' value=''/>
<input type='hidden' id='align' name='align' value=''/>
</form>
<div class="headerLabelDiv">
<p class="headerLabel">Customer Relation Management</p>
</div>
<div class="toolbar">
<input title="Printen" type="button" id="toolbarPrint" class="toolbarIcon" value="" onclick="printGrid();"/>
<input title="Exporteren naar Excel" type="button" id="toolbarExcel" class="toolbarIcon" value="" onclick="toExcel(mygrid, 'Detailplanningoverzicht', 'left,right,right,right,right,right,right');"/>
<input type="button" class="seperator" value="" />
<input title="Uitklappen" type="button" id="toolbarExpand" class="toolbarIcon" value="" onclick="mygrid.expandAll();"/>
<input title="Inklappen" type="button" id="toolbarCollapse" class="toolbarIcon" value="" onclick="mygrid.collapseAll();"/>
<input type="button" class="seperator" value="" />
<select id="toolbarSelect" name="columnSelect" onchange="hideColumnInput(this.value)">
<option value="0">Waarschuwing</option>
<option value="2">Budget</option>
<option value="3">Geboekte uren</option>
<option value="4">Verschil</option>
<option value="5">Hoofdverantwoordelijke</option>
<option value="6">Definitief</option>
<option value="7">Voltooid</option>
<option value="8">Medewerkers</option>
<option value="9">Opmerkingen</option>
</select>
<input title="Kolom toevoegen/verwijderen" type="button" id="toolbarAddRemove" class="toolbarIcon" value="" onclick="addDeleteColumn();"/>
</div>
<form id="detailForm" runat="server" style="margin:0px;">
<input type="hidden" name="hiddenColumnField" value="0" />
<div id="gridbox"></div>
<script type="text/javascript">
mygrid = new dhtmlXGridObject("gridbox");
mygrid.imgURL = "/scripts/dhtmlx/dhtmlxGrid/codebase/imgs/";
//headers
mygrid.setHeader("Titel,Budget Uren, Geboekte Uren,Verschil,Hoofd, Definitief, Voltooid, Medewerkers, Opmerkingen");
mygrid.attachHeader("#text_filter,#numeric_filter,#numeric_filter,#numeric_filter,#text_filter,#select_filter,#select_filter,#text_filter,#text_filter");
//column
mygrid.setInitWidths("310,80,100,110,110,55,55,371,200");
mygrid.setColAlign("left,right,right,right,left,center,center,left,left");
mygrid.setColTypes("tree,math,math,math,ro,ch,ch,ro,ro");
mygrid.setColumnHidden(opmerkingenIndex, true); //hide de opmerkingen kolom
//copy zelfs zonder edit-rechten.
mygrid.enableBlockSelection();
//met je keyboard door de TreeGrid navigeren
mygrid.enableKeyboardSupport(true);
mygrid.setSkin(skinStyle);
//Wiskundige berekeningen zoals sum aanzetten
mygrid.setMathRound(2);
//drag and drop tussen columns aanzetten
mygrid.enableColumnMove(true);
//hierdoor verhogen de laadtijden zich gigantisch
mygrid.enableSmartXMLParsing(false);
mygrid.attachEvent("onEditCell",function(stage,rid,cind){
return false;
});
mygrid.enableTreeGridLines();
mygrid.init();
mygrid.loadXML("test.xml");
mygrid.expandAll(); //klap alle groeperingen uit.
mygrid.enableSmartRendering(1);
</script>
</form>
</body>
</html>
The dhtmlxTreeGrid is a special component. Its libraries are placed in the dhtmlxTreeGrid/codebase/ folder (not in the dhtmlxTree/codebase/).
The component page is http://dhtmlx.com/docs/products/dhtmlxTreeGrid/
