Formatting Percent Value on the Client

This example demonstrates how to format text on the client by creating a custom cell type. This shows how to create the client-side script file for the custom cell type that renders the cell on the client.

The following code for the ASPX page creates a custom cell type and uses a custom percentrender.htc script file and a custom percenteditor.htc script file to implement client-side formatting. The Spread control installs percenteditor and percentrender htc files in the client scripting folder that are different from the following examples.

C#	Copy Code
[Serializable()] public class PercentCellType : GeneralCellType { public PercentCellType() { } public override string Format(object value) { if (value!=null) return value.ToString()+"%"; else return null; } public override object Parse(string value) { if (value==null \|\| value==string.Empty) return null; else { value = value.Replace("%", ""); try { double d = double.Parse(value); return d; } catch { return null; } } } public override Control PaintCell(string id, TableCell parent, Appearance style, Inset margin, object val, bool upperLevel) { if (upperLevel) parent.Attributes.CssStyle.Add("behavior", "url("+parent.ResolveUrl("percentrender.htc")+")"); return base.PaintCell(id, parent, style, margin, val, upperLevel); } public override string ValidateEditorValue(object val) { string reason = null; if (val!=null && val.ToString().Length>0) { string strVal = val.ToString().Replace("%", ""); try { Convert.ToDouble(strVal); } catch { reason = "input error"; } } return reason; } public override string EditorClientScriptUrl { get { return "percenteditor.htc"; } } } }

Copy Code

[Serializable()]
public class PercentCellType : GeneralCellType {
  public PercentCellType() { }
  public override string Format(object value) {
    if (value!=null) return value.ToString()+"%";
    else return null;
  }
  public override object Parse(string value) {
    if (value==null || value==string.Empty) return null;
    else {
      value = value.Replace("%", "");
      try {
        double d = double.Parse(value);
        return d;
      } catch {
        return null;
      }
    }
  }
  public override Control PaintCell(string id, TableCell parent, Appearance style, Inset margin, object val, bool upperLevel) {
    if (upperLevel)
      parent.Attributes.CssStyle.Add("behavior", "url("+parent.ResolveUrl("percentrender.htc")+")");
         return base.PaintCell(id, parent, style, margin, val, upperLevel);
  }
  public override string ValidateEditorValue(object val) {
    string reason = null;
    if (val!=null && val.ToString().Length>0) {
       string strVal = val.ToString().Replace("%", "");
       try {
          Convert.ToDouble(strVal);
       } catch {
          reason = "input error";
       }
    }
    return reason;
  }
  public override string EditorClientScriptUrl { get { return "percenteditor.htc"; } }
  }
}

The following is the listing of the percenteditor.htc file.

JavaScript	Copy Code
<PUBLIC:COMPONENT> <PUBLIC:METHOD NAME="isValid"> </PUBLIC:METHOD> </PUBLIC:COMPONENT> <SCRIPT language="javascript"> function isValid(val) { if (val!=null) { val = val.replace("%", ""); if (isNaN(val)) return "Please enter a number"; } return ""; } </SCRIPT>

JavaScript

Copy Code

<PUBLIC:COMPONENT>
  <PUBLIC:METHOD NAME="isValid">
  </PUBLIC:METHOD>
</PUBLIC:COMPONENT>
<SCRIPT language="javascript">

  function isValid(val) {
    if (val!=null) {
      val = val.replace("%", "");
      if (isNaN(val))
        return "Please enter a number";
    }
      return "";
  }
</SCRIPT>

The following is the listing of the percentrender.htc file.

JavaScript	Copy Code
<PUBLIC:COMPONENT> <PUBLIC:PROPERTY NAME="value"> <GET internalName="getValue"/> <PUT internalName="setValue"/> </PUBLIC:PROPERTY> </PUBLIC:COMPONENT> <SCRIPT language="javascript"> function getValue() { return element.innerText; } function setValue(val) { if (val!=null && val!="") { val = val.replace(" ", ""); val = val.replace("%", ""); element.innerText = val+"%"; } else { element.innerHTML = " "; } } </SCRIPT>

JavaScript

Copy Code

<PUBLIC:COMPONENT>
  <PUBLIC:PROPERTY NAME="value">
    <GET internalName="getValue"/>
    <PUT internalName="setValue"/>
  </PUBLIC:PROPERTY>
</PUBLIC:COMPONENT>
<SCRIPT language="javascript">

  function getValue() {
    return element.innerText;
  }

  function setValue(val) {
    if (val!=null && val!="") {
      val = val.replace(" ", "");
      val = val.replace("%", "");
      element.innerText = val+"%";
    } else {
        element.innerHTML = " ";
      }
  }
</SCRIPT>

Return to Developing a Custom HTC File.

Notes

The Format and the Parse method of the PercentCellType implement the methods defined in the IFormat interface. They are called to retrieve the value from a string and to format a value as a string. When formatting a value, the Format method simply appends a percent sign (%) to the value. When parsing a string, the Parse method removes the percent sign (%) from the string and converts the string to a double value.
The PaintCell method attaches the client script percentrender.htc to the TableCell. The percentrender.htc defines the Value property for the cell. When the cell goes into Edit mode, the getValue method is called. The value returned from the getValue method initializes the editor. When the cell is coming out of Edit mode, the setValue method is called. The setValue method formats the text to display the percentage.
The EditorClientScriptUrl property returns the URL to the client script file which will be attached to the editor for the cell. The percenteditor.htc defines an isValid method, which is called at the client side before the cell goes out of Edit mode. If the value in the editor is not valid, the isValid method returns an error message. The message is displayed and the cell stays in Edit mode. If the value in the editor is valid, the isValid method returns an empty string.
The editor client script defines a value property and an isValid method. The renderer client script defines a value property and a focus method.