[Solved] Styling Grid GridNumericColumnEditor with CSS

[Byron Lai]

I have a grid that I am using as a shopping cart with an editable quantity column. With items are in the cart, the quantity column is a 

GridNumericColumnEditor 

 

with all rows always in edit mode. The problem is that only the first row gets the width setting but the other rows ignore it. I tried to change the width with headerstyle, itemstyle, customeditorID, css but nothing seems to work. The class applied to the numeric box is "riTextBox riEnabled" and the rows that don't change defaults to style="width:125px;" How can I make all column the applied width of "col.NumericTextBox.Width = Unit.Pixel(21);" ?

 

<

 

telerik:GridNumericColumn DataField="Quantity" HeaderText="Quantity"

 

 

UniqueName="Quantity" HeaderStyle-Width="40px" ItemStyle-Width="40px" MaxLength="3" />

 

 

<td style="width:40px;"><span id="grdOrderCart_ctl00_ctl05_RNTB_Quantity_wrapper" class="RadInput RadInput_Default" style="white-space:nowrap;"><input type="text" value="999" maxlength="3" id="grdOrderCart_ctl00_ctl05_RNTB_Quantity_text" name="grdOrderCart_ctl00_ctl05_RNTB_Quantity_text" class="riTextBox riEnabled" style="width:125px;" /><input style="visibility:hidden;margin:-18px 0 0 0;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="grdOrderCart_ctl00_ctl05_RNTB_Quantity" class="rdfd_" value="999" type="text" /><input style="visibility:hidden;margin:-18px 0 0 0;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="grdOrderCart_ctl00_ctl05_RNTB_Quantity_Value" class="rdfd_" name="grdOrderCart$ctl00$ctl05$RNTB_Quantity" value="999" type="text" /><input id="grdOrderCart_ctl00_ctl05_RNTB_Quantity_ClientState" name="grdOrderCart_ctl00_ctl05_RNTB_Quantity_ClientState" type="hidden" /></span></td>

 

protected void grdOrderCart_CreateColumnEditor(object sender, GridCreateColumnEditorEventArgs e)

 

{

 

if (e.Column.HeaderText == "Quantity")

 

{

e.Column.ItemStyle.Width =

Unit.Pixel(21);

 

 

GridNumericColumnEditor col = e.ColumnEditor as GridNumericColumnEditor;

 

col.NumericTextBox.Width =

Unit.Pixel(21);

 

col.NumericTextBox.CssClass =

"QuantityBox";

 

 

//e.ColumnEditor = new GridNumericColumnEditor(e.gr

 

}

}

[Princy]

Hello Byron,

Try setting the width of the NumericTextBox in the ItemCreated event as shown below:
c#:

 protected void m_radRecipientsGrid_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem editItem = (GridEditableItem)e.Item;
            GridNumericColumnEditor editor = (GridNumericColumnEditor)editItem.EditManager.GetColumnEditor("QuantityColumnUniqueName");
            editor.NumericTextBox.Width = Unit.Pixel(21);

        }
    }

Hope this helps..
Princy.