Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Colin Jarvis on Dec 11, 2009 03:33
open dhtmlx forum
Using an MSAccess Datasource

Hi,

I have just come across this great set of components and Iam exploring the possibilities of using the example 02_grid_complexheader_content.html and would like to link the grid to an MSaccess database. I have created a table with the same field names as the example but do not understand how to connect to the database as opposed to the xml file.

Please could someone provide me with the code and explanation of how to connect to an accessdatasource.

The example code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Complex content in header</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="featured" content="yes"><meta name="title" content="Samples" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />

    </head>
    <body onLoad="doOnLoad()">
<div class="content">
<div style="display:block;">
</div>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxgrid.js"></script>        
    <script src="../../codebase/dhtmlxgridcell.js"></script>    



    
    <div id="gridbox" style="width:754px; height:300px; background-color:white;"></div>
    
    <div style="display:none">
    <div id="title_flt_box"><input type="text" style="width: 100%; border:1px solid gray;" onClick="(arguments[0]||window.event).cancelBubble=true;" onKeyUp="filterBy()"></div>
    <div id="author_flt_box"><select style="width:100%" onclick="(arguments[0]||window.event).cancelBubble=true;" onChange="filterBy()"></select></div>
</div>

<script>
        function doOnLoad(){
            mygrid = new dhtmlXGridObject('gridbox');
            mygrid.setImagePath("../../codebase/imgs/");
         mygrid.setHeader("Sales,Title,Author,Price,In Store,Shipping,Bestseller,Published");
            mygrid.setInitWidths("50,150,150,80,80,80,80,200")
            mygrid.setColAlign("right,left,left,right,center,left,center,center")
            mygrid.setColTypes("dyn,ed,ed,price,ch,co,ra,ro");
         mygrid.getCombo(5).put(2,2);
            mygrid.setColSorting("int,str,str,int,str,str,str,str")
            mygrid.setColumnColor("white,#d5f1ff,#d5f1ff")
         mygrid.setColumnMinWidth(50,0);
            mygrid.setSkin("dhx_skyblue")
            mygrid.init();
            mygrid.loadXML("../common/grid.xml", function(){
                mygrid.attachHeader("#rspan,<div id='title_flt' style='padding-right:3px'></div>,<div id='author_flt' style='padding-right:3px'></div>,#rspan,#rspan,#rspan,#rspan,#rspan");
                //set title filter field
                document.getElementById("title_flt").appendChild(document.getElementById("title_flt_box").childNodes[0])
                //set author fiter field
                var authFlt = document.getElementById("author_flt").appendChild(document.getElementById("author_flt_box").childNodes[0]);
                populateSelectWithAuthors(authFlt);
                //block sorting and resize actions for second row
                mygrid.hdr.rows[2].onmousedown=mygrid.hdr.rows[2].onclick=function(e){(e||event).cancelBubble=true;}
                mygrid.setSizes();
            });
        }
        function filterBy(){
            var tVal = document.getElementById("title_flt").childNodes[0].value.toLowerCase();
            var aVal = document.getElementById("author_flt").childNodes[0].value.toLowerCase();
            
            for(var i=0; i< mygrid.getRowsNum();i++){
                var tStr = mygrid.cells2(i,1).getValue().toString().toLowerCase();
                var aStr = mygrid.cells2(i,2).getValue().toString().toLowerCase();
                if((tVal=="" || tStr.indexOf(tVal)==0) && (aVal=="" || aStr.indexOf(aVal)==0))
                    mygrid.setRowHidden(mygrid.getRowId(i),false)
                else
                    mygrid.setRowHidden(mygrid.getRowId(i),true)
            }
        }
        function populateSelectWithAuthors(selObj){
            selObj.options.add(new Option("All Authors",""))
            var usedAuthAr = new dhtmlxArray();
            for(var i=0;i<mygrid.getRowsNum();i++){
                var authNm = mygrid.cells2(i,2).getValue();
                if(usedAuthAr._dhx_find(authNm)==-1){
                    selObj.options.add(new Option(authNm,authNm))
                    usedAuthAr[usedAuthAr.length] = authNm;
                }
            }
        }
        
    </script>
            
            
</div>
</body>
</html>

Many thanks

Colin
Answer posted by Alex (support) on Dec 11, 2009 06:05

Hello,

the xml stream can be created by server-side script (it is possible to fetch data from database in this case):

mygrid.loadXML(path_to_server_script, function(){...});

There is the dhtmlxGrid/samples/14_loading_big_datasets/01_50000.html sample in the grid package. Here xml is generated using php script.