Tuesday, November 11, 2014

Customize controls in javascript - example- A Textbox


/********************************************
** Javascript Functions of iTextBox Control
********************************************/

// Class iTextBox
function iTextBox(sId) {
    //ID passed thru Constructor
    this.ID = sId;

    //Initialize Control
    this.Initialize = function() {
        var objCtl = this.HTMLControl();
        //SetVisible
        if(objCtl.Visible.toLowerCase() == 'false')
            this.SetVisible(false);
        else
            this.SetVisible(true);
        //
        if(this.GetText().indexOf('.') != -1){
            this.SetText(this.GetText());
        }
        this.SetViewState();
    }
   
    this.SelectStart = function(){
        event.cancelBubble = true;
        return true;
    }

    this.IsVisible = function() {
        var objCtl = this.HTMLControl();
        if (objCtl == null) {
            return false;
        } else {
            if (objCtl.style.display == "none") {
                return false;
            } else {
                return true;
            }
        }
    }

    this.SetVisible = function(bFlag) {
        var objCtl = this.HTMLControl();

        if (bFlag){
            objCtl.Visible = 'true';
            objCtl.style.display = "block";
        } else {
            objCtl.Visible = 'false';
            objCtl.style.display = "none";
        }
        this.SetViewState();
    }
   
    this.IsDisplayed = function() {
        var objCtl = this.HTMLControl();
        if (objCtl == null) {
            return false;
        } else {
            if (objCtl.style.visibility == "hidden") {
                return false;
            } else {
                return true;
            }
        }
    }
   
    this.SetDisplayed = function(bFlag) {
        var objCtl = this.HTMLControl();

        if (bFlag) {
            objCtl.Displayed = 'true';
            objCtl.style.visibility = "visible";
        } else {
            objCtl.Displayed = 'false';
            objCtl.style.visibility = "hidden";
        }
        this.SetViewState();
    }

    this.IsEnabled = function() {
        var objCtl = this.HTMLControl();
        if (objCtl == null) {
            return false;
        } else {
            if (objCtl.Enabled.toLowerCase() == 'true') {
                return true;
            } else {
                return false;
            }
        }
    }

    this.SetEnabled = function(bFlag) {
       
        var objCtl = this.HTMLControl();
       
        if (bFlag)
        {
            objCtl.Enabled = 'true';
            objCtl.disabled = false;
        }
        else
        {
            objCtl.Enabled = 'false';
            objCtl.disabled = true;
        }
        //Setting ViewState
        this.SetViewState();
    }

    this.IsReadOnly = function() {
        var objCtl = this.HTMLControl();
        if (objCtl == null) {
            return false;
        } else {
            if (objCtl.TextReadOnly.toLowerCase() == 'true') {
                return true;
            } else {
                return false;
            }
        }
    }

    this.SetReadOnly = function(bFlag) {
        var objCtl = this.HTMLControl();
        if (bFlag){
            objCtl.readOnly = true;
            objCtl.TextReadOnly = 'true';
        }
        else{
            objCtl.readOnly = false;
            objCtl.TextReadOnly = 'false';
        }
        //Setting ViewState
        this.SetViewState();
    }

    this.IsMandatory = function() {
        var oCtl = this.HTMLControl();
        if (oCtl == null) {
            return false;
        } else {
            if (oCtl.Mandatory.toLowerCase() == 'true') {
                return true;
            } else {
                return false;
            }
        }
    }

    this.SetMandatory = function(bFlag) {
        var oCtl = this.HTMLControl();
        if (oCtl == null) {
            return false;
        } else {
            //Set Mandatory
            if (bFlag)
                oCtl.Mandatory = 'true';
            else
                oCtl.Mandatory = 'false';
        }
        this.SetViewState();
    }



    this.SetFocus = function() {
        var objCtl = this.HTMLControl();
        if(objCtl == null)    return false ;
        if( this.IsVisible() == true){
            objCtl.focus();
            objCtl.select();
        }
    }

    this.GetText = function() {
        return this.HTMLControl().value;
    }

    this.SetText = function(sText) {
        var oCtl = this.HTMLControl();
        if((sText.toString().indexOf('.') != -1)&& (oCtl.Precision != -1)){
            var nDiff = 1;
            var sPrec = eval(oCtl.Precision);
            for(var iIdx = 0; iIdx < sPrec; iIdx++){
                nDiff = nDiff * 10;
            }
            //
            sText = Math.floor(sText * nDiff) /nDiff;
        }
        oCtl.value = sText;
        this.SetViewState();
       
    }

    this.GetValue = function() {
        return this.GetText();
    }

    this.SetValue = function(sText) {
        this.SetText(sText);
    }

    /********************************************
    * Functions used by the iTextBox Control
    *******************************************/
    this.HTMLControl = function() {
        try {
            return document.getElementById("itextbox_Control_" + this.ID);
        } catch (e) {
            return null;
        }
    }

    this.HTMLHidden = function() {
        try {
            return document.getElementById("itextbox_Value_" + this.ID);
        } catch (e) {
            return null;
        }
    }

    this.SetViewState = function() {
        var objCtl = this.HTMLControl();
        var objText = this.HTMLHidden();
        if (objCtl.Enabled.toLowerCase() != "true") { // If DisEnabled
            objCtl.className = objCtl.css_Disabled;
        } else {
            objCtl.className = objCtl.css_Normal;
        }

        objText.value = this.IsVisible() + ";" + this.IsEnabled() + ";" + this.IsReadOnly() + ";" + this.IsMandatory() + ";" + escape(this.GetText()) + ";" + this.IsDisplayed();
    }
   
    //To set the status text
    this.Focus = function(sStatusText) {
        try
        {
            this.OnSetStatusText(sStatusText);
        }catch(e) {
        }
    }
   
    this.Change = function() {
        try{
            var objCtl = this.HTMLControl();
            this.SetViewState();
            this.OnChange(objCtl.value);
        }catch(e){
        }
    }
   
    this.KeyDown = function(){
        try{
            var objCtl = this.HTMLControl();
            if (objCtl == null)
                return false;
            if (objCtl.TextReadOnly.toLowerCase() == "true") { // If ReadOnly
                if (event.keyCode == 9 || event.keyCode == 16)
                    return true;
                else
                    event.returnValue = false;
            } else {
                this.OnKeyDown(objCtl.value);
            }
        }catch(e){
        }
    }
   
    this.KeyPress = function() {
        try{
            var objCtl = this.HTMLControl();
            if (objCtl == null)
                return false;
            if (objCtl.TextReadOnly.toLowerCase() == "true") { // If ReadOnly
                if (event.keyCode == 9 || event.keyCode == 16)
                    return true;
                else
                    event.returnValue = false;
            } else {
                this.OnKeyPress(objCtl.value);
            }
        }catch(e){
        }
    }
   
    this.KeyUp = function(){
        try{
            var objCtl = this.HTMLControl();
            if (objCtl == null)
                return false;
            if (objCtl.TextReadOnly.toLowerCase() == "true") { // If ReadOnly
                if (event.keyCode == 9 || event.keyCode == 16)
                    return true;
                else
                    event.returnValue = false;
            } else {
                this.OnKeyUp(objCtl.value);
            }
        }catch(e){
        }
    }
    
    //SetStatusText Event Handler
    this.OnSetStatusText = function(sText) {
    }
   
    // KeyDown Event Handler
    this.OnKeyDown = function(sText){
    }
   
    //KeyPress Event Handler
    this.OnKeyPress = function(sText) {
    }
   
    // KeyUp Event Handler
    this.OnKeyUp = function(sText){
    }
   
    //Change Event Handler
    this.OnChange = function(sText) {
    }
}
/********************************************/