Rad Grid

[Nithya Rani]

Hi I was using Rad grid with the custom template.I was facing the alignment issue. I have fixed the width also even though the alignment is differing for the browsers any other ways to do this. Please find the bellow code.

<telerik:RadGrid ID="grdInbound" runat="server" AutoGenerateColumns="false" AllowPaging="true"
                                AllowSorting="True" Width="100%" OnItemCreated="grdInbound_ItemCreated"
                                OnPageIndexChanged="grdInbound_PageIndexChanged" OnItemDeleted="grdInbound_ItemDeleted"
                                OnItemCommand="grdInbound_ItemCommand1" AllowAutomaticDeletes="True">                                
                                <HeaderStyle BorderStyle="Solid" Font-Bold="true" HorizontalAlign="Center" />
                                <ItemStyle HorizontalAlign="Left" Font-Underline="false" />
                                <AlternatingItemStyle HorizontalAlign="Left" Font-Underline="false" />
                                <MasterTableView CommandItemDisplay="Bottom">
                                    <Columns>
                                        <telerik:GridTemplateColumn HeaderText="Line" UniqueName="LINE_NUMBER" DataField="LINE_NUMBER">
                                            <ItemStyle HorizontalAlign="Left" Width="4%" />
                                            <HeaderStyle Width="4%" Wrap="true" />
                                            <ItemTemplate>
                                                <asp:Label ID="lblSRNo" runat="server" ReadOnly="true" Text='<%# DataBinder.Eval (Container.DataItem, "LINE_NUMBER") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderText="Product" UniqueName="OrderNumber" DataField="PRODUCT_CODE">
                                            <ItemStyle HorizontalAlign="Left" Width="11%" />
                                            <HeaderStyle Width="11%" Wrap="true" />
                                            <ItemTemplate>
                                                <asp:LinkButton ID="lnkOrderNumber" runat="server" OnClick="lnkOrderNumber_Click"
                                                    Text='<%# DataBinder.Eval(Container.DataItem, "PRODUCT_CODE") %>' ValidationGroup='<%# DataBinder.Eval(Container.DataItem, "SRORD_DET_ID") %>'>  <%--ValidationGroup='<%# uniquenumber()%>'--%>
                                                </asp:LinkButton>
                                                <asp:Label ID="lblsrorder" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "SRORD_DET_ID") %>'
                                                    Visible="false"></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderText="Description" UniqueName="Description" DataField="PROD_DESC">
                                            <ItemStyle HorizontalAlign="Left" Width="22%" />
                                            <HeaderStyle Width="22%" Wrap="true" />
                                            <ItemTemplate>
                                                <asp:Label ID="lblDescription" runat="server" Text='<%# TrimAndAppendDots(DataBinder.Eval (Container.DataItem, "PROD_DESC")) %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderText="Pallet Size" UniqueName="Pallet_Size" DataField="Pallet_Size">
                                            <ItemStyle HorizontalAlign="Left" Width="7%" />
                                            <HeaderStyle Width="7%" Wrap="true" />
                                            <ItemTemplate>
                                                <asp:Label ID="lblPalletSize" runat="server" ReadOnly="true" Text='<%# DataBinder.Eval (Container.DataItem, "Pallet_Size") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderText="Pack Size" UniqueName="PackSize" DataField="PRODSZ_CD">
                                            <ItemStyle HorizontalAlign="Left" Width="7%" />
                                            <HeaderStyle Width="7%" Wrap="true" />
                                            <ItemTemplate>
                                                <asp:Label ID="lblPackSize" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "PRODSZ_CD") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderText="Quantity" UniqueName="Quantity" DataField="QTTY_ORDERED">
                                            <ItemStyle HorizontalAlign="Right" Width="7%" />
                                            <HeaderStyle Width="7%" Wrap="true" />
                                            <ItemTemplate>
                                                <asp:Label ID="lnkQuantity" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "QTTY_ORDERED") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderText="UOM" UniqueName="UOM" DataField="PACKSHORT_DESC">
                                            <ItemStyle HorizontalAlign="Left" Width="3%" />
                                            <HeaderStyle Width="3%" Wrap="true" />
                                            <ItemTemplate>
                                                <asp:Label ID="lnkUOM" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "PACKSHORT_DESC") %>'></asp:Label>
                                                <asp:Label ID="lnkUOMHidden" runat="server" Visible="false" Text='<%# DataBinder.Eval(Container.DataItem, "PACKSIZE_ID") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderText="Lot Code" UniqueName="LotCode" DataField="lot_code">
                                            <ItemStyle HorizontalAlign="Left" Width="12%" />
                                            <HeaderStyle Width="12%" Wrap="true" />
                                            <ItemTemplate>
                                                <asp:Label ID="lblLotCode" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "lot_code") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderText="Expiration Date" UniqueName="ExpirationDate"
                                            DataField="EXP_DT">
                                            <ItemStyle HorizontalAlign="Left" Width="10%" />
                                            <HeaderStyle Width="10%" Wrap="true" />
                                            <ItemTemplate>
                                                <asp:Label ID="lblExpirationDate" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "EXP_DT") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderText="Status" UniqueName="Status" DataField="STATUS">
                                            <ItemStyle HorizontalAlign="Left" Width="4%" />
                                            <HeaderStyle Width="4%" Wrap="true" />
                                            <ItemTemplate>
                                                <asp:Label ID="lblStatus" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "STATUS") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderText="Available Qty" UniqueName="AvailableQty"
                                            DataField="QTTY_AVAILABLE">
                                            <ItemStyle HorizontalAlign="Right" Width="8%" />
                                            <HeaderStyle Width="8%" Wrap="true" />
                                            <ItemTemplate>
                                                <asp:Label ID="lnkAvailableQty" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "QTTY_AVAILABLE") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>  
                                         <telerik:GridTemplateColumn UniqueName="DeleteColumn" >
                                          <ItemStyle HorizontalAlign="Right" Width="3%" CssClass="MyImageButton"/>
                                            <HeaderStyle Width="3%" />
                                            <ItemTemplate>
                                                <asp:ImageButton ID="imgDelete" runat="server" CssClass="MyImageButton" ImageUrl="~/images/delete_icon.png"
                                                 CommandArgument="SRORD_DET_ID" CommandName="Delete" OnClientClick='<%# FormatMessage(Eval("PRODUCT_CODE") as string) %>'
                                            Text="Delete" />
                                            </ItemTemplate>                                          
                                        </telerik:GridTemplateColumn>                                  
                                        <%--<telerik:GridButtonColumn ButtonType="ImageButton" CommandArgument="SRORD_DET_ID"
                                            ConfirmTextFields="PRODUCT_CODE" ConfirmTextFormatString="Are you sure want to delete details for Product Code {0}?"
                                            CommandName="Delete" Text="Delete" UniqueName="DeleteColumn" Visible="false">
                                            <HeaderStyle Width="3%" />
                                            <ItemStyle HorizontalAlign="Center" Width="3%" CssClass="MyImageButton" />
                                        </telerik:GridButtonColumn>--%>
                                    </Columns>
                                    <CommandItemTemplate>
                                        <table cellpadding="0" cellspacing="2px" width="100%">
                                            <tr align="left">
                                                <td width="4%"  align="left">
                                                    <telerik:RadTextBox ID="txtSRNo" runat="server" ReadOnly="true" Width="85%">
                                                    </telerik:RadTextBox>
                                                </td>
                                                <td align="left" width="11%" style="padding-left: 0px;">
                                                    <table cellpadding="0" cellspacing="0" width="95%">
                                                        <tr align="left">
                                                            <td align="left" width="85%">
                                                                <asp:TextBox ID="txtOrdNumGrid" runat="server" Width="91%" AutoPostBack="true" OnTextChanged="txtOrdNumGrid_OnTextChanged"
                                                                    TabIndex="14">
                                                                </asp:TextBox>
                                                            </td>
                                                            <td align="left" valign="middle" width="5%">
                                                                <asp:Image ID="imgOrdNumGrid" runat="server" Height="17px" ImageUrl="~/images/PopupButtonImage.bmp"
                                                                    Width="17px" ImageAlign="Right" TabIndex="15" />
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td width="22%" style="padding-left: 2px;" align="left">
                                                    <telerik:RadTextBox ID="txtDescGrid" runat="server" Width="95%" ReadOnly="true"
                                                        TabIndex="16">
                                                    </telerik:RadTextBox>
                                                </td>
                                                <td width="7%" style="padding-left: 0px;" align="left">
                                                    <telerik:RadTextBox ID="txtPalletSizeGrid" runat="server" Width="90%" ReadOnly="true"
                                                        TabIndex="17">
                                                    </telerik:RadTextBox>
                                                </td>
                                                <td width="7%" style="padding-left: 0px;" align="left">
                                                    <telerik:RadTextBox ID="txtPackSizeGrid" runat="server"  Width="90%" ReadOnly="true"
                                                        TabIndex="17">
                                                    </telerik:RadTextBox>
                                                </td>
                                                <td width="6%" style="padding-left: 1px;" align="left">
                                                    <telerik:RadTextBox ID="txtQuantityGrid" runat="server" Width="90%" onkeypress="return numbersonly(event)"
                                                        TabIndex="18" FocusedStyle-HorizontalAlign="Right" DisabledStyle-HorizontalAlign="Right"
                                                        EmptyMessageStyle-HorizontalAlign="Right" EnabledStyle-HorizontalAlign="Right"
                                                        HoveredStyle-HorizontalAlign="Right" ReadOnlyStyle-HorizontalAlign="Right">
                                                    </telerik:RadTextBox>
                                                </td>
                                                <td align="left" width="5%" style="padding-left: 1px;">
                                                    <telerik:RadComboBox ID="ddlUOMGrid" runat="server" Width="95%" TabIndex="19">
                                                    </telerik:RadComboBox>
                                                </td>
                                                <td align="left" width="12%" style="padding-left: 1px;">
                                                    <telerik:RadComboBox ID="ddlLotCodeGrid" runat="server" Width="97%" AllowCustomText="true"
                                                        TabIndex="20" EnableViewState="true" MarkFirstMatch="true" MaxLength="20" EnableVirtualScrolling="true">
                                                    </telerik:RadComboBox>
                                                </td>
                                                <td align="left" width="10%" style="padding-left: 0px;">
                                                    <telerik:RadDatePicker ID="rdpExpDt" runat="server"  Width="99%" BorderColor="#688CAF"
                                                        TabIndex="21" Calendar-BorderColor="#688caf" DateInput-BorderColor="#688caf"
                                                        DatePopupButton-BorderColor="#688caf" Culture="en-US">
                                                        <DateInput BorderColor="#688CAF" DataFormatString="<%$Appsettings:dateformat%>">
                                                        </DateInput>
                                                        <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x"
                                                            BorderColor="#688CAF">
                                                        </Calendar>
                                                        <DatePopupButton ImageUrl="" HoverImageUrl="" BorderColor="#688CAF"></DatePopupButton>
                                                    </telerik:RadDatePicker>
                                                </td>
                                                <td align="left" width="6%" style="padding-left: 0px;">
                                                    <telerik:RadComboBox ID="ddlStatusGrid" runat="server" Width="90%" TabIndex="22">
                                                    </telerik:RadComboBox>
                                                </td>
                                                <td align="left" width="8%" style="padding-left: 0px;">
                                                    <telerik:RadTextBox ID="txtAvailQtyGrid" runat="server" Width="80%" ReadOnly="true"
                                                        TabIndex="23" FocusedStyle-HorizontalAlign="Right" DisabledStyle-HorizontalAlign="Right"
                                                        EmptyMessageStyle-HorizontalAlign="Right" EnabledStyle-HorizontalAlign="Right"
                                                        HoveredStyle-HorizontalAlign="Right" ReadOnlyStyle-HorizontalAlign="Right">
                                                    </telerik:RadTextBox>
                                                </td>
                                                 <td align="left" width="3%" style="padding-left: 0px;">
                                                </td>
                                            </tr>
                                        </table>
                                    </CommandItemTemplate>
                                </MasterTableView>                              
                            </telerik:RadGrid>

[Pavlina]

Hi Nithya,

Most probably the alignment issue is caused by ItemStyle-Width property -  note that it is not recommended to use ItemStyle-Width for setting columns width. You should use only HeaderStyle-Width to specify widths for the columns. Also set TableLayout property of MasterTableView to Fixed and let me know about the result.

Regards,
Pavlina
the Telerik team

[Nithya Rani]

Hi Pavlina,

Thanks for your replay. Still i was getting the same problem.

Regards,
Nithya

[Pavlina]

Hi,

Can you provide a live url where the alignment issue can be observed? We will inspect it locally and advice you further.

Greetings,
Pavlina
the Telerik team

[Nithya Rani]

Hi Pavlin
       I have solved the issue. I removed the table which is Inside my <CommandItemTemplate> its working fine. Inside the <CommandItemTemplate> need to give only <tr> and <td>. Because inside <CommandItemTemplate>  <table> tag will create by default.

Thanks
Nithya