[Solved] MaskedTextField Display Customization Issue

[J]

I have a grid that uses a MaskedTextField for a Zip Code column defined as:

<telerik:GridMaskedColumn ConvertEmptyStringToNull="False" DataField="ZipCode" DataFormatString="{0:#####}"
    FilterControlAltText="Filter ZipCode column" HeaderText="Zip Code" Mask="#####"
    SortExpression="ZipCode" UniqueName="ZipCode" EmptyDataText="" ShowSortIcon="False">
    <ColumnValidationSettings EnableRequiredFieldValidation="True">
        <RequiredFieldValidator ErrorMessage="* Required"></RequiredFieldValidator></ColumnValidationSettings>
    <HeaderStyle Wrap="False" HorizontalAlign="Left" Width="80px" CssClass="grid-header" />
    <ItemStyle Width="100%" HorizontalAlign="Left" VerticalAlign="Top"></ItemStyle>
</telerik:GridMaskedColumn>

If you look at the attached screen shot of what it looks like in Edit mode, you'll see that the text box used during edit is sized well beyond the width of the column.  I have tried changing it to the following but it has no impact.

<telerik:GridMaskedColumn ConvertEmptyStringToNull="False" DataField="ZipCode" DataFormatString="{0:#####}"
    FilterControlAltText="Filter ZipCode column" HeaderText="Zip Code" Mask="#####"
    SortExpression="ZipCode" UniqueName="ZipCode" EmptyDataText="" ShowSortIcon="False" ColumnEditorID="txtGridEdit_Zip">
    <ColumnValidationSettings EnableRequiredFieldValidation="True">
        <RequiredFieldValidator ErrorMessage="* Required"></RequiredFieldValidator></ColumnValidationSettings>
    <HeaderStyle Wrap="False" HorizontalAlign="Left" Width="80px" CssClass="grid-header" />
    <ItemStyle Width="100%" HorizontalAlign="Left" VerticalAlign="Top"></ItemStyle>
</telerik:GridMaskedColumn>

<telerik:GridMaskedColumnEditor runat="server" ID="txtGridEdit_Zip">
    <MaskedTextBox LabelCssClass="" LabelWidth="0px" Width="98%" Mask="#####" DataFormatString="{0:#####}" DisplayMask="#####" HideOnBlur="True" />
</telerik:GridMaskedColumnEditor>

Any ideas on how I can get this text box to display using 98% of the field's width like I do all of the other fields?  I'm using the same approach for the other fields which work perfectly, only the MaskedColumn exhibits this behavior.

I know I made previous post regarding the error that occurs by using this code ('GridMaskedColumnEditor -> MaskedTextBox' declaration causes an error during runtime); so I'm hoping that someone else has used a different approach that has gotten around this.

Thanks.

[J]

Anyone?

[Kostadin]

Hi Juan,

Our developers noticed that this is a bug and the fix will be available in SP1 Q1 2013. Meanwhile you could use Form Template.

Greetings,
Kostadin
the Telerik team

[J]

Sounds good, I'll wait for the update because inline editing is a requirement, can't use the edit form.

Thanks.

[J]

I got around the issues I've had with the inline editing formatting and tab indexes by doing the following in my ItemDataBound event.

The masked edit text box now stays within the column's width.  I hate having tab indexes and widths hard coded but, it works.  Hopefully this helps anyone else experiencing this.

protected void grdAthletes_ItemDataBound(object sender, GridItemEventArgs e)
{
    Control ddlGenderSelector = null;
    Control ctrlFieldEditor = null;
    Control dtDoBEditor = null;
    Control ctrlFields = null;

    try
    {
        //Some controls don't load the values into the custom editor's automatically so force the values through
        if (e.Item.IsInEditMode)
        {
            ctrlFields = ((GridEditableItem)e.Item)["FirstName"].Controls[0];
            ((TextBox)ctrlFields).TabIndex = 50;

            ctrlFields = ((GridEditableItem)e.Item)["MiddleName"].Controls[0];
            ((TextBox)ctrlFields).TabIndex = 51;

            ctrlFields = ((GridEditableItem)e.Item)["LastName"].Controls[0];
            ((TextBox)ctrlFields).TabIndex = 52;

            ddlGenderSelector = e.Item.FindControl("ddlGender"); //Get the gender selection control

            //Load the current value for Gender into the column editor control
            if (ddlGenderSelector != null)
            {
                ((RadDropDownList)ddlGenderSelector).SelectedValue = ((DataRowView)e.Item.DataItem)[3].ToString();
                ((RadDropDownList)ddlGenderSelector).TabIndex = 53;
            }

            //Set the min/max dates for athletes date of birth
            dtDoBEditor = ((GridEditableItem)e.Item)["DoB"].Controls[0];

            if (dtDoBEditor != null)
            {
                ((RadDatePicker)dtDoBEditor).TabIndex = 54;

                if (string.Compare(_propsSettings.ProgramCode, "Y", true) == 0)
                {
                    ((RadDatePicker)dtDoBEditor).SelectedDate = DateTime.Now.AddYears(-_propsSettings.MaxAge);
                    ((RadDatePicker)dtDoBEditor).MinDate = DateTime.Now.AddYears(-_propsSettings.MaxAge);
                }
                else
                {
                    ((RadDatePicker)dtDoBEditor).SelectedDate = DateTime.Now.AddYears(-_propsSettings.MinAge);
                    ((RadDatePicker)dtDoBEditor).MinDate = DateTime.MinValue;
                }

                if (_propsSettings.MinAge > 0)
                    ((RadDatePicker)dtDoBEditor).MaxDate = DateTime.Now.AddYears(-_propsSettings.MinAge);
                else
                    ((RadDatePicker)dtDoBEditor).MaxDate = DateTime.MaxValue;

                //Try to load the currently entered date, if it falls out of the available range, then select the minimum value
                try
                { ((RadDatePicker)dtDoBEditor).SelectedDate = DateTime.Parse(((DataRowView)e.Item.DataItem)[7].ToString()); }
                catch
                { ((RadDatePicker)dtDoBEditor).SelectedDate = ((RadDatePicker)dtDoBEditor).MinDate; }
            }

            ctrlFields = ((GridEditableItem)e.Item)["ZipCode"].Controls[0];
            ((RadMaskedTextBox)ctrlFields).TabIndex = 55;
            ((RadMaskedTextBox)ctrlFields).Width = 64;

            ctrlFields = ((GridEditableItem)e.Item)["Email"].Controls[0];
            ((TextBox)ctrlFields).TabIndex = 56;

            ctrlFields = ((GridEditableItem)e.Item)["DeleteColumn"].Controls[0];
            ((ImageButton)ctrlFields).TabIndex = -1;

            //Get the editor for the first field and set focus to it
            ctrlFieldEditor = ((GridEditableItem)e.Item)["FirstName"].Controls[0];

            if (ctrlFieldEditor != null)
                ctrlFieldEditor.Focus();
        }
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.Print("Error: " + ex.ToString());
        Exceptions.ProcessModuleLoadException(this, ex);
    }
}