ClientTable.js

    
        //An Array of dataTables to to them from other controls
        var dataTables = new Array ( );
        
        function CreateDateTable ( controlID, headers, initialDataSource )
        {
            //Retrieve Table Properties to pass
            //from the Parent Control to the rendered Table (DIV) 
                var renderedControl         = document.getElementById ( controlID );
                var tableCaption            = renderedControl.getAttribute ( "_Caption" );
                
            //Drag and Drop Columns
                var tableDragColumns        = renderedControl.getAttribute ( "_DraggableColumns" );
                var isTableDragColumns      = false;
                if ( tableDragColumns )
                    isTableDragColumns = true;
            
            //Set up the Pager
                var showPager               = new Boolean ( );
                var tablePaginator          = null;                
                var showPager               = renderedControl.getAttribute ( "_ShowPager" );
                if ( showPager )
                {
                    var pagerTemplate       = renderedControl.getAttribute ( "_PagerType" );
                    var pagerID             = renderedControl.getAttribute ( "_PagerID" );
                    
                    if ( pagerTemplate == "Full" )
                        pagerTemplate   = "{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink} {PageLinks}";
                    if ( pagerTemplate == "Report" )
                        pagerTemplate   = "{PreviousPageLink} <strong>{CurrentPageReport}</strong> {NextPageLink}";
                    if ( pagerTemplate == "Picker" )
                        pagerTemplate   = "{PageLinks}  Show {RowsPerPageDropdown} per page";
                    
                    var rowsPerPageOptions  = Array.parse ( renderedControl.getAttribute ( "_RowsPerPageOptions" ).toString ( ) );
                    tablePaginator          = new YAHOO.widget.Paginator ( 
                                            {  
                                                rowsPerPage : renderedControl.getAttribute ( "_PageSize" ),
                                                containers : pagerID,
                                                template : pagerTemplate,
                                                rowsPerPageOptions : rowsPerPageOptions
                                            } );
                }
                
            //Check Polling
                    var enablePolling       = renderedControl.getAttribute ( "_EnablePolling" );
                    var customGetData       = renderedControl.getAttribute ( "_CustomRetrieveDataFunction" );
                    var pollingInterval     = -1;
                    if ( enablePolling )
                    {                        
                        pollingInterval     = parseInt ( renderedControl.getAttribute ( "_PollingInterval" ).toString ( ) );
                    }                    
                    
            //Check RowSelection
                    var enableSelectRow     = renderedControl.getAttribute ( "_EnableSelected" );
                    var maxSelectableRows   = 1;
                    var showHighlightRow    = new String ( );
                    var rowSelectHandler    = new String ( );
                    var selectedRowPK       = new String ( );
                    if( enableSelectRow )
                    {
                        maxSelectableRows   = parseInt ( renderedControl.getAttribute ( "_MaxSelectableItems" ).toString ( ) );
                        rowSelectHandler    = renderedControl.getAttribute ( "_CustomRowSelectionListener" );
                        showHighlightRow    = renderedControl.getAttribute ( "_HighlightRow" );                        
                        selectedRowPK       = renderedControl.getAttribute ( "_SelectRowPrimaryKey" );                        
                    }                    
            //End Setting the Properties
            
            
            //Create the DataSource, DataTable and Setting up the Polling
            var returnedData    = null;
            var RetrieveData    = function ( )             
            {
                if ( enablePolling )
                {
                    this.CustomGetDataListener = eval ( customGetData );
                    this.CustomGetDataListener ( dataTable, onSuccess, onFailed );
                }
                
                function onSuccess ( result ) { returnedData = result; }
                function onFailed ( result ) { }
                
                if ( returnedData )
                    return Array.parse ( returnedData.toString ( ) );
                else
                    return initialDataSource;
	        }; 
	 
	        var dataSource              = new YAHOO.util.DataSource ( RetrieveData ); 
	        dataSource.responseType     = YAHOO.util.DataSource.TYPE_JSARRAY; 
	        dataSource.constructor      = this;
	        var dataTable               = new  YAHOO.widget.DataTable ( controlID, headers, dataSource,
                                        { draggableColumns : isTableDragColumns, caption : tableCaption, paginator : tablePaginator} );       

            //Set Attributes for the Table                                        
            dataTable.renderedControl   = renderedControl;
            dataTable.controlID         = controlID;
            dataTable.selectedRowPK     = selectedRowPK;
                                        
            //Save the dataTable in an shared array to access it from other controls
            dataTables [ controlID ]    = dataTable;
            dataTables.push ( dataTable );     
	        // Set up polling 
	        if ( enablePolling )
	        {
	            var callback = { success: dataTable.onDataReturnReplaceRows, failure: function() { }, scope: dataTable }
	            dataSource.setInterval ( pollingInterval, null, callback );
	        }
	        	        
	        //Set up Row Highlighting
	        if ( showHighlightRow )
	        {
                dataTable.subscribe( "rowMouseoverEvent", dataTable.onEventHighlightRow );
                dataTable.subscribe( "rowMouseoutEvent", dataTable.onEventUnhighlightRow );
            }
            
            //Set up RowSelection
	        if ( enableSelectRow )
	        {	        	        
	            dataTable.set( "selectionMode", "standard" ); 
	            
	            if ( rowSelectHandler ) 
	            {
	                dataTable.RowSelectionListener = eval ( rowSelectHandler );
	            }
                
                dataTable.customOnRowClickEvent = function ( args )
                {                
                    var bCTRL   = args.event.ctrlKey;
                    if ( args.event.button == 2 ) //Rigth click button   
                        dataTable.unselectAllRows ( );
                        
                    var selectedRows    = dataTable.getSelectedRows ( );                    
                    if ( ( selectedRows.length >= maxSelectableRows ) || ( bCTRL == false ) )
                    {
                        if ( ( maxSelectableRows != 0 ) || ( bCTRL == false ) )//If maxSelectableRows == 0 means no Limit of rows to select
                            dataTable.unselectAllRows ( );
                    }
                    var rowIndex        = args.target.sectionRowIndex;
                    
                    if ( dataTable.isSelected ( rowIndex ) )
                        dataTable.unselectRow ( rowIndex );
                    else
                        dataTable.selectRow ( rowIndex );
                        
                    if ( this.RowSelectionListener )
                    {                                                
                        selectedRows        = dataTable.getSelectedRows ( );
                        var selectedData    = new Array ( );
                        for ( j = 0; j < selectedRows.length; j++ ) 
                        {
                            selectedData [ j ] = dataTable.getRecord ( selectedRows [ j ] )._oData;
                        }
                        this.RowSelectionListener( dataTable, selectedData );
                    }
                };                
                dataTable.subscribe( "rowMousedownEvent", dataTable.customOnRowClickEvent );                     
//              dataTable.subscribe( "rowClickEvent", dataTable.customOnRowClickEvent ); //this one doesn't hand
	        }
	        return { oDS: dataSource, oDT: dataTable };
	    }
        
        function GetClientTableState ( dataTable )
        {
            var configs                 =  [ ];
            if ( dataTable )
            {
                //Get the SelectedRows
                var selectedRowsPKs     =  [ ];
                var rowPKName           = dataTable.selectedRowPK;
                if ( rowPKName)
                {
                    var selectedRows    = dataTable.getSelectedRows ( )
                    for ( j = 0; j < selectedRows.length; j++ ) {
                        if (dataTable.getRecord(selectedRows[j]) && dataTable.getRecord(selectedRows[j])._oData) {
                            selectedRowsPKs.push ( dataTable.getRecord ( selectedRows [ j ] )._oData [ rowPKName ] );
                        }
                    }
                }
                configs.push ( new ConfigEntry ( "selectedRows", selectedRowsPKs ) );
                //End
                
                //Get the Sort Style
                if ( dataTable._configs [ "sortedBy" ].getValue ( ) )
                {
                    var sortedColumn    = dataTable._configs [ "sortedBy" ].getValue ( );
                    configs.push ( new ConfigEntry ( "sortedBy", new SortEntry ( sortedColumn.column._nKeyIndex, sortedColumn.dir ) ) );
                }
                else
                {
                   configs.push ( new ConfigEntry ( "sortedBy", null ) );
                }
                //End
                
                //Get the ColumnDefinition (Order and Width)
                var columnsDef  = new Array ( );
                for ( i = 0; i < dataTable._oColumnSet.flat.length; i++ )
                {
                    columnsDef.push ( new ColumDef ( dataTable._oColumnSet.flat [ i ].key, new ColumDef ( dataTable._oColumnSet.flat [ i ].width ) ) );
                }
                configs.push ( new ConfigEntry ( "columnsDefinition", columnsDef ) );
                //End
            }
            return configs;
        }
        
        function SetClientTableState ( dataTable, configs )        
        {
            if ( ( dataTable ) && ( configs ) ) 
            {
                //Row Selection
                var selectedRows    = configs [ 0 ];
                var pk              = dataTable.selectedRowPK;
                if ( ( selectedRows ) && ( selectedRows.value ) )
                {
                    for ( i = 0; i < selectedRows.value.length; i++ )
                    {
                        for ( j = 0; j < dataTable._oRecordSet._records.length; j++ )
                        {
                            var row     = dataTable.getRow ( j );
                            var record  = dataTable.getRecord ( row );
                            
                            if ( selectedRows.value [ i ] == record._oData [ pk ] )
                            {
                                dataTable.selectRow ( row );
                            }
                        }
                    }
                }
                //Sort
                var sortedBy = configs [ 1 ];
                if ( ( sortedBy ) &&  ( sortedBy.value ) )
                {
                    dataTable.sortColumn ( dataTable.getColumn ( sortedBy.value.index ), sortedBy.value.order );                    
                }
                
                //Rows: Order and Width
                var columnsDef = configs [ 2 ];
                if ( ( columnsDef ) && ( columnsDef.value ) )
                {
                    for ( i = 0; i < columnsDef.value.length; i++ )
                    {
                        var indexFound  = 0;
                        for ( j = 0; j < columnsDef.value.length; j++ )
                        {
                            if ( dataTable.getColumn ( j ).key == columnsDef.value [ i ].key )
                            {
                                indexFound = j;
                                break;
                            }
                        }
                        var column = dataTable.getColumn ( indexFound );
                        if ( columnsDef.value [ i ].width.key )
                        {
                            dataTable.setColumnWidth ( column, columnsDef.value [ i ].width.key );
                        }
                        dataTable.reorderColumn ( dataTable.getColumn ( indexFound ), i );
                    }
                }                
            }
        }
        
        function PersistClientTableState ( dataTable, configs, controlID )
        {
        }
        
        function RecoverPersistedClientTableState ( dataTable, controlID )
        {
        
        }
        
        function SortEntry ( iIndex, iOrder )
        {
            this.index  = iIndex;
            this.order  = iOrder;
        }
        
        function ColumDef ( iKey, iWidth )
        {
            this.key    = iKey;
            this.width  = iWidth;
        }
        
        function ConfigEntry ( iKey, iValue )
        {
            this.key        = iKey;
            this.value      = iValue;
        }
        
        
        
        //Custom Format Parsers
        var MarketRateCustomFormatter = function ( oCell, oRecord, oColumn, oData ) 
	    { 	   
	        if ( oData == -2147483648 )
	            oCell.innerHTML = "At Market";
	        else
	            oCell.innerHTML = oData
        }; 
        
        var AtPriceCustomFormatter = function ( oCell, oRecord, oColumn, oData )
        {
            if ( oData == true )
                oCell.innerHTML = "Yes";
            else
                oCell.innerHTML = "";
        };
        
        
        var ReplaceZeroCustomFormatter = function ( oCell, oRecord, oColumn, oData )
        {
            if ( oData == 0 )
                oCell.innerHTML = "-";
            else
                oCell.innerHTML = oData;
        };

        var ReplaceMinValueCustomFormatter = function(oCell, oRecord, oColumn, oData) {
            if ( oData == -2147483648 )
                oCell.innerHTML = "-";
            else
                oCell.innerHTML = oData;
        };

gistfile1.html

<script type="text/javascript">
//<![CDATA[
var ctQuickQuote_GetData = function(dataTable, onSuccess, onFailed )
{
    var secCode = 'default';
    var token = 'JWpOz_JyuqA8u1js...GQS9ViVzlkymWwU8N0';
    if (document.getElementById('ctl00_BodyPlaceHolder_OrderView1_ctl02_hfValidCode').value == 'true')
    {
        secCode = document.getElementById('ctl00_BodyPlaceHolder_OrderView1_ctl02_ucSecuritySearch_txtCode_field').value;
        if (secCode == -1)
            secCode = document.getElementById('ctl00_BodyPlaceHolder_OrderView1_ctl02_ucSecuritySearch_txtCode_field_field').innerHTML;
        var modifiedOnSuccess = function(result) {
        onSuccess(result);
        document.getElementById('ctl00_BodyPlaceHolder_OrderView1_ctl02_pnlQuickQuote').style.display = 'block';
        if (typeof(result) !== 'undefined' && result != null) {
            if (result.length > 4) {
                var resultArray = result.slice(2, result.length-2).split(',');
                for(var element in resultArray) {
                    if (resultArray[element].indexOf('SecurityTypeCode:') == 0) {
                        var subArray = resultArray[element].split(':');
                        if (document.getElementById('ctl00_BodyPlaceHolder_OrderView1_ctl02_hfSecurityTypeCode') != null && subArray[1].length > 0)
                            document.getElementById('ctl00_BodyPlaceHolder_OrderView1_ctl02_hfSecurityTypeCode').value = subArray[1].slice(1, subArray[1].length-1);
                        }
                    }
                }
            }
        };
        CompanyName.Systems.Webservices.QuickQuoteService.GetQuote ( token, secCode, modifiedOnSuccess, onFailed );
    }
    else {
        document.getElementById('ctl00_BodyPlaceHolder_OrderView1_ctl02_pnlQuickQuote').style.display = 'none';
    }
}
//]]>
</script>




<div _Caption="" _EnablePolling="True" _PollingInterval="2000" _CustomRetrieveDataFunction="ctQuickQuote_GetData" id="ctQuickQuote">
</div>  



<script type='text/javascript'>var ctQuickQuoteheaders  = [{label:'Bid',key:'BidDisplay',field:'BidDisplay'},{label:'Ask',key:'AskDisplay',field:'AskDisplay'},{label:'Last',key:'LastDisplay',field:'LastDisplay'},{label:'Bid/Vol',key:'BidVolumeDisplay',field:'BidVolumeDisplay'},{label:'Ask/Vol',key:'AskVolumeDisplay',field:'AskVolumeDisplay'}];;
var ctQuickQuotesource   = [{BidDisplay:'',AskDisplay:'',LastDisplay:'',BidVolumeDisplay:'',AskVolumeDisplay:''}];
YAHOO.util.Event.addListener ( window, 'load', CreateDateTable ( 'ctQuickQuote', ctQuickQuoteheaders, ctQuickQuotesource  ) );
</script>