Spread for ASP.NET 8.0 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> |