Grid control Alignment and Combo Textfield height

[Ramesh kumar Kuppusamy]

I am having the following Isuues while using RAD Grid & RAD Combo

1. How to remove the space between grid columns. (Shown in attached Image 'which are marked in red color').

2. Is it possible to reduce the RAD Combo TextBox height (Shown in attached Image).

<telerik:RadGrid ID="RadGrid1" runat="server" CellPadding="0" AutoGenerateColumns="False"
                            GridLines="None" ShowHeader="False" AllowMultiRowEdit="True" CellSpacing="0"
                            TabIndex="19">
                            <MasterTableView EditMode="InPlace">
                                <Columns>
                                    <telerik:GridTemplateColumn ItemStyle-Width="155px">
                                        <ItemTemplate>
                                            <telerik:RadComboBox ID="tcbNumberType" runat="server" Width="153px" Height="13px">
                                            </telerik:RadComboBox>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn ItemStyle-Width="30px">
                                        <ItemTemplate>
                                            <asp:TextBox runat="server" ID="txtAreacode" Width="27px" Height="13px"></asp:TextBox>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn ItemStyle-Width="58px">
                                        <ItemTemplate>
                                            <telerik:RadTextBox runat="server" ID="ttxtPhoneNo" Width="56px" Height="13px">
                                            </telerik:RadTextBox>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn ItemStyle-Width="10px">
                                        <ItemTemplate>
                                            <asp:Label runat="server" ID="lblExt" Text="x" Width="7px"></asp:Label>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn ItemStyle-Width="46px">
                                        <ItemTemplate>
                                            <telerik:RadTextBox runat="server" ID="ttxtExtension" Width="44px" Height="13px">
                                            </telerik:RadTextBox>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn ItemStyle-Width="45px" HeaderStyle-Width="45px">
                                        <ItemTemplate>
                                            <asp:Label runat="server" ID="lblEmail" Text="E-mail :" Width="45px"></asp:Label>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn ItemStyle-Width="235px">
                                        <ItemTemplate>
                                            <telerik:RadTextBox runat="server" ID="ttxtEmailAddress" Width="233px" Height="13px">
                                            </telerik:RadTextBox>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                </Columns>
                            </MasterTableView>

        </telerik:RadGrid>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim dtContact As DataTable = New DataTable("Contact")
        Dim row As DataRow = Nothing
        ' add columns
        dtContact.Columns.Add("id", Type.GetType("System.Int32"))
        dtContact.Columns.Add("NumberType", Type.GetType("System.String"))
        dtContact.Columns.Add("AreaCode", Type.GetType("System.String"))
        dtContact.Columns.Add("PhoneNumber", Type.GetType("System.String"))
        dtContact.Columns.Add("Extension", Type.GetType("System.String"))
        dtContact.Columns.Add("EmailAddress", Type.GetType("System.String"))

        ' set PrimaryKey
        dtContact.Columns("id").Unique = True
        dtContact.Rows.Add(1, "", "", "", "", "")
        dtContact.Rows.Add(2, "", "", "", "", "")

        RadGrid1.DataSource = dtContact
        RadGrid1.DataBind()

    End Sub

    Protected Sub Page_PreRender1(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
        If Not Page.IsPostBack Then
            For Each item As GridDataItem In RadGrid1.Items
                item.Edit = True
            Next
            RadGrid1.Rebind()
        End If

    End Sub

[Mira]

Hello Ramesh,

Straight to your questions:

1. To achieve the desired look, please set higher width to the textboxes in the ItemTemplates of the columns or reduce the width of the grid.
2. Please take a look at the Tutorial: Change the height of the input element to see how to change the vertical dimensions (input height) of RadComboBox.

I hope this helps.

Greetings,
Mira
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ramesh kumar Kuppusamy]

Hi mira

Even after reducing the grid width, the space between the grid columns are not reduced.
In my senario, the textbox witdh are constant(predefined), so I shouldnot increase the width of the textbox.

Expecting your suggestion

[Mira]

Hello Ramesh,

To achieve the desired look you could try to remove or decrease the padding:

<style type="text/css">
    .RadGrid_Default .rgMasterTable .rgRow td,
    .RadGrid_Default .rgMasterTable .rgAltRow td,
    .RadGrid_Default .rgMasterTable .rgEditRow td,
    .RadGrid_Default .rgMasterTable .rgFooter td,
    .RadGrid_Default .rgMasterTable .rgFilterRow td,
    .RadGrid_Default .rgMasterTable .rgHeader,
    .RadGrid_Default .rgMasterTable .rgResizeCol,
    .RadGrid_Default .rgMasterTable .rgGroupHeader td
    {
        padding: 0;
    }
</style>

I hope this helps.

Sincerely yours,
Mira
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ramesh kumar Kuppusamy]

Hi Mira

Thanks for your Code, it works fine.