Tuesday, July 13, 2010

ToolTip - RadToolTip

RadTooltip is used as a tooltip to show aditional information that can be formatted in any way you need and, most importantly doesn't disappear after some seconds as the standard tooltip, so it is the user who decides when he/she doesn't want to see it anymore by clicking in a close button.
RadTooltip belongs to the Telerik controls family, so you will need to have it installed.


Quick example - How to use it

1. On the MouseOver event of the txtSUMSGDesc textbox, show a customized tooltip with a textarea inside of it.

The HTML code for the textboxes:


1 <td>
2 <asp:TextBox ID="txtSUMSG" runat="server" CssClass="textbox_disabled2" ReadOnly="False" MaxLength="5" width="33px" ></asp:TextBox>

3 <asp:TextBox ID="txtSUMSGDesc" CssClass="textbox_disabled2" runat="server" Width="180px" AutoPostBack="true"></asp:TextBox>

4 </td>



the HTML code for the RadToolTip

1 <telerik:RadToolTip runat="server" ID="RadToolTip1" Position="TopRight" HideEvent="ManualClose"
2 ShowEvent="OnMouseOver" Width="350px" RelativeTo="Element"

3 TargetControlID="txtSUMSGDesc" OnClientBeforeShow="CheckIfShow">

4 <table width="100%">

5 <tr>

6 <td>

7 <asp:TextBox ID="txtMessageDesc" runat="server" TextMode="MultiLine"

8 Width="300px" CssClass="MessageText"></asp:TextBox>

9 </td>

10 </tr>

11 </table>

12 </telerik:RadToolTip>


The JavaScript functions needed to show the RadToolTip (only when there is information in the textbox)

1 function HideTooltip() {
2 var tooltip =
Telerik.Web.UI.RadToolTip.getCurrent();
3 if
(tooltip) tooltip.hide();
4
}
5

6 function ShowTooltip() {
7 window.setTimeout(function
() {
8 var tooltip = $find("RadToolTip1"
);
9 //API: show the tooltip

10
tooltip.show();
11 }, 10
);
12
}
13

14 function CheckIfShow(sender, args) {
15 var Elem = document.getElementById("<%=txtSUMSGDesc.ClientID%>"
);
16 //check if summary is visible

17 if (Elem.value == ""
) {
18 //API: if there are no errors, do not show the tooltip

19 args.set_cancel(true
);
20
}
21 }

Wednesday, July 7, 2010

Formatting textbox : RadNumericTextBox

If we need to format a textbox, so that we don't need to validate the input and if you can use telerik controls. You should use RadNumericTextBox control.


Before you need something like this in order to validate a number with maximum 4 decimals.


1 <asp:TextBox ID="txtTaxRate" runat="server" CssClass="textbox_num_enabled2" Width="50px" MaxLength="7" text='<%#DataBinder.Eval(Container, "DataItem.TaxRate") %>'></asp:TextBox>
2 <asp:RegularExpressionValidator ID="revTaxRate" runat="server"

3 ErrorMessage="RegularExpressionValidator" CssClass="error2"

4 ControlToValidate="txtTaxRate" ValidationExpression="^\d{0,2}(\.\d{1,4})?$"></asp:RegularExpressionValidator>

5

6

Now, you just need a RadNumeric Textbox like this:

1 <telerik:RadNumericTextBox ID="txtTaxRate" runat="server" DataType="System.Int64" MaxLength="9"
2 MaxValue="99.9999" MinValue="0" Skin="" CssClass="textbox_num_enabled2" EnableEmbeddedSkins="False"

3 Width="80px" text='<%#DataBinder.Eval(Container, "DataItem.TaxRate") %>
'>
4 <NumberFormat DecimalDigits="4" />

5 </telerik:RadNumericTextBox>

6

7

Datagrid column's formatting

Formatting a datagrid or radgrid column is really easy. We just need to verify the following:

1. Source Datatype to apply the format.
2. The format itself.

To clarify this:
Let's say we need to format a numeric field "Qty", so that instead of having 12 value, it shows 12.00, then, We need to ensure ourselves that "Qty" datatype is decimal or numeric in the case we are planning to use the {0:F4} format. Otherwise, it will always show 12.

Ways of formatting a radgrid or datagrid column in the aspx page:
1. Formatting with String.Format.
2. Formatting with Databinder.Eval

Even though, both can do exactly the same thing. The theory said (I couldn't verify this) that the String.Format method is faster than Databinder.Eval; However, some programmers said that the difference is just miliseconds and the code is a little bit more complicated so that is worthless.
Anyways, I will develop here the second method: Formatting with Databinder.Eval.

When using a BoundColumn:


1 <telerik:GridBoundColumn DataField="TaxRate" HeaderText="Tax Rate" UniqueName="TaxRate"
2 DataFormatString="{0:F4}" HtmlEncode="false">

3 <HeaderStyle Font-Names="Arial" HorizontalAlign="Right" Width="35px" />

4 <ItemStyle HorizontalAlign="Right" Wrap="True" />

5 </telerik:GridBoundColumn>



When Using a TemplateColumn:


1 <telerik:GridTemplateColumn HeaderText="Tax Rate" UniqueName="TaxRate" Visible="True">
2 <HeaderStyle Font-Names="Arial" HorizontalAlign="Right" Width="35px" Wrap="True" />

3 <ItemStyle HorizontalAlign="Right" Wrap="False" Font-Names="Arial" />

4 <ItemTemplate>

5 <asp:Label ID="lblTaxRate" runat="server" CssClass="label2" Width="35px" Text='<%# DataBinder.Eval (Container, "DataItem.TaxRate", "{0:F4}") %>'></asp:Label>

6 </ItemTemplate>

7 </telerik:GridTemplateColumn>



Formatting with String Format:


1 <%# String.Format("{0:c}",
2 ((System.Data.Common.DbDataRecord)Container.DataItem)["TaxRate"]) %>

3



Format Expressions:


1. This will display a text Price: followed by the numeric text in currency format

Format String: Price: {0:C}

NOTE : THE ABOVE MENTIONED FORMAT IS USING A ZERO IT IS NOT THE ALPHABET O

Applied to numeric and decimal data types.

The currency format is according to the culture info set in the web config file.


2. Integers are displayed in a zero-padded field four characters wide.

Format String : {0:D4}

Applied to integer datatype only.


3. To show two decimal places followed by "%"

Format String : {0:N2}%

Applied to integer datatype only.


4. To round the numbers to one decimal place and are zero padded for numbers less than three digits.

Format String : {0:000.0}

Applied to numeric and decimal datatype only.


5. Long Date format

Format String: {0:D}

Applied to date and datetime datatype only.

( the above formatting is as set in the web config)


6. Short Date format

Format String : {0:d}

Applied to date and datetime datatype only.

( the above formatting is as set in the web config)



6. Numeric Date format

Format String : {0:yy-MM-dd}

Applied to date and datetime datatype only.


Reorted Issues:

When the formatting doesn't work, verify the datatype and in the case of BoundColumns, try by setting: HtmlEncode = false.