DataFormatString for GridBoundColumn in edit mode

[Christo]

Hi,

I want to force my users to input data in a specific format. The format is digit-digit-capital letter-digit-digit-digit e.g. 30H120.

So if the user types a letter instead of a digit for the 2nd character, the control must simply reject the input. And if possible, when the user enters a small letter for the 3rd character, it must be auto capitalized.

Any ideas?

Thanks,
Christo

[Princy]

Hello Christo,

One suggestion is to access GridBoundColumn in edit mode and attach the client event "onkeypress".

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
      if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem item = (GridEditableItem)e.Item;
            TextBox txtbox = item["ColumnUniqueName"].Controls[0] as TextBox;
            txtbox.Attributes.Add("onkeypress", "handle(event);");
        }
}

Javascript:

<script type="text/javascript">
  function handle(event)
  {
  //Here you can check for the key and cancel the event.
  }
</script>

Another suggestion is to use RadMaskedTextBox which supports data entry control. Check the following help documentation which explains more about this.
RadmaskedTextBox Basics.

Thanks,
Princy.

[Christo]

Hi,

Thanks for your quick reply. I'll give it a try.

Regards,
Christo

[Christo]

For those who also have difficulty with this, here's the solution I managed to create so that the input of the field is masked to allow the format: digit, digit, capital letter, digit, digit, digit   e.g. 30H120

 <telerik:RadGrid ID="RadGrid1">
                 <PagerStyle Mode="NextPrevAndNumeric" />
 
                <MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataKeyNames="PK, BaseGrade" DataSourceID="SqlDataSource1" HorizontalAlign="NotSet" AutoGenerateColumns="False">
                    <Columns>
                        <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn" HeaderStyle-Width="28px">
                            <ItemStyle CssClass="MyImageButton" />
                        </telerik:GridEditCommandColumn>
                        <telerik:GridButtonColumn ButtonType="ImageButton" ConfirmText="Are you sure you want to delete this base grade?" ConfirmDialogType="RadWindow"
                            ConfirmTitle="Delete" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn" HeaderStyle-Width="28px">
                            <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                        </telerik:GridButtonColumn                       
<%--This is the masked input field--%>

                        <telerik:GridTemplateColumn UniqueName="BaseGrade" DataField="BaseGrade" HeaderText="Base grade" SortExpression="BaseGrade">
                            <ItemTemplate> 
                                <asp:Label runat="server" ID="lblBaseGrade" Text='<%# Eval("BaseGrade")%>'></asp:Label>
                            </ItemTemplate>
                            <InsertItemTemplate>
                                <telerik:RadMaskedTextBox ID="RadMaskedTextBox1" runat="server" Mask="##L###" SelectionOnFocus="CaretToBeginning" />
                            </InsertItemTemplate>
                            <EditItemTemplate>
                                <telerik:RadMaskedTextBox ID="RadMaskedTextBox2" runat="server" Mask="##L###" SelectionOnFocus="SelectAll" />
                            </EditItemTemplate>
                        </telerik:GridTemplateColumn>
<%--Other fields that are read-only --%> 
                        <telerik:GridNumericColumn DataField="Thickness" HeaderText="Thickness (mm)" SortExpression="Thickness" UniqueName="Thickness" ReadOnly="true" />
                        <telerik:GridBoundColumn DataField="Grade" HeaderText="Grade" SortExpression="Grade" UniqueName="Grade" ReadOnly="true" />
                        <telerik:GridNumericColumn DataField="LoadLoss" HeaderText="Load loss (W/kg)" SortExpression="LoadLoss" UniqueName="LoadLoss" ReadOnly="true" />                                                
                    </Columns>
                </MasterTableView>
 
                <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">
                    <Selecting AllowRowSelect="True" />
                    <ClientEvents OnRowDblClick="RowDblClick" />
                </ClientSettings>
            </telerik:RadGrid>   

~ End