Grid height problems again

[Missing User]

I'm struggling to set 100% height on a grid. I've seen many threads open on this subject and a few code samples too but they are all too simple.

The main issue is that there is a <div> element generated (usually has an id of the form ...._GridData) that has an inline style like this:

OVERFLOW: auto; WIDTH: 100%; HEIGHT: 10px

and thus the content will always be in a 10 pixel high box. Even if I set the Height attribute of the grid to something fixed that div stays 10 pixel high and only the lower pager area grows in height so that the grid will respect the given height.

The question is why does that div has that hardcoded height? What would be the purpose of having such a default anyway?

[Dimo]

Hello Gabriel,

The height of 10px is recalculated and changed client-side, so it doesn't matter.

If a RadGrid with scrolling has its Height set to 100%, but the control does not expand, then the parent element of RadGrid does not have an explicit height, which is a requirement, according to the W3C HTML/CSS specification. The rule applies recursively, if the parent element has its height set in percent.

If the parent element of RadGrid has a height specified in pixels, and RadGrid still does not expand, this means that it is ajaxified and the update panel's <div> element does not have a height set explicitly. If this is the case, please refer to:

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx



Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Craig]

We have this problem as well, but it happens even if you set an explicit height on the grid, and it happens intermittently.  The grid is inside a multipage and the PageView also has an explicit height set, so it's not being caused by the container not having an explicit height.

The height is always fine when the page loads, the problem only occurs after an AjaxManager request, but not every time, even when all parameters are the same.  We currently have a workaround that explicitly goes in and clears the inline height=10px after every AjaxManager request.

[Dimo]

Hello Craig,

You should be able to do without this workaround. Please make sure that all nested RadGrid parents have an explicit height set, until an element with a height in pixels is reached.

You can use Firebug in order to discover which element is missing its height, when the problem is reproduced.

Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Craig]

So is it not sufficient to set an explicit height for the RadGrid itself?

In any case the grid, the PageView it is contained in and the MultiPage that contains the PageView all have an explicit height set (290px).  Do I need to set an explicit height on the container of the MultiPage as well (a table cell)?

[Dimo]

Hello Craig,

According to the CSS specification, heights set in percentage are calculated with respect to the height of the containing element. This rule applies recursively, if you have a series of nested elements with heights in percent.

However, if you have set height of 290px to RadGrid, then your case is different. Please provide a runnable sample, which reproduces the problem, so that we can investigate locally.

Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mark]

We're being hit by the same bug. We have a fixed height grid within a tabstrip. Each tab contains a different grid. As you flip through the tabs GridDataDiv_DomainGrid is not always recalculated correctly. It usually ends up at 10px. As the previous posted did we have to inject JavaScript to manually set this element to the correct height.

I'll include a code snipper below. When you flip from pageview1 to pageview2 the bug hits and the grid shrinks as GridDataDiv_DomainGrid doesn't recalculate correctly.

  <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
            <telerik:RadPageView ID="RadPageView1" runat="server" Visible="true">
                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <telerik:RadGrid Width="830px" Height="224px" ID="rGridAddress" runat="server" EnableEmbeddedSkins="false"
                            Skin="<%#gridSkin %>" AutoGenerateColumns="False" GridLines="None" OnNeedDataSource="rGridAddress_NeedDataSource"
                            OnUpdateCommand="rGridAddress_UpdateCommand" AutoGenerateDeleteColumn="true"
                            OnDeleteCommand="rGridAddress_DeleteCommand" OnInsertCommand="rGridAddress_InsertCommand"
                            OnItemCommand="rGridAddress_ItemCommand" AllowSorting="true" AllowPaging="true"
                            PageSize="<%#gridPageSize %>">
                            <PagerStyle NextPageText="Next" PrevPageText="Prev" Mode="NextPrev" AlwaysVisible="true">
                            </PagerStyle>
                            <MasterTableView DataKeyNames="Id" EditMode="InPlace" CommandItemDisplay="Top">
                                <CommandItemTemplate>
                                    <div class="GridHeader">
                                        <img src="http://beta.pacificonline.com/images/icons/add_16px.png" />
                                        <asp:LinkButton ID="btnAdd" EnableViewState="false" runat="server" CommandName="InitInsert"
                                            Enabled='<%# !rGridAddress.MasterTableView.IsItemInserted && rGridZone.MasterTableView.Items.Count != 0 %>'
                                            Text="Add Record" OnClientClick="cur_edit_grid=FindGrid('Address');" />
                                        <img src="http://beta.pacificonline.com/images/icons/delete_16px.png" />
                                        <asp:LinkButton ID="btnDelSel" EnableViewState="false" runat="server" CommandName="DeleteSelected"
                                            Enabled='<%# !rGridAddress.MasterTableView.IsItemInserted && rGridZone.MasterTableView.Items.Count != 0 %>'
                                            OnClientClick='javascript:return ConfirmDeletion("Address");' Text="Delete Records" />
                                    </div>
                                </CommandItemTemplate>
                                <Columns>
                                    <%--Data Cols Start--%>
                                    <%--Data Cols End--%>
                                    <telerik:GridTemplateColumn>
                                        <%-- ChkCol Style--%>
                                        <HeaderStyle Width="33px" />
                                        <ItemStyle Width="33px" HorizontalAlign="Center" />
                                        <%-- ############ --%>
                                        <EditItemTemplate>
                                            &nbsp;
                                        </EditItemTemplate>
                                        <ItemTemplate>
                                            <asp:CheckBox ID="ckClientRowSelect" runat="server" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridBoundColumn DataField="Id" Display="False" EmptyDataText="&amp;nbsp;"
                                        HeaderText="Id" UniqueName="IdCol">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridTemplateColumn DataField="HostName" SortExpression="HostName" HeaderText="Host Name"
                                        UniqueName="HostNameCol">
                                        <EditItemTemplate>
                                            <asp:TextBox ID="HostNameTextBox" runat="server" Text='<%# Bind("HostName") %>' MaxLength="64"></asp:TextBox>
                                            <asp:RegularExpressionValidator EnableViewState="false" ID="RegexValidator1" runat="server"
                                                Display="None" ErrorMessage="Error: 'Host' value is invalid." ValidationExpression="^(?:\w{1,64}|\*)$"
                                                ControlToValidate="HostNameTextBox" />
                                        </EditItemTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="HostNameLabel" runat="server" Text='<%# string.IsNullOrEmpty((string)Eval("HostName")) ?  "&nbsp;" : Eval("HostName")%>'></asp:Label>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn DataField="IPAddress" SortExpression="IPAddress" HeaderText="IP Address"
                                        UniqueName="IPAddressCol">
                                        <HeaderStyle Width="200px" />
                                        <ItemStyle Width="200px" />
                                        <EditItemTemplate>
                                            <asp:TextBox ID="IPAddressTextBox" runat="server" Text='<%# Bind("IPAddress") %>'
                                                MaxLength="15"></asp:TextBox>
                                            <asp:RequiredFieldValidator ID="ReqValidator2" EnableViewState="false" runat="server"
                                                ErrorMessage="Error: 'IP' value is required." Display="None" ControlToValidate="IPAddressTextBox"></asp:RequiredFieldValidator>
                                            <asp:RegularExpressionValidator ID="RegexValidator2" EnableViewState="false" runat="server"
                                                ErrorMessage="Error: 'IP' value is invalid." ValidationExpression="^(?:(?:25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){3}(?:25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})$"
                                                ControlToValidate="IPAddressTextBox" Display="None"></asp:RegularExpressionValidator>
                                        </EditItemTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="IPAddressLabel" runat="server" Text='<%# Eval("IPAddress") %>'></asp:Label>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridBoundColumn DataField="LastModified" EmptyDataText="&amp;nbsp;" HeaderText="Last Modified Date"
                                        UniqueName="LastModifiedCol" DataFormatString="{0:G}" DataType="System.DateTime"
                                        ReadOnly="True">
                                        <HeaderStyle Width="200px" />
                                        <ItemStyle Width="200px" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridEditCommandColumn>
                                        <HeaderStyle Width="70px" />
                                        <ItemStyle Width="70px" HorizontalAlign="Center" />
                                    </telerik:GridEditCommandColumn>
                                </Columns>
                            </MasterTableView>
                            <ClientSettings>
                                <Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>
                            </ClientSettings>
                        </telerik:RadGrid>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView2" runat="server" Visible="true">
                <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <telerik:RadGrid Width="830px" Height="224px" ID="rGridMailExchange" Enabled="true"
                            runat="server" EnableEmbeddedSkins="false" Skin="<%#gridSkin %>" AutoGenerateColumns="False"
                            AutoGenerateDeleteColumn="true" GridLines="None" OnDeleteCommand="rGridMailExchange_DeleteCommand"
                            OnInsertCommand="rGridMailExchange_InsertCommand" OnItemCommand="rGridMailExchange_ItemCommand"
                            OnNeedDataSource="rGridMailExchange_NeedDataSource" OnUpdateCommand="rGridMailExchange_UpdateCommand"
                            AllowSorting="true" AllowPaging="true" PageSize="<%#gridPageSize %>">
                            <PagerStyle NextPageText="Next" PrevPageText="Prev" Mode="NextPrev" AlwaysVisible="true">
                            </PagerStyle>
                            <MasterTableView CommandItemDisplay="Top" DataKeyNames="Id" EditMode="InPlace">
                                <CommandItemTemplate>
                                    <div class="GridHeader">
                                        <img src="http://beta.pacificonline.com/images/icons/add_16px.png" />
                                        <asp:LinkButton ID="btnAdd" EnableViewState="false" runat="server" CommandName="InitInsert"
                                            Enabled='<%# !rGridMailExchange.MasterTableView.IsItemInserted && rGridZone.MasterTableView.Items.Count != 0 %>'
                                            Text="Add Record" OnClientClick="cur_edit_grid=FindGrid('MailExchange');" />
                                        <img src="http://beta.pacificonline.com/images/icons/delete_16px.png" />
                                        <asp:LinkButton ID="btnDelSel" EnableViewState="false" runat="server" CommandName="DeleteSelected"
                                            Enabled='<%# !rGridMailExchange.MasterTableView.IsItemInserted && rGridZone.MasterTableView.Items.Count != 0 %>'
                                            OnClientClick='javascript:return ConfirmDeletion("MailExchange");' Text="Delete Records" />
                                    </div>
                                </CommandItemTemplate>
                                <Columns>
                                    <telerik:GridTemplateColumn>
                                        <%-- ChkCol Style--%>
                                        <HeaderStyle Width="33px" />
                                        <ItemStyle Width="33px" HorizontalAlign="Center" />
                                        <%-- ############ --%>
                                        <EditItemTemplate>
                                            &nbsp;
                                        </EditItemTemplate>
                                        <ItemTemplate>
                                            <asp:CheckBox ID="ckClientRowSelect" runat="server" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridBoundColumn DataField="Id" Display="False" EmptyDataText="&amp;nbsp;"
                                        HeaderText="Id" UniqueName="IdCol" ReadOnly="true">
                                    </telerik:GridBoundColumn>
                                    <%--Data Cols Start--%>
                                    <telerik:GridTemplateColumn DataField="HostName" SortExpression="HostName" HeaderText="Host Name"
                                        UniqueName="HostNameCol">
                                        <EditItemTemplate>
                                            <asp:TextBox MaxLength="64" ID="HostNameTextBox" runat="server" Text='<%# Bind("HostName") %>'></asp:TextBox>
                                            <asp:RegularExpressionValidator ID="RegexValidator_HostNameTextBox" EnableViewState="false"
                                                runat="server" ErrorMessage="Error: 'Host' value is invalid." ValidationExpression="^(?:\w{1,64}|\*)$"
                                                ControlToValidate="HostNameTextBox" Display="None"></asp:RegularExpressionValidator>
                                        </EditItemTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="HostNameLabel" runat="server" Text='<%# string.IsNullOrEmpty((string)Eval("HostName")) ?  "&nbsp;" : Eval("HostName")%>'></asp:Label>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn DataField="NameExchange" SortExpression="NameExchange"
                                        HeaderText="MX Server" UniqueName="NameExchangeCol">
                                        <HeaderStyle Width="200" />
                                        <ItemStyle Width="200" />
                                        <EditItemTemplate>
                                            <asp:TextBox MaxLength="253" ID="NameExchangeTextBox" runat="server" Text='<%# Bind("NameExchange") %>'></asp:TextBox>
                                            <asp:RegularExpressionValidator ID="RegexValidator_NameExchangeTextBox" EnableViewState="false"
                                                runat="server" ErrorMessage="Error: 'MX Server' value is invalid." ValidationExpression="^[a-zA-Z0-9]+\-*[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+\-*[a-zA-Z0-9]+)*\.[a-zA-Z0-9]+$"
                                                ControlToValidate="NameExchangeTextBox" Display="None"></asp:RegularExpressionValidator>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" EnableViewState="false"
                                                runat="server" ErrorMessage="Error: 'MX Server' value is required." Display="None"
                                                ControlToValidate="NameExchangeTextBox"></asp:RequiredFieldValidator>
                                        </EditItemTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="NameExchangeLabel" runat="server" Text='<%# Eval("NameExchange")%>'></asp:Label>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn DataField="Preference" SortExpression="Preference" HeaderText="Priority"
                                        UniqueName="PreferenceCol">
                                        <HeaderStyle Width="60px" HorizontalAlign="Center" />
                                        <ItemStyle Width="60px" HorizontalAlign="Center" />
                                        <EditItemTemplate>
                                            <asp:TextBox MaxLength="4" ID="PreferenceTextBox" runat="server" Text='<%# Bind("Preference") %>'
                                                Width="40"></asp:TextBox>
                                            <asp:RegularExpressionValidator ID="RegexValidator_PreferenceTextBox" EnableViewState="false"
                                                runat="server" ErrorMessage="Error: 'Priority' value is invalid." ValidationExpression="^\d{1,4}$"
                                                ControlToValidate="PreferenceTextBox" Display="None"></asp:RegularExpressionValidator>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator_PreferenceTextBox" EnableViewState="false"
                                                runat="server" ErrorMessage="Error: 'Priority' value is required." Display="None"
                                                ControlToValidate="PreferenceTextBox"></asp:RequiredFieldValidator>
                                            <asp:RangeValidator ID="RangeValidator_PreferenceTextBox" runat="server" EnableViewState="false"
                                                ErrorMessage="Error: 'Priority' value must be between 0 and 65535." ControlToValidate="PreferenceTextBox"
                                                Display="None" MinimumValue="0" MaximumValue="65535"></asp:RangeValidator>
                                        </EditItemTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="PreferenceLabel" runat="server" Text='<%# Eval("Preference")%>'></asp:Label>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <%--Data Cols End--%>
                                    <telerik:GridBoundColumn DataField="LastModified" EmptyDataText="&amp;nbsp;" HeaderText="Last Modified Date"
                                        UniqueName="LastModifiedCol" DataType="System.DateTime" ReadOnly="True" DataFormatString="{0:G}">
                                        <HeaderStyle Width="200px" />
                                        <ItemStyle Width="200px" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridEditCommandColumn>
                                        <HeaderStyle Width="70px" />
                                        <ItemStyle Width="70px" HorizontalAlign="Center" />
                                    </telerik:GridEditCommandColumn>
                                </Columns>
                            </MasterTableView>
                            <ClientSettings>
                                <Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>
                            </ClientSettings>
                        </telerik:RadGrid>
                    </ContentTemplate>
                </asp:UpdatePanel>

[Dimo]

Hi Mark,

In your case the problem is different - RadGrid is not able to resize automatically (required when using static headers) when it is inside an invisible container (the inactive page view), because in this case all widths and heights are zero and no calculations can be made.

The solution is to subscribe to the tabstrip's OnClientTabSelected event, find the RadGrid inside the page view and call the repaint() method manually:

<telerik:RadTabStrip ID="RadTabStrip" runat="server" OnClientTabSelected="adjustGrid">

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">

function adjustGrid()
{
    var grid = $find("<%= rGridAddress.ClientID %>");
    if (grid)
    {
         grid.repaint();
    }
}

</script>
</telerik:RadCodeBlock>


Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Mark]

Perfect! Problem solved. Thanks a lot!

[Simon Damberger]

This also fixed a problem I was having with a couple of RadGrid controls embedded in a RadTab control. Thanks!

[mfazzio]

Hi. I had the same problem as Craig. When I put height = "100%" to the grid, my GridData section had a height="10px"
I discovered that my grid was within an updatePanel autogenerated (RadGrid1Panel) , that happened because I was using Ajax.  And to resolve the problem I had to change its height  to "100%"
I found this post that explained better: http://www.telerik.com/community/forums/aspnet-ajax/grid/problems-using-radgrid-inside-radsplitter.aspx
"Since RadGrid is ajaxified, it is wrapped inside an update panel, which is a <div> element with no styles... In order to fix this vertical expansion problem when RadGrid is ajaxified, you need to add a height style to the update panel. Unfortunately update panels do not offer any means to control their height. You can set a height with CSS, however, you will need the client ID of the update panel. Here is an example, which demonstrates how to obtain the client ID of an update panel and set a 100% height style with CSS:
http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx"

Regards.
Margarita

[Kiranmayee]

Hi,

I am using a web user control. It worked fine till I changed the page size to 200. Now, when I edit a row the scroll bar jumps down. Here is by radgrid in radstrip. Also, below is the web user control. The problem is on the rgLocs.

 

ASPX:

<div >
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="1" Skin="Black"  ClickSelectedTab="true" >
            <Tabs>
                <telerik:RadTab runat="server" PageViewID="PV_LOCINFO" Selected="True" SelectedIndex="1" Text="LOC INFO">
                </telerik:RadTab>
                <telerik:RadTab runat="server" PageViewID="PV_LOCHISTORY" SelectedIndex="0" Text="LOC LOG HISTORY">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" BackColor="Transparent" BorderStyle="None" SelectedIndex="1" Width="100%">
            <telerik:RadPageView ID="PV_LOCINFO" runat="server" BackColor="Black" ForeColor="#FF3300" Selected="True" Width="100%">
                <asp:Panel ID="Panel1" runat="server">
                    <span style="font-size: 9pt; color: #ffffff">
                     </span>
                </asp:Panel>
                <div  >
            <telerik:RadGrid ID="rgLocs" AllowAutomaticUpdates="false" AutoGenerateColumns="false" AllowSorting="TRUE" ShowHeaderWhenEmpty="true" EnableEmbeddedskins="True" GridLines="None" 
                        runat="server" Skin="Black" ShowFooter="True"   Width="99%"  AllowPaging="True" pagesize ="200" AllowFilteringByColumn="True" EnableLinqExpressions="false"
                onneeddatasource="rgLocs_NeedDataSource"  >
                <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Black">
                </HeaderContextMenu>
                <ClientSettings AllowColumnsReorder="True"  EnableRowHoverStyle="True"   >
                        <Scrolling  UseStaticHeaders="True"    AllowScroll="true" SaveScrollPosition="true" ScrollHeight="650px"></Scrolling>                      
                        <Selecting AllowRowSelect="True"  EnableDragToSelectRows="true"  />
                </ClientSettings>
                <MasterTableView DataKeyNames="LOC_ID, LOC_TYPE, SYS_ID, STATUS" AutoGenerateColumns="False" DataSourceID=""  CommandItemDisplay="Top" InsertItemPageIndexAction="ShowItemOnCurrentPage">
                    <CommandItemSettings AddNewRecordText="Add New Location" />
                    
                    <EditFormSettings UserControlName="DBTOOLS_EDITLOCS.ascx" EditFormType="WebUserControl" >
                        <EditColumn UniqueName="EditCommandColumn1">
                        </EditColumn>
                    </EditFormSettings>
                    <PagerStyle  PageSizes="50,100, 150, 200" />
                  <%--<EditFormSettings EditFormType="Template">
                           <FormTemplate>
                               <table>
                                   <tr>
                                       <td>LOC ID:</td>
                                       <td>
                                           <asp:TextBox ID="txtLocID" runat="server" Text='<%# Bind("LOC_ID")%>' MaxLength="10"  />
                                           <asp:RequiredFieldValidator ID="txtLocRFV"  forecolor="Aqua" Runat="server" Display="Dynamic" ControlToValidate="txtLocID" ErrorMessage="LOC ID cannot be empty!" >
                                            </asp:RequiredFieldValidator>
                                            <asp:RegularExpressionValidator id="RegularExpressionValidator8" ControlToValidate="txtLocID" ValidationExpression="^[a-zA-Z0-9]+$" Display="Dynamic" EnableClientScript="true"
                                             ErrorMessage="Please enter AlphaNumeric characters only!" runat="server"/> 
                                       </td>
                                   </tr>
                                   <tr>
                                       <td>LOC TYPE:</td>
                                       <td>
                                           <asp:DropDownList ID="EddlLocType" runat="server" SelectedValue='<%# Bind("LOC_TYPE")%>' BackColor ="White" ForeColor="Black" DataSourceID="SqlDataSource2" DataTextField="LOC_TYPE" DataValueField="LOC_TYPE"
                                                AppendDataBoundItems="true" >
                                               <asp:ListItem Selected="True" Text="Select" Value="">
                                               </asp:ListItem>
                                           </asp:DropDownList>
                                           <asp:RequiredFieldValidator ID="RequiredFieldValidator1"  forecolor="Aqua" Runat="server" Display="Dynamic" ControlToValidate="EddlLocType" ErrorMessage="LOC TYPE cannot be empty!" >
                                           </asp:RequiredFieldValidator>                                        
                                       </td>
                                   </tr>
                                   <tr>
                                       <td>DESCRIPTION:</td>
                                       <td>
                                       <asp:TextBox ID="txtDesc" runat="server" Text='<%# Bind("DESCRIPTION")%>' MaxLength="40" />
                                       <asp:RegularExpressionValidator id="RegularExpressionValidator1" ControlToValidate="txtDesc" ValidationExpression="^[a-zA-Z0-9]+$" Display="Dynamic" EnableClientScript="true"
                                             ErrorMessage="Please enter AlphaNumeric characters only!" runat="server"/> 
                                       </td>
                                   </tr>
                                   <tr>
                                       <td>TRAILER ID:</td>
                                       <td>
                                       <asp:TextBox ID="txtTrailerID" runat="server" Text='<%# Bind("TRAILER_ID")%>' MaxLength="20" />
                                       <asp:RegularExpressionValidator id="RegularExpressionValidator2" ControlToValidate="txtTrailerID" ValidationExpression="^[a-zA-Z0-9]+$" Display="Dynamic" EnableClientScript="true"
                                             ErrorMessage="Please enter AlphaNumeric characters only!" runat="server"/> 
                                           </td>
                                   </tr>
                                   <tr>
                                       <td>ROUTE:</td>
                                       <td>
                                       <asp:TextBox ID="txtRoute" runat="server" Text='<%# Bind("ROUTE")%>' MaxLength="3" />
                                       <asp:RegularExpressionValidator id="RegularExpressionValidator3" ControlToValidate="txtRoute" ValidationExpression="^[a-zA-Z]+$" Display="Dynamic" EnableClientScript="true"
                                             ErrorMessage="Please enter Alphabets only!" runat="server"/> 
                                           </td>
                                   </tr>
                                   <tr>
                                       <td>STATUS:</td>
                                       <td>
                                       <asp:DropDownList ID="ddlStatus" RenderMode="Lightweight" runat="server"  SelectedValue='<%#Bind("STATUS")%>' BackColor ="White" ForeColor="Black">
                                        <Items>
                                        <asp:ListItem Text="Select" Value="" />
                                        <asp:ListItem Text="OPN" Value="OPN" />
                                        <asp:ListItem Text="CLS" Value="CLS" />
                                        </Items>
                                     </asp:DropDownList>
                                           </td>
                                   </tr>
                                   <tr>
                                     <td align="right" colspan="2">
                                     <asp:Button ID="btnUpdate" Text='<%# IIf((TypeOf (Container) Is GridEditFormInsertItem), "Insert", "Update")%>' runat="server"
                                     CommandName='<%# IIf((TypeOf (Container) Is GridEditFormInsertItem), "PerformInsert", "Update")%>'>
                                     </asp:Button>&nbsp;
                                     <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel"></asp:Button>
                                     </td>
                                     </tr>

                               </table>
                           </FormTemplate>
                       </EditFormSettings>--%>

                    <EditFormSettings>
                        <EditColumn CancelImageUrl="Cancel.gif" EditImageUrl="Edit.gif" InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif">
                        </EditColumn>
                    </EditFormSettings>
                    <Columns>
                        <telerik:GridEditCommandColumn  FilterControlAltText="Filter EditCommandColumn column" UniqueName="EDIT" ButtonType="ImageButton" HeaderText="EDIT" EditImageUrl="images/EDIT2.gif">
                                <HeaderStyle ForeColor="WHITE" HorizontalAlign="left" Width="40px" />
                                <ItemStyle  />
                         </telerik:GridEditCommandColumn>
                 
                        <telerik:GridTemplateColumn UniqueName="DELETE" HeaderText="DELETE" Visible="TRUE"  AllowFiltering="false">
                                <ItemTemplate>
                                     <asp:imageButton ButtonType="ImageButton" ID="btnDelete" runat="server" CommandName="DELETE" ImageUrl="images/delete2.gif" OnClientClick="return confirm('Are you certain you want to DELETE this PART?');"
                                        Text="Delete" />
                                 </ItemTemplate>
                                <HeaderStyle ForeColor="WHITE" HorizontalAlign="left" Width="70px" />
                                <ItemStyle /> 
                         </telerik:GridTemplateColumn>                   

                        <telerik:GridTemplateColumn DataField="LOC_ID" DefaultInsertValue="" HeaderText="LOCATION ID" ReadOnly="True"  UniqueName="LOC_ID" Visible="TRUE" 
                            SortExpression="LOC_ID"   FilterControlWidth="60px" AllowFiltering="true"  AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false">
                            <ItemTemplate>
                                      <%#DataBinder.Eval(Container.DataItem, "LOC_ID")%>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="txtLocID" Text='<%# Bind("LOC_ID")%>'  BackColor ="White" ForeColor="Black" runat="server" MaxLength ="50"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="<b>*REQUIRED<b>" ControlToValidate="txtLocID" ForeColor="Aqua">
                                </asp:RequiredFieldValidator>  
                            </EditItemTemplate>
                            <HeaderStyle ForeColor="LIME" HorizontalAlign="LEFT" Width="100px" />
                            <ItemStyle ForeColor="White" HorizontalAlign="LEFT" />
                            <FooterStyle Font-Bold="true" ForeColor="WHITE" HorizontalAlign="LEFT" /> 
                            
                        </telerik:GridTemplateColumn>

                        <telerik:GridTemplateColumn DataField="LOC_TYPE" DefaultInsertValue="" HeaderText="LOCATION TYPE" ReadOnly="True" SortExpression="LOC_TYPE" UniqueName="LOC_TYPE" Visible="True" 
                           FilterControlWidth="60px" AllowFiltering="true"  AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false">
                            <ItemTemplate>
                                      <%#DataBinder.Eval(Container.DataItem, "LOC_TYPE")%>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:DropDownList ID="ddlLocType" Text='<%# Bind("LOC_TYPE")%>'  BackColor ="White" ForeColor="Black" runat="server"  AppendDataBoundItems="true"
                                    DataSourceID="SqlDataSource2" DataTextField="LOC_TYPE" DataValueField="LOC_TYPE" >
                                </asp:DropDownList>
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="<b>*REQUIRED<b>" ControlToValidate="ddlLocType" ForeColor="Aqua">
                                </asp:RequiredFieldValidator>  
                            </EditItemTemplate>
                            <HeaderStyle ForeColor="LIME" HorizontalAlign="LEFT" Width="100px" />
                            <ItemStyle ForeColor="White" HorizontalAlign="LEFT" />
                            <FooterStyle Font-Bold="true" ForeColor="WHITE" HorizontalAlign="LEFT" />
                            <FilterTemplate>
                            <telerik:RadComboBox  ID="RadComboBoxTitle" DataSourceID="SqlDataSource2" DataTextField="LOC_TYPE" DataValueField="LOC_TYPE" Width="60px" AppendDataBoundItems="true" SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("LOC_TYPE").CurrentFilterValue%>'
                                runat="server" OnClientSelectedIndexChanged="TitleIndexChanged" Skin="Black">
                                <Items>
                                    <telerik:RadComboBoxItem Text="All" />
                                </Items>
                            </telerik:RadComboBox>
                            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                <script type="text/javascript">
                                    function TitleIndexChanged(sender, args) {
                                        var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");
                                        tableView.filter("LOC_TYPE", args.get_item().get_value(), "EqualTo");
                                    }
                                </script>
                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                        </telerik:GridTemplateColumn>         
                        
                        <telerik:GridTemplateColumn DataField="DESCRIPTION" DefaultInsertValue="" HeaderText="DESCRIPTION" ReadOnly="True" SortExpression="DESCRIPTION" UniqueName="DESCRIPTION" AllowFiltering="false" Visible="True">
                            <ItemTemplate>
                                      <%#DataBinder.Eval(Container.DataItem, "DESCRIPTION")%>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="txtDescription" Text='<%# Bind("DESCRIPTION")%>'  BackColor ="White" ForeColor="Black" runat="server" MaxLength ="50" DataSourceID="SqlDataSource2" DataTextField="LOC_TYPE" DataValueField="LOC_TYPE"></asp:TextBox>
                            </EditItemTemplate>
                            <HeaderStyle ForeColor="LIME" HorizontalAlign="LEFT" Width="100px" />
                            <ItemStyle ForeColor="White" HorizontalAlign="LEFT" />
                            <FooterStyle Font-Bold="true" ForeColor="WHITE" HorizontalAlign="LEFT" />
                        </telerik:GridTemplateColumn>

                        <telerik:GridTemplateColumn DataField="TRAILER_ID" DefaultInsertValue="" HeaderText="TRAILER ID" ReadOnly="True" SortExpression="TRAILER_ID" UniqueName="TRAILER_ID" AllowFiltering="false" Visible="True">
                            <ItemTemplate>
                                      <%#DataBinder.Eval(Container.DataItem, "TRAILER_ID")%>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="txtTrailerID" Text='<%# Bind("TRAILER_ID")%>'  BackColor ="White" ForeColor="Black" runat="server" MaxLength ="50"></asp:TextBox>
                            </EditItemTemplate>
                            <HeaderStyle ForeColor="LIME" HorizontalAlign="LEFT" Width="100px" />
                            <ItemStyle ForeColor="White" HorizontalAlign="LEFT" />
                            <FooterStyle Font-Bold="true" ForeColor="WHITE" HorizontalAlign="LEFT" />
                        </telerik:GridTemplateColumn>

                        <telerik:GridTemplateColumn DataField="ROUTE" DefaultInsertValue="" HeaderText="SHIP DAY" ReadOnly="True" SortExpression="ROUTE" UniqueName="ROUTE" AllowFiltering="false"  Visible="True">
                            <ItemTemplate>
                                      <%#DataBinder.Eval(Container.DataItem, "ROUTE")%>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="txtRoute" Text='<%# Bind("ROUTE")%>'  BackColor ="White" ForeColor="Black" runat="server" MaxLength ="50"></asp:TextBox>
                            </EditItemTemplate>
                            <HeaderStyle ForeColor="LIME" HorizontalAlign="LEFT"  Width="100px" />
                            <ItemStyle ForeColor="White" HorizontalAlign="LEFT" />
                            <FooterStyle Font-Bold="true" ForeColor="WHITE" HorizontalAlign="LEFT" />
                        </telerik:GridTemplateColumn>

                        <telerik:GridTemplateColumn DataField="DECON_CODE" DefaultInsertValue="" HeaderText="DECON CODE" ReadOnly="True" SortExpression="DECON_CODE" UniqueName="DECON_CODE" AllowFiltering="false"  Visible="True">
                            <ItemTemplate>
                                      <%#DataBinder.Eval(Container.DataItem, "DECON_CODE")%>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="txtRoute" Text='<%# Bind("DECON_CODE")%>'  BackColor ="White" ForeColor="Black" runat="server" MaxLength ="50"></asp:TextBox>
                            </EditItemTemplate>
                            <HeaderStyle ForeColor="LIME" HorizontalAlign="LEFT" Width="100px" />
                            <ItemStyle ForeColor="White" HorizontalAlign="LEFT" />
                            <FooterStyle Font-Bold="true" ForeColor="WHITE" HorizontalAlign="LEFT" />
                        </telerik:GridTemplateColumn>
                                       
                        <telerik:GridTemplateColumn DataField="STATUS" HeaderText="STATUS"  UniqueName ="STATUS" AllowFiltering="false"  HeaderStyle-Width="500px" HeaderStyle-ForeColor="#f7d6bd" SortExpression="STATUS">
                                <ItemTemplate>
                                    <%#DataBinder.Eval(Container.DataItem, "STATUS")%>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:DropDownList ID="ddlStatus" RenderMode="Lightweight" runat="server"  SelectedValue='<%#Bind("STATUS")%>' AppendDataBoundItems="True" >
                                        <Items>
                                        <asp:ListItem Text="" Value="" />
                                        <asp:ListItem Text="OPN" Value="OPN" />
                                        <asp:ListItem Text="CLS" Value="CLS" />
                                        </Items>
                                     </asp:DropDownList>
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>

                        <telerik:GridBoundColumn DataField="SYS_ID"  DefaultInsertValue="" 
                                    HeaderText="SYS ID" ReadOnly="true" SortExpression="SYS_ID" UniqueName="SYS_ID" Visible="FALSE" AllowFiltering="false" >
                                    <HeaderStyle Font-Size="8pt" Width="50px" />
                                    <ItemStyle Font-Size="10pt"  HorizontalAlign="LEFT"  />
                        </telerik:GridBoundColumn>
                        
                    </Columns>
                 
                </MasterTableView>
                <ValidationSettings CommandsToValidate="PerformInsert,Update"></ValidationSettings>
              </telerik:RadGrid>
                    </div>
                </telerik:RadPageView>

Web User Control:

 

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="DBTOOLS_EDITLOCS.ascx.vb" Inherits="DBTOOLS_EDITLOCS" %>
<%@ Import Namespace="Telerik.Web.UI" %>
<table>
    <tr>
        <td>LOC ID:</td>
        <td>
            <%--<Telerik:RadTextBox ID="txtLocID" runat="server" MaxLength="10" Text='<%# Bind("LOC_ID")%>' ReadOnly="true" Skin="Black"/>
            <asp:RequiredFieldValidator ID="txtLocRFV" Runat="server" ControlToValidate="txtLocID" Display="Dynamic" ErrorMessage="LOC ID cannot be empty!" forecolor="Aqua">
                                            </asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator8" runat="server" ControlToValidate="txtLocID" Display="Dynamic" EnableClientScript="true" ErrorMessage="Please enter AlphaNumeric characters only!" ValidationExpression="^[a-zA-Z0-9]+$" />--%>
            <asp:Label ID="lblLocID" runat="server" MaxLength="10" Text='<%# Bind("LOC_ID")%>'  Skin="Black"/>
        </td>
    </tr>
    <tr>
        <td>LOC TYPE:</td>
        <td>
            <Telerik:RadComboBox ID="EddlLocType" runat="server" AppendDataBoundItems="true" Skin="Black" DataSourceID="SqlDataSource2" DataTextField="LOC_TYPE" DataValueField="LOC_TYPE" SelectedValue='<%# Bind("LOC_TYPE")%>' AutoPostBack="true">
                <Items>   
                       <telerik:RadComboBoxItem runat="server" Text="" Value=""/> 
                </Items> 
           <%-- <asp:ListItem Selected="True" Text="Select" Value="">
                                               </asp:ListItem>--%>
            </Telerik:RadComboBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" Runat="server" ControlToValidate="EddlLocType" Display="Dynamic" ErrorMessage="LOC TYPE cannot be empty!" forecolor="Aqua">
                                           </asp:RequiredFieldValidator>
        </td>
    </tr>
    <tr>
        <td>DESCRIPTION:</td>
        <td>
            <Telerik:RadTextBox ID="txtDesc" runat="server" MaxLength="40" Text='<%# Bind("DESCRIPTION")%>' Skin="Black"/>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtDesc" Display="Dynamic" EnableClientScript="true" ErrorMessage="Please enter AlphaNumeric characters only!" ValidationExpression="^[a-zA-Z0-9]+$" />
        </td>
    </tr>
    <tr>
        <td>TRAILER ID:</td>
        <td>
            <%--<Telerik:RadTextBox ID="txtTrailerID" runat="server" MaxLength="20" Text='<%# Bind("TRAILER_ID")%>'  ReadOnly="true" Skin="Black" />
            <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtTrailerID" Display="Dynamic" EnableClientScript="true" ErrorMessage="Please enter AlphaNumeric characters only!" ValidationExpression="^[a-zA-Z0-9]+$" />--%>
            <asp:Label ID="lblTrailerID" runat="server" MaxLength="10" Text='<%# Bind("TRAILER_ID")%>'  Skin="Black"/>
        </td>
    </tr>
    <tr>
        <td>SHIP DAY:</td>
        <td>
            <Telerik:RadComboBox ID="cboShipDay" runat="server" Skin="Black"  MarkFirstMatch="true" SelectedValue='<%# Bind("ROUTE")%>'>
                                    <Items>   
                                    <telerik:RadComboBoxItem runat="server" Text="-" Value="-"/>   
                                    <telerik:RadComboBoxItem runat="server" Text="Monday" Value="M" />   
                                    <telerik:RadComboBoxItem runat="server" Text="Tuesday" Value="T" /> 
                                    <telerik:RadComboBoxItem runat="server" Text="Wednesday" Value="W" />
                                    <telerik:RadComboBoxItem runat="server" Text="Thursday" Value="R" />
                                    <telerik:RadComboBoxItem runat="server" Text="Friday" Value="F" />
                                    <telerik:RadComboBoxItem runat="server" Text="Saturday" Value="S" />
                                    <telerik:RadComboBoxItem runat="server" Text="Sunday" Value="U" />
                                    </Items>
            </Telerik:RadComboBox>
            <%--<asp:TextBox ID="txtRoute" runat="server" MaxLength="3" Text='<%# Bind("ROUTE")%>' />
            <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ControlToValidate="txtRoute" Display="Dynamic" EnableClientScript="true" ErrorMessage="Please enter Alphabets only!" ValidationExpression="^[a-zA-Z]+$" />--%>
        </td>
    </tr>
    <tr>
        <td>DECON CODE:</td>
        <td>
            <%--<Telerik:RadTextBox ID="txtDecon" runat="server" MaxLength="5" Text='<%# Bind("DECON_CODE")%>' ReadOnly="true"  Skin="Black" />
            <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ControlToValidate="txtDecon" Display="Dynamic" EnableClientScript="true" ErrorMessage="Please enter Alphabets only!" ValidationExpression="^[a-zA-Z]+$" />--%>
            <asp:Label ID="lblDecon" runat="server" MaxLength="10" Text='<%# Bind("DECON_CODE")%>'  Skin="Black"/>
        </td>
    </tr>
    <tr>
        <td>STATUS:</td>
        <td>
            <%--<Telerik:RadCombobox ID="ddlStatus" runat="server" SelectedValue='<%#Bind("STATUS")%>' Enabled="false" Skin="Black">
                <Items>
                    <Telerik:RadComboBoxItem Text="" Value="" />
                    <Telerik:RadComboBoxItem Text="OPN" Value="OPN" />
                    <Telerik:RadComboBoxItem Text="CLS" Value="CLS" />
                </Items>
            </Telerik:RadCombobox>--%>
            <asp:Label ID="lblStatus" runat="server" MaxLength="10" Text='<%# Bind("STATUS")%>'  Skin="Black"/>
        </td>
    </tr>
    <tr>
        <td align="right" colspan="2">
            <asp:Button ID="btnUpdate" runat="server" CommandName='<%# IIf((TypeOf (Container) Is GridEditFormInsertItem), "PerformInsert", "Update")%>' Text='<%# IIf((TypeOf (Container) Is GridEditFormInsertItem), "Insert", "Update")%>' />
            &nbsp;
            <asp:Button ID="btnCancel" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" />
        </td>
    </tr>
</table>