Perfect solution thank you.

Hello Seang,

Thank you for the code and additional information. You may include "Title" as part of an image. And set the background-image of the input area of the CB.

If you have any questions, please let me know as well.

Hi, I dont follow you? I'm asking a question in general not a code questioning. I have some proprietary code if you want to see what I'm doing with it but nothing isolated.

I'm referring to the (nullText: name,) part of the code. Seems I can edit that by clicking on the CB, I just want it to be a static label.

/**
 * @file    menue.js
 * @author  Sean Green <seang@sctflash.com>
 * @company SCT
 *
 * @section LICENSE see SCT_JQapi.js
 *
 *
 *
 * @section menu class
 */

 var menue = ( function() {
 
 
    // A constructor.
    /*
     \param IUDiv: referace to the UI div for igniteui engine
     \param windowDiv: referace to the movable window
     \param inX: window position and size.
     \param inY: ""
     \param inWindowDiv: div for window
     \param name: name of window
     \param item(x): attems to add

      creates a menu
    */

     function menue( inIUDiv, inX, inY, inWindowDiv, outerDiv, id, name, item1, item2, item3, item4, item5, item6, item7, item8, item9, item10 )
     {
         var INSTANCE = this;
         this.copyData = null;
         this.copyColumnKey = null;
         this.copyInfo = null;

         //defults
         this.checkedSelections = "true:false";
         this.windowMode = 0;
         this.clearWindowResize = "false";

         var menuItems = new Array();

         for ( i = 1; i < 11; i++ )
         {  //if constructor passed in data, display it.
             if ( eval( "item" + i ) ) menuItems.push( { "item": eval( "item" + i ) } );
         }


         this.applyPrefs();
         var delay = ( function () { var timer = 0; return function ( callback, ms ) { clearTimeout( timer ); timer = setTimeout( callback, ms ); }; } )();

         $( window ).resize( function ()
         {
             delay( function ()//need to set this to avoide bad slugish-ness
             {
                 outerDiv.style.left = window.innerWidth - ( id * 120 )  - 10 + "px";
                 outerDiv.style.top = _menuHeight + "px";
             }, 180 );

         } );
         
         makeWindow( inWindowDiv, inX, inY, 1, 1 )//set up windows size bar and position.
         $.ig.loader( function ()
         {
            inIUDiv.igCombo( {
                dataSource: menuItems,
                virtualization: true,
                nullText: name,
                textKey: "item",
                valueKey: "item",
                width: "120px",
                autoComplete: true,
                selectionChanged: function ( evt, ui )
                {
                    switch( ui.items[0].text.substring(0,4) )
                    {
                        case "Copy":
                            INSTANCE.copyData = _currentWindowPinned.selectionData;
                            INSTANCE.copyInfo = _currentWindowPinned.selectionCopyInfo;
                            break;
                        case "Past":
                            _currentWindowPinned.paste( INSTANCE.copyData, INSTANCE.copyInfo )//_currentWindowPinned.selectionCopyInfo
                            break;
                        case "Sele"://select all
                            for ( var i = _currentWindowPinned.gridIDMap.allRows().length + 1; i > -1; i-- )
                            {
                                for ( var j = _currentWindowPinned.gridIDMap.option( "columns" ).length - 1; j > 0 ; j-- )
                                {

                                    _currentWindowPinned.igGridSelection.selectCell( i, j );
                                }
                            }

                            if ( document.getElementById( "myDiv" + _currentWindowPinned.ID + "_table__" ) )
                                document.getElementById( "myDiv" + _currentWindowPinned.ID + "_table__" ).className = "ui-widget-header-leftCell";//rid that green select

                                
                            break;
                        case "Pref":
                            if ( document.getElementById( 'preferenceBox' ) ) { document.body.removeChild( document.getElementById( 'preferenceBox' ) ); return }
                            var preferenceBox = document.createElement( 'div' );
                            preferenceBox.setAttribute( 'style', 'position:fixed; top:' + 100 + 'px; left:' + 510 + 'px; z-index:' + 2000 )
                            preferenceBox.setAttribute( 'id', 'preferenceBox' );
                            preferenceBox.setAttribute( 'class', 'preferenceBox' );

                            ecu = new ECU();
                            var data = ecu.DataReader( "?userID=0" );
                            var checks = "";
                            var a1, a2, b1, b2;
                            if ( data != '""' )
                            {
                                data = data.substring( 1, data.length - 1 )//rid ""
                                data = data.split( "," );//get the catagories
                                checks = data[0].split( ":" );//get the checks
                                if ( checks[0] == "true" ) { a1 = "checked"; a2 = ""; } else { a1 = ""; a2 = "checked"; }
                                if ( checks[1] == "true" ) { b1 = "checked"; b2 = ""; } else { b1 = ""; b2 = "checked"; }
                            }
                            else
                            {//no pref file
                                checks = INSTANCE.checkedSelections.split( ":" );//get the checks
                                if ( checks[0] == "true" ) { a1 = "checked"; a2 = ""; } else { a1 = ""; a2 = "checked"; }
                                if ( checks[1] == "true" ) { b1 = "checked"; b2 = ""; } else { b1 = ""; b2 = "checked"; }
                            }
                            preferenceBox.innerHTML = '<FORM NAME="Pref">'
                            + '<TABLE border="4" > '
                            + '</td><td> Item </td><td>Explination<br> </td><td class2="table">Yes/No<br>'
                            + '<br>'
                            + '</tr><tr><td> 1 <br>'
                            + '</td><td class="table1"> Clear contents when resizing windows. <br>'
                            + '</td><td><input type="radio" name="radio1" id = "radio1" ' + a1 + ' ><input type="radio" name="radio1" ' + a2 + '><br>'

                            + '</tr><tr><td> 2 <br>'
                            + '</td><td class="table1"> Do this and that . <br>'
                            + '</td><td><input type="radio" name="radio2" id = "radio2" ' + b1 + '><input type="radio" name="radio2" ' + b2 + '><br>'
                            + '<br>'
                            + '</tr><tr><td> <br></td><td class="table2" ><input id="OK" type="button" value="Save"/> <br></td><td >  <input type="button" value="Cancel" onClick="document.body.removeChild( preferenceBox )" /><br>'
                            + '</td></tr></table></td></tr></table>'
                                 
                            form = document.body.appendChild( preferenceBox );
                            var form = document.getElementById( "OK" ); form.onclick = function () { INSTANCE.doSave( INSTANCE ); }
                            INSTANCE.clearWindowResize = true;
                            break;
                    }

                    inIUDiv.igCombo( "selectedIndex", -1 );//clear selection - no need to leave that selected in the menues
                    inIUDiv.igCombo( "activeIndex", -1 );
                }
            } );
        } );
     };
    // menue.prototype.doCopy();
    // menue.prototype.doPaste();

     menue.prototype.doSave = function ( I  )
     {
         var data = document.getElementById( 'radio1' ).checked + ":" +
                    document.getElementById( 'radio2' ).checked + ","
         data = data + ( document.getElementById( 'themeSelector' ).value - 1 ).toString() + ","
         data = data + document.getElementById( 'myTree' ).style.fontSize


         //update check to relect live
         I.clearWindowResize = document.getElementById( 'radio1' ).checked
         ///blahh - checks[1];


         ecu = new ECU();
         var data = ecu.DataWriter( "?userID=0&data=" + data );
         document.body.removeChild( preferenceBox );
         this.applyPrefs();
     };

     menue.prototype.applyPrefs = function ()
     {
         //apply preferences
         ecu = new ECU();
         var data = ecu.DataReader( "?userID=0" );
         if ( data != '""' )
         {
             data = data.substring( 1, data.length - 1 )//rid ""
             data = data.split( "," );//get the catagories
             checkedSelections = data[0];
             var checks = data[0].split( ":" );//get the checks
             this.clearWindowResize = ( checks[0] == "true" ) ? true : false;
             ///blahh - checks[1];
             this.windowMode = data[1];
             $( document.getElementById( 'myFontSlider' ) ).slider( { value: data[2].substring(0,2) } );
             document.getElementById( 'myTree' ).style.fontSize = data[2];
             var elmt = document.getElementById( 'themeSelector' )
             elmt.value = this.windowMode;
             document.getElementById( 'themeSelector' ).selectedIndex = this.windowMode;
             document.getElementById( 'myTree' ).setAttribute( 'class', 'box_' +elmt.options[this.windowMode].text );
             document.getElementById( 'myShortcutBar' ).setAttribute( 'class', 'shortcutbar box_' + elmt.options[this.windowMode].text)
             document.getElementById( 'myInfoBox' ).setAttribute( 'class', 'box_' + elmt.options[this.windowMode].text)

         }
         else
         {//no pref file
         }
     }

     return menue;
})();