// --------------------------------------------------------------------------------------------------------------------------

// Support script for Extended API demonstration

// --------------------------------------------------------------------------------------------------------------------------

// --------------------------------------------------------------------------------------------------------------------------

// Members in red are JavaScript keywords

// Members in blue are TreeGrid functions and properties, contain link to documentation

// Members in bold are global functions and variables in this script

// Strings are "pink", numbers are blue

// --------------------------------------------------------------------------------------------------------------------------

// --------------------------------------------------------------------------------------------------------------------------

var IDisable, IStyle, DLog; // Pointers to html controls

var FRow;                   // Actual focused row for update

var Styles = [              // Style settings

"Style='G' Grid = 'Grid.gif' Toolbar='Toolbar.gif' Height = '17' Line = '21' Tree = '26' Panel = '13' Sort = '14' Filter = '17' Row = '17'",

"Style='GL' Grid = 'GridLight.gif' Toolbar='ToolbarLight.gif' Height = '17' Line = '21' Tree = '26' Panel = '13' Sort = '14' Filter = '17' Row = '17'",

"Style='GB' Grid = 'GridBigger.gif' Toolbar='Toolbar.gif' Height = '21' Line = '21' Tree = '26' Panel = '18' Sort = '14' Filter = '17' Row = '17'",

"Style='GG' Grid = 'GridGame.gif' Toolbar='Toolbar.gif' Height = '17' Line = '21' Tree = '26' Panel = '13' Sort = '14' Filter = '17' Row = '17'"

   ];

// --------------------------------------------------------------------------------------------------------------------------

// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//                                                  Main and starting functions

// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

// --------------------------------------------------------------------------------------------------------------------------

// Creates grid from JavaScript

function Start(){

// --- Prepares and clears controls on pages ---

DLog = GetElem("LOG");

IStyle = GetElem("IStyle");

IDisable = GetElem("IDisable");

DLog.value = "";

IDisable.checked = false;

IStyle.checked = false;

GetElem("IColor").value = "002";

GetElem("SData").selectedIndex = 0;

GetElem("SStyle").selectedIndex = 0;

// --- creates grid ---

var D = new TDataIO();   // new object for communication

D.Layout.Url

= "../Data/CalcAPIDef.xml";

D.Data.Url = "../Data/CalcAPIData.xml";

Resize();                // User function to resize main tag to resize it to whole window

TreeGrid(D,"GRID");      // Creates new grid, this grid will now be accessed from Grids[0] property

}

// --------------------------------------------------------------------------------------------------------------------------

// Loads data chosen from the first combo

function LoadData(){

var idx = GetElem("SData").selectedIndex; // The first combo, contains selected data

var Def = [ // Def contain layout definitions, for examples only, for tutorials is used only data file

"FirstDef.xml","AjaxDef.xml","TableDef.xml","BooksDef.xml","AddPageDef.xml","../AspNetCS/PagingDLL/FileDef.xml","UnknownDef.xml",""];

var Data = [ // Data contain data xml, for examples there are also used layouts from Def, for tutorials this is the only data

"FirstData.xml","AjaxData.xml","TableData.xml","BooksData.xml","AddPageData.xml",

"../AspNetCS/PagingDLL/FileData.xml",

"UnknownData.xml",

"Basic1 Empty grid.xml","Basic2 Rows.xml","Basic3 Fixed rows.xml","Basic4 Columns.xml","Basic5 Fixed columns.xml","Basic6 Tree.xml","Basic7 Settings.xml","Basic8 Space rows.xml",

"Advanced1 Cells.xml","Advanced2 Formats.xml","Advanced3 Permissions.xml","Advanced6 Defaults.xml","Advanced7 Defaults children.xml",

"Features1 Sorting.xml","Features2 Filters.xml","Features3 Grouping.xml","Features4 Searching.xml",

"Calc1 Columns.xml","Calc2 Rows.xml","Calc3 Order.xml","Calc4 Tree.xml","Calc5 Tree order.xml",

"Editing1 Basics.xml","Editing2 Multiline.xml","Editing3 Mask.xml","Editing4 Advanced types.xml","Editing5 Buttons.xml",

"Id1 Basic id.xml","Id2 Characters.xml","Id3 Column.xml","Id4 Tree.xml","Id5 More columns.xml","Id6 Server.xml",

"Expert1 Spanning.xml","Expert2 User rows.xml","Expert3 Header.xml","Expert4 Body.xml","Expert6 Resizing.xml","Expert9 Special rows.xml"];

var G = Grids[0];

var D = G.Data;

if(idx>=7){ // Tutorials

   D.Layout.Url = null;

   D.Data.Url = "../../Tutorials/"+Data[idx];

   }

else { // Examples

   D.Layout.Url = "../Data/"+Def[idx];

   D.Data.Url = "../Data/"+Data[idx];

   }  

if(idx==43) D.Page.Url="../../Tutorials/Expert4 Page.xml"; // special case, this tutorial uses paging

else D.Page.Url = null;                                    // standard case

if(idx==28) D.Layout.Bonus="<Grid><Cfg BaseUrl='../'/></Grid>"; // special case, this tutorial uses Img expected to be from another location

else D.Layout.Bonus=null;                                       // standard case

var sidx = GetElem("SStyle").selectedIndex;

D.Data.Bonus="<Grid><Cfg MaxWidth='0' MaxHeight='0'/><Img "+Styles[sidx]+"/></Grid>";  // Suppresses MaxHeigth and MaxWidth for any data that has them set, because main tag is positioned in <TABLE> and sets selected style

G.Reload();  // Reloads new data to grid

FRow = null; // Nulls FRow - no focused row in grid

}

// --------------------------------------------------------------------------------------------------------------------------

// Called when window is resized to set extents of the grid to maximize its area

function Resize(){

var D = GetElem("GRID");

var R = GetElem("RIGHT");

var S = GetWindowSize();

D.style.width = S[0] - 240;

var h = S[1] - 270 - D.parentNode.offsetTop;;

if(h<R.offsetHeight) h = R.offsetHeight;

D.style.height = h;

}

// --------------------------------------------------------------------------------------------------------------------------

// Helper function, logs string to LOG DIV

function Log(str,ln,color,size){

if(IDisable.checked) return;

var D = document.createElement(ln?"DIV":"SPAN");

D.innerHTML = str+(ln?"":"; ");

if(color) D.style.color = color;

if(size) D.style.fontSize = size;

DLog.appendChild(D);

DLog.scrollTop = 10000;

}

// --------------------------------------------------------------------------------------------------------------------------

// Helper function, escapes the string for using in XML/HTML (to display in log)

function Esc(str){

if(str.length>50) str = str.slice(0,50)+" ... ";

return str.replace(/&/g,"&amp;").replace(/</g,"&lt;");

}

// --------------------------------------------------------------------------------------------------------------------------

// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//                                                  Event handlers

// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

// --------------------------------------------------------------------------------------------------------------------------

//                                               Style event handlers

// --------------------------------------------------------------------------------------------------------------------------

Grids.OnGetColor = function(G,row,col,r,g,b,type){

if(IStyle.checked) Log("OnGetColor("+row.id+","+col+","+r+","+g+","+b+","+type+")",0,"#CAC");

if(row[col+"Marked"] && !type) return "rgb("+r+","+(g-64)+","+b+")"; // Checks custom attribute set by function Color

if(G.id=="Books" && !Get(row,"Spanned")) return "rgb("+r+","+g+","+(b-20)+")";// Support function for particular example

}

Grids.OnGetDefaultColor = function(G,row,col,rgb){

if(IStyle.checked) Log("OnGetDefaultColor("+row.id+","+col+","+rgb+")",0,"#CAC");

}

Grids.OnGetClass = function(G,row,col,cls){

if(IStyle.checked) Log("OnGetClass("+row.id+","+col+","+cls+")",0,"#ACC");

if(G.id.slice(0,4)=="List") return ListGetClass(G,row,col,cls);

return cls;

}

Grids.OnGetType = function(G,row,col,type){

if(IStyle.checked) Log("OnGetType("+row.id+","+col+","+type+")",0,"#CCA");

return type;

}

Grids.OnGetFormat = function(G,row,col,format,edit){

if(IStyle.checked) Log("OnGetFormat("+row.id+","+col+","+format+","+edit+")",0,"#CAA");

return format;

}

Grids.OnGetEnum = function(G,row,col,enuma){

if(IStyle.checked) Log("OnGetEnum("+row.id+","+col+","+enuma.join("|")+")",0,"#ACA");

if(G.id=="List3") return List3GetEnum(G,row,col,enuma); // Support function for particular example

return enuma;