# Formatting Percent Value on the Client

This topic demonstrates how to format text on the client by creating a custom cell type. Learn more in documentation.

## Content

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.

```csharp
[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
<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
<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

* The **Format** and **Parse** methods 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.