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

[Solved] Weird Layout of RadGrid

4 Answers 117 Views

Grid

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

Duke asked on 12 Aug 2013, 10:58 PM

2.gif

I created a grid list. However the UI does not display properly in IE 9. It works in Chrome. Can anyone help me?
Page Code:

<%@ Page Title="" Language="C#" MasterPageFile="~/APPmaster.master" AutoEventWireup="true" CodeFile="FacultyAdvisorBulkUpload.aspx.cs" Inherits="Common.Common_FacultyAdvisorBulkUpload" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<script type="text/javascript">

function DownloadTemplate() {

var url = '../Common/Templates/FacultyAdvisors.csv';

//location.href = url;

window.open(url, 'Download');

}

</script>

<script type="text/javascript">

// This function helps to make the page tab fit the height of RadGrid

function GridCreated(sender, args) {

//alert(document.getElementById(sender.get_id()).clientHeight);

var gridObj = document.getElementById(sender.get_id());

var tabObj = document.getElementById('<%=RadMultiPage.ClientID %>');

var searchObj = document.getElementById('search-area');

tabObj.style.height = (gridObj.clientHeight + searchObj.clientHeight) + 'px';

}

// When clicking export, disable the AJAX

function onRequestStart(sender, args) {

if (args.get_eventTarget().indexOf("ExportTo") >= 0) {

args.set_enableAjax(false);

}

</script>

<br /><br />

<telerik:RadTabStrip runat="server" ID="RadTabStrip" Skin="Outlook"

SelectedIndex="0" MultiPageID="RadMultiPage">

<Tabs>

<telerik:RadTab Text="Advisor List" ToolTip="View Faculty Advisor Relationship" />

<telerik:RadTab Text="Advisor Bulk Update" ToolTip="Tool to Import Grades to APP." runat="server" />

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="RadMultiPage" SelectedIndex="0" CssClass="pageView">

<telerik:RadPageView runat="server" ID="RadPageView" >

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Hay">

</telerik:RadAjaxLoadingPanel>

<div id="search-area" style="padding:10px 0 20px 0;">

<b>Faculty Name:</b> <telerik:RadTextBox ID="FacultyNameCond" runat="server" /> <b>Student Name:</b> <telerik:RadTextBox ID="StudentNameCond" runat="server" /> <b>Class:</b> <telerik:RadComboBox ID="ClassCond" runat="server" ViewStateMode="Enabled" />

<telerik:RadButton ID="SearchButton" runat="server" Text="Search" OnClick="SearchButton_Click" />

<telerik:RadButton ID="ExportButton" runat="server" Text="Export to XLS" OnClick="ExportButton_Click" />

</div>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" ClientEvents-OnRequestStart="onRequestStart">

<telerik:RadGrid runat="server" ID="RadGridAdvisorList" Skin="Hay" Width="900px" GridLines="None" OnItemDataBound="RadGridAdvisorList_ItemDataBound"

AutoGenerateColumns="False" AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="false" HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="Small">

<PagerStyle Mode="NextPrevAndNumeric" />

<MasterTableView DataKeyNames="ID" ClientDataKeyNames="ID" PageSize="10" AllowMultiColumnSorting="true">

<GroupByExpressions>

<telerik:GridGroupByExpression>

<GroupByFields>

<telerik:GridGroupByField FieldName="FacultyName" />

</GroupByFields>

<SelectFields>

<telerik:GridGroupByField FieldName="FacultyName" />

</SelectFields>

</telerik:GridGroupByExpression>

</GroupByExpressions>

<CommandItemSettings ShowAddNewRecordButton="false" />

<Columns>

<telerik:GridBoundColumn DataField="FacultyName" HeaderText="Faculty Name" Display="false" />

<telerik:GridBoundColumn DataField="FacultyID" HeaderText="Faculty Email" Display="false" />

<telerik:GridImageColumn DataType="System.String" DataImageUrlFields="ImageLink"

DataImageUrlFormatString="~/Pics/{0}" AlternateText="Student image" DataAlternateTextField="StudentName"

ImageAlign="Middle" ImageWidth="57px" ImageHeight="72px" AllowFiltering="false" HeaderStyle-Width="64px" />

<telerik:GridBoundColumn DataField="StudentName" HeaderText="Student Name" AllowFiltering="false" HeaderStyle-Width="160px" />

<telerik:GridBoundColumn DataField="StudentID" HeaderText="Student ID" AllowFiltering="false" HeaderStyle-Width="90px" />

<telerik:GridBoundColumn DataField="Email" HeaderText="Email" AllowFiltering="false" HeaderStyle-Width="160px" />

<telerik:GridBoundColumn DataField="Status" HeaderText="Status" AllowFiltering="false" HeaderStyle-Width="160px" />

<telerik:GridBoundColumn DataField="Class" HeaderText="Class" AllowFiltering="false" HeaderStyle-Width="90px" />

<%--

<telerik:GridTemplateColumn>

<ItemTemplate>

<input type="image" src="../Styles/Images/Snapshot.gif" alt="Select" />

</ItemTemplate>

</telerik:GridTemplateColumn>

--%>

</Columns>

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="true" />

<ClientEvents OnGridCreated="GridCreated" />

</ClientSettings>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="BulkUploadView">

<div class="pageTitle"><b>Advisor Bulk Update</b></div>

<div id="ContainerDiv" class="legendBorderStaff" style="Height: 200px;">

<div class="tabWrapper">

<div class="regularLabel">

1. Download Template (if necessary):

<br />

<button id="btnTemplate" onclick="javascript:DownloadTemplate();" title="Download Template" >Download</button

<%--<asp:Button ID="Button1" runat="server" Text="Download" ToolTip="Download the proper template." onclick="BtnTemplate_Click" /> --%>

<br /><br />

2. Select the file:

<telerik:RadUpload ID="RadUpload" runat="server" Skin="Outlook" AllowedFileExtensions="csv" />

<asp:CustomValidator ID="CustomValidator1"

runat="server"

CssClass="errorLabel"

ErrorMessage="Please select at least one CSV file."

OnServerValidate="CustomValidator1_ServerValidate">

</asp:CustomValidator>

<br />

3. Submit your file:

<br />

<asp:Button ID="BtnSumbit" runat="server" Text="Import" ToolTip="Import advisors into APP system." onclick="BtnSumbit_Click" Width="150px" />

</div>

<br />

<div class="errorLabel">

<asp:Image ID="SuccessImg" runat="server" ImageUrl="../Images/success.gif" Visible="false" />

<asp:Image ID="ErrorImg" runat="server" ImageUrl="../Images/error.gif" Visible="false" />

<asp:Label ID="OutputLabel" ForeColor="Red" runat="server" Visible="false" />

</div>

<div class="details" >

<asp:Label ID="lblReport" runat="server" />

</div>

</telerik:RadPageView>

</telerik:RadMultiPage>

</asp:Content>

4 Answers, 1 is accepted

answered on 19 Aug 2013, 04:28 PM

Hi,Kostadin.
I haven't try to build another new grid to test the bug and I am busy on projects.
What I know about this issue:
Suppose you created an 7-column grid with group expression and 3 of them are set to Display="False". When I debugged the project, it works. The group header colspan property will be set to 7. However, I published the project to IIS, our production server. The colspan looks like to be set to 4 so the rest 3 will display as a white space (you can see the attachment I uploaded before), ONLY in IE 9. Chrome does not have this problem.

answered on 22 Aug 2013, 07:30 AM

Hello Duke,

Our developers successfully reproduced the issue and they have already working of fixing this bug. You could track the progress in our Ideas & Feedback portal. Additionally you could use the following JavaScript code in order to workaround the unwanted behaviour.

<script type="text/javascript">

function onGridCreated(sender) {

return;

if ($telerik.isIE7) {

var visibleColumns = 0,

columns = sender.get_masterTableView().get_columns();

for (var i = 0; i < columns.length; i++) {

if (columns[i].get_visible() && columns[i].get_element().className.indexOf("rgGroupCol") == -1)

visibleColumns++;

}

var groupHeaders = $telerik.getElementsByClassName(sender.get_element(), "rgGroupHeader");

for (var i = 0; i < groupHeaders.length; i++) {

groupHeaders[i].getElementsByTagName("td")[1].colSpan = visibleColumns;

}

</script>

Regards,
Kostadin
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.