Field Editor Display Issues

[J]

I have the following grid and column editor declared:

<telerik:RadGrid ID="grdItems" runat="server" AllowAutomaticDeletes="True" AllowSorting="True"
    PageSize="12" AutoGenerateColumns="False" OnNeedDataSource="grdItems_NeedDataSource"
    OnItemCommand="grdItems_ItemCommand" OnPreRender="grdItems_PreRender" OnUpdateCommand="grdItems_UpdateCommand"
    Width="456px" OnDeleteCommand="grdItems_DeleteCommand" OnEditCommand="grdItems_EditCommand"
    OnItemDataBound="grdItems_ItemDataBound" ShowStatusBar="True" AllowAutomaticInserts="True"
    AllowAutomaticUpdates="True" OnItemCreated="grdItems_ItemCreated" Skin="Metro"
    BorderStyle="None" CellSpacing="0" GridLines="None" ForeColor="White" BackColor="Transparent"
    ShowFooter="True" AllowMultiRowEdit="True">
    <ValidationSettings ValidationGroup="ItemsGrid" />
    <ClientSettings AllowKeyboardNavigation="True">
        <Selecting AllowRowSelect="True" />
        <KeyboardNavigationSettings AllowSubmitOnEnter="True" AllowActiveRowCycle="True" />
        <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" />
        <ClientEvents OnKeyPress="OnKeyPress" OnRowSelected="RowSelected" OnRowClick="RowClick"
            OnRowDblClick="RowDblClick" OnGridCreated="GridCreated" OnCommand="GridCommand" />
        <Resizing ShowRowIndicatorColumn="False" />
    </ClientSettings>
    <AlternatingItemStyle BackColor="LightGray" BorderStyle="None" ForeColor="Black" />
    <EditItemStyle BackColor="Gainsboro" BorderStyle="None" />
    <FooterStyle BorderStyle="None" />
    <HeaderStyle BorderStyle="None" Height="48px" HorizontalAlign="Left" VerticalAlign="Middle" />
    <ItemStyle BackColor="White" BorderStyle="None" ForeColor="Black" />
    <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>
    <SelectedItemStyle BorderStyle="None" />
    <FilterMenu EnableImageSprites="False" />
    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default" />
    <MasterTableView NoMasterRecordsText="No items to display." EditMode="InPlace"
        CommandItemDisplay="None" BorderStyle="None" BackColor="Transparent" ShowFooter="False">
        <HeaderStyle BorderStyle="None" Font-Bold="True" Font-Size="Medium" ForeColor="White"
            Height="48px" HorizontalAlign="Left" VerticalAlign="Middle" Wrap="True" />
        <CommandItemStyle CssClass="rgCommandRow" />
        <FooterStyle BorderStyle="None" CssClass="grid-footer" />
        <CommandItemTemplate>
            <div>
                <asp:LinkButton ID="btnRemoveSelected" runat="server" CommandName="RemoveSelected">
                    <img style="border:0px;vertical-align:middle;" alt="Remove Selected Items" src="Images/GradientCancel_32x32.png" />  Remove Selected Items</asp:LinkButton>
             </div>
        </CommandItemTemplate>
        <CommandItemSettings ExportToPdfText="Export to PDF" ShowRefreshButton="False" AddNewRecordText="Add Item">
        </CommandItemSettings>
        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
            <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>
        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
            <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>
        <EditFormSettings EditFormType="Template">
            <EditColumn FilterControlAltText="Filter EditCommandColumn column" CancelImageUrl="Cancel.gif"
                InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif" Visible="true" Display="true">
            </EditColumn>
        </EditFormSettings>
        <ItemStyle BackColor="White" BorderStyle="None" ForeColor="Black" />
        <AlternatingItemStyle BackColor="LightGray" BorderStyle="None" ForeColor="Black" />
        <EditItemStyle BackColor="Gainsboro" BorderStyle="None" />
        <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>
        <Columns>
            <telerik:GridCheckBoxColumn ConvertEmptyStringToNull="False"
                FilterControlAltText="Filter checked column" SortExpression="Checked"
                UniqueName="Checked">
                <HeaderStyle Wrap="False" HorizontalAlign="Left" Width="32px" CssClass="grid-header grid-header-first" />
                <ItemStyle HorizontalAlign="Center" Width="100%" VerticalAlign="Top" />
            </telerik:GridCheckBoxColumn>
            <telerik:GridNumericColumn DataField="Quantity" DataType="System.Int16"
                DecimalDigits="0" DefaultInsertValue="1" ColumnEditorID="txtGridEditor_Quantity"
                FilterControlAltText="Filter Quantity column" HeaderText="Quantity"
                ShowSortIcon="False" SortExpression="Quantity" UniqueName="Quantity">
                <HeaderStyle CssClass="grid-header" HorizontalAlign="Left" Width="80px" Wrap="False" />
                <ItemStyle HorizontalAlign="Center" Width="100%" VerticalAlign="Top" />
            </telerik:GridNumericColumn>
            <telerik:GridBoundColumn DataField="Item" HeaderText="Item" UniqueName="Item"
                ConvertEmptyStringToNull="False" EmptyDataText="" SortExpression="Item"
                ShowSortIcon="False" ReadOnly="True">
                <HeaderStyle Wrap="False" HorizontalAlign="Left" Width="180px" CssClass="grid-header" />
                <ItemStyle HorizontalAlign="Left" Width="100%" VerticalAlign="Top" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn ConvertEmptyStringToNull="False" DataField="Category" EmptyDataText=""
                FilterControlAltText="Filter Category column" HeaderText="Category" SortExpression="Category"
                UniqueName="Category" ReadOnly="True">
                <HeaderStyle CssClass="grid-header" Width="80px"  />
                <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="100%" />
            </telerik:GridBoundColumn>
            <telerik:GridNumericColumn dataFormatString="{0:$###,##0.00}" DataField="Price"
                DataType="System.Decimal" NumericType="Currency"
                HeaderText="Price" SortExpression="Price" UniqueName="Price" Aggregate="Sum"
                FooterAggregateFormatString="{0:C}" ReadOnly="True">
                <HeaderStyle CssClass="grid-header" Width="60px"  />
                <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="100%" />
            </telerik:GridNumericColumn>
            <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" FilterControlAltText="Filter DeleteColumn column"
                ImageUrl="Images/305_Close_16x16_72.png" Text="" UniqueName="DeleteColumn" Resizable="false"
                ConfirmText="Remove this item?" ConfirmDialogType="RadWindow" ConfirmTitle="Remove"
                ShowInEditForm="True">
                <HeaderStyle Wrap="False" HorizontalAlign="Left" Width="24px" CssClass="grid-header grid-header-last">
                </HeaderStyle>
                <ItemStyle Width="100%" HorizontalAlign="Right" VerticalAlign="Top" />
            </telerik:GridButtonColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<telerik:GridTextBoxColumnEditor ID="txtGridEditor_Quantity" runat="server" TextBoxStyle-Width="98%" />

The grid works as expected EXCEPT when it comes to rendering the column editor for the Quantity field.  See the attached screenshot.  The Quantity field text box is sized way beyond what the column width is and I cannot figure out a way to get it to size appropriately.  Whether I specify a ColumnEditorID or not, it displays this way.  This is similar to a previous post when trying to customize masked text fields and that was acknowledged as bug on Telerik's end.

Is this the same issue or am I doing something incorrectly?  I can't imagine that no one else has encountered this issue since I've been encountering it without doing anything out of the ordinary in multiple projects.  I've even gone so far as to remove ALL css to make sure something there wasn't causing it but it displays the same way.

[Galin]

Hi Juan,

Could you check the issue in a few browsers. Does the issue persist in all browsers?
In case the problem is only in IE check out this blog post.

Also, if you are using ajax please go to this help topic, section 2.

Finally, in case you are using CDN, please try to disable it and let me know how it goes.

Hope this helps.

All the best,
Galin
the Telerik team

[J]

I always test with IE (10.0.9200.16521), FireFox (19.0.2), and Chrome (25.0.1364.172 m); all showed the same results.

No CDN is in use.  It is running completely locally on my machine.

The link to the help topic is invalid; as in the link doesn't work.

[J]

I got the link to work by copying it, pasting into the address bar and then removing the obviously unintended extra text that was breaking the link.

http://www.telerik.com/help/aspnet-ajax/ajax-common-issues.html

But I didn't find anything relevant on there.

[Galin]

Hello Juan,

I am afraid we are still not able to identify what's causing the problems you are facing based on this information. I would appreciate it, if you could isolate the problem in a simple running project so that I can examine it locally.

Kind regards,
Galin
the Telerik team

[Tim]

I have the same issue.  Any columns that have a "Template" for their EditTemplate (Template columns), the grid auto-magically sets the Editors width to a fixed size.  In my case, something in Telerik's internal code is adding a "style='width:160px;" to EVERY EDITOR!  I did not set a width, but each column does have a width set (and NONE of them are 160px!).  The internal code just seems to randomly pick this fixed width and add it to every control.  I've tried numerous approached to removing the style attribute, to no avail.

[J]

Here's how I got around Telerik's wacky inline editor styling issues.  I'm not sure what it's using to decide how to style the elements but they're all over the place unless you do the following (I tried using column editors but depending on what options and editor types you select it crashes or makes no change).  I ended up having to create an inherited grid control and use the following (you could tweak this to use in your application instead of an inherited grid though):

        protected override void OnItemDataBound(GridItemEventArgs e)
        {
            GridEditableItem rowCurItem = null;
            short shTabIndex = 0;
            dynamic ctrlLastFieldEditor = null;
            GridColumn colLastField = null;

            try
            {
                //Inline editing
                if (e.Item.IsInEditMode)
                {
                    rowCurItem = e.Item as GridEditableItem;

                    //The controls always render really wide and don't always have the correct tab index for non-textbox controls so force it to render and behave normally
                    if (this.MasterTableView.EditMode == GridEditMode.InPlace)
                    {
                        foreach (GridColumn colCurField in this.MasterTableView.Columns)
                        {
                            if (colCurField.Visible && colCurField.Display)
                            {
                                foreach (dynamic colFieldEditor in rowCurItem[colCurField.UniqueName].Controls)
                                {
                                    try
                                    {
                                        //Certain control types shouldn't be adjusted; make sure it's just the textboxes, drop downs, etc...
                                        if (!(colFieldEditor is IValidator) && !(colFieldEditor is Literal) && !(colFieldEditor is LiteralControl) && !(colFieldEditor is PlaceHolder))
                                        {
                                            if (!(colFieldEditor is ImageButton) && !(colFieldEditor is LinkButton) && !(colFieldEditor is Button) && !(colFieldEditor is System.Web.UI.WebControls.Image))
                                            {
                                                if (colFieldEditor.GetType().GetProperty("Width") != null)
                                                    colFieldEditor.Width = colCurField.HeaderStyle.Width;

                                                //Keep track of the what seems to be the last grid column and it's associated editor control
                                                if (colFieldEditor.GetType().GetProperty("TabIndex") != null)
                                                {
                                                    if (((ctrlLastFieldEditor == null) && (colLastField == null)) ||
                                                        ((ctrlLastFieldEditor != null) && (colLastField != null) &&
                                                        (colLastField.OrderIndex <= colCurField.OrderIndex)))
                                                    {
                                                        colLastField = colCurField;
                                                        ctrlLastFieldEditor = colFieldEditor;
                                                    }
                                                }
                                            }

                                            if (colFieldEditor.GetType().GetProperty("TabIndex") != null)
                                            {
                                                shTabIndex += 1;

                                                colFieldEditor.TabIndex = (short)(shTabIndex + colCurField.OrderIndex + this.TabIndex);
                                            }
                                        }

                                        //Update the validation group name if it's been changed or not provided
                                        if (colFieldEditor.GetType().GetProperty("ValidationGroup") != null)
                                            colFieldEditor.ValidationGroup = this.ValidationGroupName;
                                    }
                                    catch (Exception ex)
                                    { System.Diagnostics.Debug.Print("ERROR: " + colCurField.UniqueName + "(" + rowCurItem[colCurField.UniqueName].Controls.Count + ")  -  " + ex.ToString()); }
                                }
                            }
                        }

                        //Add key press trapping for the last editor (enables tab to new row)
                        if (ctrlLastFieldEditor != null)
                            ctrlLastFieldEditor.Attributes.Add("OnKeyDown", "return LastColumnEditor_OnKeyPress(this, event)");

                        //Prevent tabbing to row 'management' buttons during editing
                        if (_propsSettings.BlockTabToManagementButtons)
                        {
                            if (!string.IsNullOrEmpty(_propsSettings.DeleteColumnName) && (this.MasterTableView.Columns.FindByUniqueNameSafe(_propsSettings.DeleteColumnName) != null))
                            {
                                foreach (dynamic ctrlManagementButton in rowCurItem[_propsSettings.DeleteColumnName].Controls)
                                {
                                    if (ctrlManagementButton.GetType().GetProperty("TabIndex") != null)
                                        ctrlManagementButton.TabIndex = -1;
                                }
                            }

                            if (!string.IsNullOrEmpty(_propsSettings.EditColumnName) && (this.MasterTableView.Columns.FindByUniqueNameSafe(_propsSettings.EditColumnName) != null))
                            {
                                foreach (dynamic ctrlManagementButton in rowCurItem[_propsSettings.EditColumnName].Controls)
                                {
                                    if (ctrlManagementButton.GetType().GetProperty("TabIndex") != null)
                                        ctrlManagementButton.TabIndex = -1;
                                }
                            }

                            if (!string.IsNullOrEmpty(_propsSettings.SaveColumnName) && (this.MasterTableView.Columns.FindByUniqueNameSafe(_propsSettings.SaveColumnName) != null))
                            {
                                foreach (dynamic ctrlManagementButton in rowCurItem[_propsSettings.SaveColumnName].Controls)
                                {
                                    if (ctrlManagementButton.GetType().GetProperty("TabIndex") != null)
                                        ctrlManagementButton.TabIndex = -1;
                                }
                            }

                            if (!string.IsNullOrEmpty(_propsSettings.RefreshColumnName) && (this.MasterTableView.Columns.FindByUniqueNameSafe(_propsSettings.RefreshColumnName) != null))
                            {
                                foreach (dynamic ctrlManagementButton in rowCurItem[_propsSettings.RefreshColumnName].Controls)
                                {
                                    if (ctrlManagementButton.GetType().GetProperty("TabIndex") != null)
                                        ctrlManagementButton.TabIndex = -1;
                                }
                            }

                            if (!string.IsNullOrEmpty(_propsSettings.ExpandCollapseColumnName) && (this.MasterTableView.Columns.FindByUniqueNameSafe(_propsSettings.ExpandCollapseColumnName) != null))
                            {
                                foreach (dynamic ctrlManagementButton in rowCurItem[_propsSettings.ExpandCollapseColumnName].Controls)
                                {
                                    if (ctrlManagementButton.GetType().GetProperty("TabIndex") != null)
                                        ctrlManagementButton.TabIndex = -1;
                                }
                            }
                        }
                    }
                }
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.Print("Error: " + ex.ToString());
                Exceptions.ProcessModuleLoadException(this, ex);
            }
'           finally
            { base.OnItemDataBound(e); }
        }

[GreenLizzard]

Hi,

I think this will help you:
http://www.telerik.com/help/aspnet-ajax/input-css-width.html
There you can find how to set the width of the texboxes only with CSS.

Regards, Greeny

[J]

The CSS route doesn't always work right if you use most of the built in skins or RadFormStyler even if you add !important tags to them.  That's why we ended up having to take the approach we did.

[Tim]

Same here.  CSS only gets you so far.  It seems that with editors in grids, wrapping them in tables makes more sense because the validators won't end up wrapping to the next line and you can still get your editors to look the full width of the cell.  Even if you play with percentage widths on editors, they never are consistent and the validators end up wrapping below the editor in some scenarios. 

[J]

This was exactly the same experience we had.  It was really frustrating until we said screw it and created our own inherited version of the grid so we could fix some of the issues and force it to behave and style correctly.