This is a migrated thread and some comments may be shown as answers.

Rad Grid

4 Answers 45 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nithya Rani
Top achievements
Rank 1
Nithya Rani asked on 09 Feb 2012, 12:00 PM
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>

4 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 14 Feb 2012, 02:49 PM
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
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Nithya Rani
Top achievements
Rank 1
answered on 17 Feb 2012, 07:17 AM
Hi Pavlina,

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

Regards,
Nithya
0
Pavlina
Telerik team
answered on 21 Feb 2012, 10:51 PM
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
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Nithya Rani
Top achievements
Rank 1
answered on 28 Feb 2012, 05:37 AM
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
Tags
Grid
Asked by
Nithya Rani
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Nithya Rani
Top achievements
Rank 1
Share this question
or