Spread for ASP.NET 12 Product Documentation
Formatting Percent Value on the Client
Spread for ASP.NET 12 Product Documentation > Client-Side Scripting Reference > Scripting Overview > Developing a Custom HTC File > 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"; } }
  }
}

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>

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

JavaScript
Copy Code
<PUBLIC:COMPONENT>
  <PUBLIC:PROPERTY NAME="value"
    GET="getValue"
    PUT="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>

Notes