Hi,
I have this weird behaviour on one of my radgrid where the height is cut off. So the area where the rows are displayed are shorter ( I think its the rgDataDiv) .I have to say the page i have it it is quiet complex and involves a lot of dynamic controls... not sure if this is the cause...but this behaviour is only seen after a sequence of clicks ( i can always reproduce it ).
Landing on the page originally does not show the bug, but after a series of clicks ( a consistent pattern ) it happens... I'm gonna try to post my grid source and the behaviour and the generated HTML first to see... hopefully its just a stupid setting i forgot to set which you can point out...
Otherwise, If required, I'll post the full page...
Here's the Grid... Notice I've forced it to have a height of 493px.
<div style="margin-left: 12px; margin-top: 40px; clear: both;"> <%--Grid Selected Shopping List--%> <telerik:RadGrid ID="grdSelectedList" runat="server" AutoGenerateColumns="False" CellSpacing="0" GridLines="None" ShowHeader="False" OnNeedDataSource="grdSelectedList_NeedDataSource" OnItemCommand="grdSelectedList_ItemCommand" OnItemCreated="grdSelectedList_ItemCreated" OnItemDataBound="grdSelectedList_ItemDataBound" Height="493px" Width="595px" Skin="gmBlueGrid" EnableEmbeddedSkins="False" Style="outline: none;" EnableViewState="false"> <GroupingSettings ShowUnGroupButton="True" /> <ClientSettings> <Selecting AllowRowSelect="True" /> <Scrolling AllowScroll="True" UseStaticHeaders="True" /> <ClientEvents OnRowClick="grdSelectedList_RowClick" /> </ClientSettings> <MasterTableView DataKeyNames="Account_ID, Item_ID, List_ID, Product_ID" ClientDataKeyNames="Account_ID, Item_ID, List_ID, Product_ID"> <GroupByExpressions> <telerik:GridGroupByExpression> <SelectFields> <telerik:GridGroupByField FieldName="Category_Name" /> </SelectFields> <GroupByFields> <telerik:GridGroupByField FieldName="Category_Name" /> </GroupByFields> </telerik:GridGroupByExpression> </GroupByExpressions> <NoRecordsTemplate> This list is empty.<br /> Click in "Add an Item" or "Browse Aisles" to add items to this list. </NoRecordsTemplate> <CommandItemSettings ExportToPdfText="Export to PDF" /> <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"> <HeaderStyle Width="20px" /> </RowIndicatorColumn> <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"> <HeaderStyle Width="20px" /> </ExpandCollapseColumn> <Columns> <telerik:GridBoundColumn FilterControlAltText="Filter CategoryCol column" UniqueName="CategoryCol" DataField="Category_Name" Groupable="true" Visible="False"> </telerik:GridBoundColumn> <telerik:GridTemplateColumn FilterControlAltText="Filter DescriptionCol column" UniqueName="DescriptionCol" HeaderStyle-Width="455px"> <ItemTemplate> <div style="width: 455px; clear: both; font-weight: bold; margin-left: -5px;"> <asp:Label ID="lblItemDescription" runat="server" CssClass="blackHyperlink"></asp:Label> </div> <div class="slGridDescription" style="margin-left: -5px;"> <%# DataBinder.Eval(Container.DataItem, "Detail_Line_Display") %></div> </ItemTemplate> <HeaderStyle Width="455px"></HeaderStyle> </telerik:GridTemplateColumn> <telerik:GridBoundColumn FilterControlAltText="Filter QtyCol column" UniqueName="QtyCol" DataField="Size_Description" HeaderStyle-Width="70px" ItemStyle-Font-Bold="true" ItemStyle-HorizontalAlign="Right"> <HeaderStyle Width="70px"></HeaderStyle> <ItemStyle HorizontalAlign="Right" Font-Bold="True"></ItemStyle> </telerik:GridBoundColumn> <telerik:GridTemplateColumn> <ItemTemplate> <telerik:RadButton ID="btnDeleteItem" runat="server" CommandName="DeleteItemFromShoppingList" OnClientClicking="ConfirmDelete" Width="18" Height="20"> <Image ImageUrl="..\Images\icoDeleteRedX.gif" /> </telerik:RadButton> </ItemTemplate> </telerik:GridTemplateColumn> </Columns> <EditFormSettings> <EditColumn FilterControlAltText="Filter EditCommandColumn column"> </EditColumn> </EditFormSettings> </MasterTableView> <FilterMenu EnableImageSprites="False"> <WebServiceSettings> <ODataSettings InitialContainerName=""> </ODataSettings> </WebServiceSettings> </FilterMenu> <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"> <WebServiceSettings> <ODataSettings InitialContainerName=""> </ODataSettings> </WebServiceSettings> </HeaderContextMenu> </telerik:RadGrid> <br /></div>
Attached are 4 images:
Generated HTML output of the Grid before; Note the height in the outer div of height 493px and the inner rgDataDiv ( I'm assuming it is inherited from the RadGrid declaration )
Generated HTML output of the Grid after; the height of outer div is still 493, but the rgDataDiv is now set to 300 px? Not sure where this comes from .
Display Before and After
Additional Information regarding the set up , in case it is related to the way this grid is set up:
I have modified the gridCSS so that it displays according to a spec i received... The Rows are always grouped by the category ...
Regarding the Page / UC set up, I have a Page 1 which uses a Master Template. In the Page, it has 3 states ( 3 custom NON-Telerik TABS ). By default it calls this dynamic UC (call it TAB 1) which has the RadGrid. When I Click on TAB 3, it calls another Dynamic UC replacing the content of the placeholder completely. Now I leave this page to Page 2, then come back to Page 1. This time, because I have a Session variable to save the state of the last Visited TAB in page 1, It loads Page 1 with TAB 3. When I click on TAB 1, to display the RadGrid , this is where this behaviour is obtained.
<formid="form1"runat="server"> <telerik:RadScriptManagerID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <div> <telerik:RadGridrunat="server"AllowPaging="True"ID="RadGrid2"OnNeedDataSource="RadGrid2_NeedDataSource"Width="600px"PageSize="8"> <MasterTableViewWidth="100%"> <Columns> <telerik:GridBoundColumnHeaderText="Project Name"DataField="name"></telerik:GridBoundColumn> </Columns> <NoRecordsTemplate> <divstyle="height: 30px; cursor: pointer;"> No items to view</div> </NoRecordsTemplate> <PagerStyleMode="NumericPages"PageButtonCount="4"/> </MasterTableView> </telerik:RadGrid> </div> </form> Public Class bookmarks Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load End Sub Protected Sub RadGrid2_NeedDataSource(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid2.NeedDataSource RadGrid2.DataSource = getBookMarks End Sub Private ReadOnly Property getBookMarks() As IList(Of project) Get Dim strSQL As String = "SELECT PROJ_NAME FROM [OPI_TIMESHEETS] o left outer join DCSC_PROJECT d on o.project_number = d.PROJ_NO " Dim results As IList(Of project) = New List(Of project)() Using connection As IDbConnection = DbProviderFactories.GetFactory("System.Data.SqlClient").CreateConnection() connection.ConnectionString = ConfigurationManager.ConnectionStrings("projcentral").ConnectionString Using command As IDbCommand = connection.CreateCommand() command.CommandText = strSQL connection.Open() Try Dim reader As IDataReader = command.ExecuteReader() While reader.Read() Dim name As String = reader.GetValue(reader.GetOrdinal("PROJ_NAME")) results.Add(New project(name)) End While Catch ex As SqlException results.Clear() 'lblmsg.Text = ex.Message End Try End Using End Using lblMsg.Text = results.Count & " items in list" Return results End Get End Property Class project Private _projName As String Sub New(ByVal name As String) _projName = name End Sub #Region "properties" Private ReadOnly Property Name() As String Get Return _projName End Get End Property #End Region End Class End Class Dear Support,
I've issue with the image button. The button image blinks when the user hover over the Button, then when the user move out from the button the image appears again.
Please find the attached images.
Here is my markup code for the button.
<rad:RadButton ID="btnAccountStatusHistory" runat="server" Text="Status History" OnClientClicking="OnAccountStatusHistoryClientClicking"> <Icon PrimaryIconUrl="~/_Images/ButtonsIcons/History.gif" PrimaryIconLeft="4" PrimaryIconTop="4" /></rad:RadButton>