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

Header alignment issue

16 Answers 228 Views

PivotGrid

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

Duke asked on 08 Jan 2014, 08:42 PM

pivot.png

pivot-first.png

pivot-after.png

I am creating a simple pivot grid but the header alignment has glitch. Anyone can help? Please also see attachments.

Update: my code will refresh the pivot grid data each time the user chooses a user information by a rad combo box. For the first selection, the layout displays incorrectly. Afterward, everything is good. First time rendering does not work properly,

Code:

<telerik:RadPivotGrid runat="server" ID="RadPivotGrid1" Visible="false" ShowDataHeaderZone="false" ShowRowHeaderZone="false" ShowColumnHeaderZone="false" AllowFiltering="false"

ShowFilterHeaderZone="false" AllowSorting="false" Skin="Outlook" AggregatesPosition="Rows" OnCellDataBound="RadPivotGrid1_CellDataBound">

<Fields>

<telerik:PivotGridRowField DataField="CodeGroup1" CellStyle-Font-Bold="true" ZoneIndex="0">

</telerik:PivotGridRowField>

<telerik:PivotGridRowField DataField="CodeGroup2" CellStyle-BackColor="AliceBlue" ZoneIndex="1">

</telerik:PivotGridRowField>

<telerik:PivotGridColumnField DataField="Status"></telerik:PivotGridColumnField>

<telerik:PivotGridColumnField DataField="OnOffSite"></telerik:PivotGridColumnField>

<telerik:PivotGridAggregateField DataField="DataSource" Aggregate="Count">

</telerik:PivotGridAggregateField>

</Fields>

</telerik:RadPivotGrid>

CS:

RadPivotGrid1.DataSource = from cpd in context.CDM_ProcedureDatas<br>

where cpd.StudentID.Equals(studentId) && cpd.Status.Equals("Completed") && cpd.Date != null && cpd.CodeGroup1 != null<br>

select cpd;

16 Answers, 1 is accepted

answered on 17 Jan 2014, 05:15 PM

Hi,Galin. The problem is that I run locally in VS debugging, everything is fine. When I published the code to our test server or production server, it goes weird. I meet this kind of cases frequently. Full code is listed below:

<%@ Page Title="Procedure Summary Report" Language="C#" MasterPageFile="~/APPmaster.master" AutoEventWireup="true" CodeFile="SummaryProcedureReport.aspx.cs" Inherits="CDM_SummaryProcedureReport" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

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

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function OnClientShow(radWindow) {

if (document.documentElement && document.documentElement.scrollTop) {

var oTop = document.documentElement.scrollTop;

document.documentElement.scroll = "no";

document.documentElement.style.overflow = "hidden";

document.documentElement.scrollTop = oTop;

} else if (document.body) {

var oTop = document.body.scrollTop;

document.body.scroll = "no";

document.body.style.overflow = "hidden";

document.body.scrollTop = oTop;

}

function OnClientClose(radWindow) {

// document.body.scroll = "";

// document.body.style.overflow = "";

if (document.documentElement && document.documentElement.scrollTop) {

document.documentElement.scroll = "";

document.documentElement.style.overflow = "";

} else if (document.body) {

document.body.scroll = "";

document.body.style.overflow = "";

}

function RefreshWindow(radWindow) {

location.reload(true);

}

var procedureWindow = null;

function ShowProcedureAvg() {

var combobox = $find("<%=ClassComboBox.ClientID %>");

var value = combobox.get_value();

if (!procedureWindow || procedureWindow.closed)

procedureWindow = window.open("ProcedureAverages.aspx?ClassId=" + value, "ProcedureAvgDialogs", "width=680,height=620,resizable=yes");

return false;

}

<%=AppSolution.ScriptLoadingPanelFitToBrowser(RadAjaxLoadingPanel3.ClientID) %>

</script>

</telerik:RadCodeBlock>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Style="z-index: 10400"

OnClientShow="OnClientShow"

OnClientClose="OnClientClose"

EnableShadow="false" Overlay="True" KeepInScreenBounds="True" Modal="True">

<%--ProcedureAvgDialog--%>

<Windows>

<telerik:RadWindow ID="ProcedureAvgDialogs" runat="server" Title="" Height="660px"

Width="700px" Left="350px" ReloadOnShow="true" ShowContentDuringLoad="false" VisibleStatusbar="false"

Modal="true" />

</Windows>

</telerik:RadWindowManager>

<%--Loading gif--%>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<ClientEvents OnRequestStart="FitToTheBrowser" />

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="ClassComboBox">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="EmptyPanel" LoadingPanelID="RadAjaxLoadingPanel3" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="StudentComboBox">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="EmptyPanel" LoadingPanelID="RadAjaxLoadingPanel3" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel3" runat="server" IsSticky="true" Transparency="20" Skin="">

<%=AppSolution.HtmlLoadingPanelDiv() %>

</telerik:RadAjaxLoadingPanel>

<%--Loading gif--%>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel3">

<div class="pageTitle"><b>Procedure Summary Report</b></div>

<div class="pageDescription" style="margin-top: 1px; left: 10px; position: relative">Comprehensive summary of student's procedure report.</div>

<asp:Panel ID="Panel1" runat="server" HorizontalAlign="Left" style="padding-top: 10px;">

<table style="width: 430px">

<tr>

<td>

<div class="smallBlueTitle"><b>1. Class</b></div>

<telerik:RadComboBox ID="ClassComboBox" runat="server" AutoPostBack="true" BackColor="#fffeb2"

Width="200px" OnSelectedIndexChanged="ClassDlSelectedIndexChanged">

</telerik:RadComboBox>

</td>

<td>

<div class="smallBlueTitle"><b>2. Student:</b></div>

<telerik:RadComboBox ID="StudentComboBox" runat="server" AutoPostBack="true" BackColor="#fffeb2" DataTextField="LastFirst" DataValueField="ID"

Width="200px" Filter="Contains" MarkFirstMatch="True" HighlightTemplatedItems="True" OnSelectedIndexChanged="DisplayHelper">

</telerik:RadComboBox>

</td>

</tr>

</table>

</asp:Panel>

<div id="DemoGraphicPanel" runat="server" visible="false">

<fieldset style="width: 850px; border: none;">

<div id="leftColumn" style="float: left; width: 60%;">

<div class="StudentNameLegend" style="font-size: x-large;padding-bottom:5px;">

<asp:Label ID="LastNameLbl" runat="server" />,

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

</div>

<asp:Image ID="StudentImage" runat="server" Width="145px" Height="181px" alt="Student Photo" Visible="false" Style="float: left; margin-right: 5px;" />

<b style="color: #2554C7;">Class: <font color="black">

<asp:Label ID="ClassYear" runat="server" /></font></b>

<br />

<b style="color: #2554C7;">Student ID: <font color="black">

<asp:Label ID="StudentID" runat="server" /></font></b>

<br />

<b style="color: #2554C7;">E-Mail: <font color="black">

<asp:Label ID="Email" runat="server" /></font></b>

<br />

<b style="color: #2554C7;">Advisor: <font color="black">

<asp:Label ID="AdvisorLbl" runat="server" /></font></b>

<br />

<b style="color: #2554C7;">Status: <font color="black">

<asp:Label ID="AcademicStatus" runat="server" /></font></b>

</div>

<div id="rightColumn">

<div class="smallBlueTitle">Course Directors:</div>

<br />

<asp:Panel ID="CourseDirectorPanel" runat="server"></asp:Panel>

</div>

</fieldset>

</div>

<br />

<%-- <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />

<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />--%>

<div class="smallBlueTitle">

<asp:ImageButton ID="ProcedureAvgBtn" Visible="false" ImageUrl="~/Styles/Images/colorPicker.gif" runat="server" OnClientClick="return ShowProcedureAvg()" ToolTip="Check averages" />

<b>

<asp:Label runat="server" ID="InstructionLbl" Visible="false" Font-Size="Small">Click to view Total Procedure Averages</asp:Label></b>

</div>

<%--do not need data source for now - save the codes--%>

<%--OnNeedDataSource="RadPivotGrid1_NeedDataSource"--%>

<telerik:RadPivotGrid runat="server" ID="RadPivotGrid1" Visible="true" ShowDataHeaderZone="false" ShowRowHeaderZone="false" ShowColumnHeaderZone="false" AllowFiltering="false"

ShowFilterHeaderZone="false" AllowSorting="false" Skin="Outlook" AggregatesPosition="Rows" OnCellDataBound="RadPivotGrid1_CellDataBound" BorderColor="Transparent">

<Fields>

<telerik:PivotGridRowField DataField="CodeGroup1" CellStyle-Font-Bold="true" ZoneIndex="0">

</telerik:PivotGridRowField>

<telerik:PivotGridRowField DataField="CodeDescription" CellStyle-BackColor="Yellow" ZoneIndex="1">

</telerik:PivotGridRowField>

<telerik:PivotGridColumnField DataField="Status"></telerik:PivotGridColumnField>

<telerik:PivotGridColumnField DataField="OnOffSite"></telerik:PivotGridColumnField>

<telerik:PivotGridAggregateField DataField="DataSource" Aggregate="Count">

</telerik:PivotGridAggregateField>

</Fields>

</telerik:RadPivotGrid>

</telerik:RadAjaxPanel>

</asp:Content>

using System.Collections.Generic;

using System.Linq;

using System;

using System.Web.UI.WebControls;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using Telerik.Web.UI;

using System.IO;

using System.Text;

using System.Web.UI;

public partial class CDM_SummaryProcedureReport : UserProfileBase

{

protected String ConnectionString = ConfigurationManager.ConnectionStrings["dodbConnectionString"].ConnectionString;

protected override void OnInit(EventArgs e)

{

base.OnInit(e);

// Customize the item for search function purpose

StudentComboBox.ItemTemplate = new StudentListItemTemplate(Session["Demonstration"] == "true");

}

private void IsValidUser()

{

List<string> validRoles = new List<string>();

validRoles.Add("Administrator");

validRoles.Add("CDMdean");

validRoles.Add("CDMstaff");

validRoles.Add("CDMfaculty");

VerifyPagePermissions.RedirectIfUserDoesNotHavePermissions(validRoles, User, Response);

}

protected void Page_Load(object sender, EventArgs e)

{

IsValidUser();

if (!IsPostBack)

{

//get data from CDMClasses tbl.

using (var context = new CourseInformationDataContext())

{

var classList = from c in context.CDMClasses

orderby c.Class descending

select new

{

Class = c.Class

};

var classCollection = new ListItemCollection { new ListItem("-----Select-----") };

foreach (var currentTitle in classList)

{

classCollection.Add(new ListItem(currentTitle.Class));

}

ClassComboBox.DataSource = classCollection;

ClassComboBox.DataBind();

}

protected void ClassDlSelectedIndexChanged(object sender, EventArgs e)

{

//// fill student dropdown list

FillStudentList();

}

private void FillStudentList()

{

var conn = new SqlConnection(ConnectionString);

try

{

conn.Open();

SqlCommand cmd = new SqlCommand();

cmd.Connection = conn;

if (DeanDataPowerValidate())

{

ClassComboBox.Visible = true;

cmd.CommandText = "SELECT PIDM, [ID], (Last + ',' + ' ' + First  + ' ' + ISNULL(replace('(' + NickName + ')',' ',''), '')) AS LastFirst, [First], [ID] FROM [Class Members] WHERE CLASS=@class OR @class='All' ORDER BY [Last], [First]";

cmd.Parameters.Add("@class", SqlDbType.VarChar).Value = ClassComboBox.SelectedValue.ToString();

}

else

{

//ErrorLbl.Text = "";

//errorImage.Visible = false;

ClassComboBox.Visible = true;

//cmd.CommandText = "SELECT PIDM, [ID], (Last + ',' + ' ' + First + ' ' + ISNULL(replace('(' + NickName + ')',' ',''), '')) AS LastFirst, [First], [ID] FROM [Class Members] WHERE CLASS=@class AND [Faculty ID]=@faculty OR @class='All' AND [Faculty ID]=@faculty ORDER BY [Last], [First]";

cmd.CommandText = "SELECT DISTINCT RS.* FROM " +

"( " +

"SELECT PIDM, [ID], (Last + ',' + ' ' + First + ' ' + ISNULL(replace('(' + NickName + ')',' ',''), '')) AS LastFirst,[Last], [First] " +

"FROM [Class Members] WHERE (Class=@class AND [Faculty ID]=@faculty) OR (@class='All' AND [Faculty ID]=@faculty) " +

"UNION " +

"SELECT A.PIDM, A.[ID], (A.Last + ',' + ' ' + A.First + ' ' + ISNULL(replace('(' + A.NickName + ')',' ',''), '')) AS LastFirst,[Last], A.[First] " +

"FROM [Class Members] AS A " +

"INNER JOIN CDM_ProcedureStudent AS B ON A.ID = B.StudentID " +

"INNER JOIN Faculty AS C ON B.GroupID = C.GroupId " +

"WHERE (A.Class = @class AND C.ID = @faculty) OR (@class='All' AND C.ID = @faculty) " +

") AS RS " +

"ORDER BY RS.[Last], RS.[First]";

cmd.Parameters.Add("@faculty", SqlDbType.VarChar).Value = User.Identity.Name + "@westernu.edu";

cmd.Parameters.Add("@class", SqlDbType.VarChar).Value = ClassComboBox.SelectedValue.ToString();

}

SqlDataReader dataReader = cmd.ExecuteReader();

if (Session["Demonstration"] == "true")

{

StudentComboBox.DataTextField = "PIDM";

}

StudentComboBox.DataSource = dataReader;

StudentComboBox.DataBind();

// adds static item to top of the list. this fixes issues when student list is empty

//StudentComboBox.Items.Insert(0, "-----Select-----");

// create RadComboBoxItem to be the default value "-----Select-----"

var radComboBoxItem = new RadComboBoxItem("-----Select-----");

StudentComboBox.Items.Insert(0, radComboBoxItem);

//// if user does not have access, show error

//if (!dataReader.HasRows)

//{

//}

}

finally

{

conn.Close();

}

protected void DisplayHelper(object sender, EventArgs e)

{

var context = new CourseInformationDataContext();

var studentId = StudentComboBox.SelectedValue.ToString();

var classMemberList = from cm in context.Class_Members

where cm.ID == studentId

select new

{

// use ?? "null coalescing" operator to handle nulls

ID = (string)cm.ID ?? "",

Last = (string)cm.Last ?? "",

First = (string)cm.First ?? "",

Nickname = (string)cm.Nickname ?? "",

PhotoURL = (string)cm.PhotoURL ?? "",

ClassYear = (string)cm.Class ?? "",

Email = (string)cm.Emal ?? "",

Advisor = (string)cm.Faculty_ID ?? "",

CurrentStatus = (string)cm.Status ?? "",

AcademicStatus = (string)cm.AcademicStatus ?? "",

};

foreach (var member in classMemberList)

{

StudentImage.ImageUrl = "~/pics/" + member.PhotoURL.ToString();

LastNameLbl.Text = member.Last.ToString();

// concatenate the names if nickname is present

if (!string.IsNullOrEmpty(member.Nickname.ToString()))

{

FirstNameLbl.Text = member.First.ToString() + " (" + member.Nickname.ToString() + ")";

}

else

{

FirstNameLbl.Text = member.First.ToString();

}

ClassYear.Text = member.ClassYear.ToString();

StudentID.Text = member.ID.ToString();

Email.Text = "<a href=mailto:" + member.Email.ToString() + ">" + member.Email.ToString() + "</a>";

AdvisorLbl.Text = "<a href=mailto:" + member.Advisor.ToString() + ">" + member.Advisor.ToString() + "</a>";

AcademicStatus.Text = member.CurrentStatus.ToString() + " / " + member.AcademicStatus.ToString();

if (Session["Demonstration"] == "true")

{

LastNameLbl.Text = DemoWordsWithGUID(LastNameLbl.Text.Length);

FirstNameLbl.Text = DemoWordsWithGUID(LastNameLbl.Text.Length);

StudentID.Text = DemoWordsWithGUID(StudentID.Text.Length);

Email.Text = DemoWordsWithGUID(Email.Text.Length);

using (DemoModeCreator demo = new DemoModeCreator())

{

StudentImage.ImageUrl = "~/Pics/" + demo.DemoImage(member.PhotoURL);

}

// Course director

var coursedirectors = from fa in context.Faculties

join ps in context.CDM_ProcedureStudents on fa.GroupId.ToString() equals ps.GroupID

where ps.StudentID == studentId

select fa;

string output = "";

foreach (Faculty di in coursedirectors)

{

output += "<div style=\"float:left;padding-right:10px;\"><img src=\"" + di.PhotoUrl + "\" alt=\"\" style=\"height:80px;\" /><br/><a href=\"mailto:" + di.E_Mail + "\" title=\"Write mail to " + di.FN + " " + di.LN + "\">" + di.FN + " " + di.LN + "</a></div>";

}

CourseDirectorPanel.Controls.Add(new LiteralControl(output));

RadPivotGrid1.DataSource = from cpd in context.CDM_ProcedureDatas

where cpd.StudentID.Equals(studentId) && cpd.Date != null //&& cpd.CodeGroup1 != null

select cpd;

RadPivotGrid1.BorderColor = System.Drawing.Color.SkyBlue;

//turn on controls

ProcedureAvgBtn.Visible = true;

InstructionLbl.Visible = true;

DemoGraphicPanel.Visible = true;

StudentImage.Visible = true;

}

public DataTable GetDataTable(string query)

{

String connString = ConfigurationManager.ConnectionStrings["dodbConnectionString"].ConnectionString;

SqlConnection conn = new SqlConnection(connString);

SqlDataAdapter adapter = new SqlDataAdapter();

adapter.SelectCommand = new SqlCommand(query, conn);

DataTable myDataTable = new DataTable();

conn.Open();

try

{

adapter.Fill(myDataTable);

}

finally

{

conn.Close();

}

return myDataTable;

}

protected void RadPivotGrid1_CellDataBound(object sender, PivotGridCellDataBoundEventArgs e)

{

e.Cell.Wrap = false;

if (e.Cell is PivotGridColumnHeaderCell)

{

e.Cell.HorizontalAlign = HorizontalAlign.Center;

e.Cell.VerticalAlign = VerticalAlign.Middle;

if (e.Cell.Controls.Count > 1)

{

(e.Cell.Controls[0] as Button).Visible = false;

}

else if (e.Cell is PivotGridRowHeaderCell)

{

if (e.Cell.Controls.Count > 1)

{

(e.Cell.Controls[0] as Button).Visible = false;

}

else if (e.Cell is PivotGridDataCell)

{

e.Cell.HorizontalAlign = HorizontalAlign.Right;

}

answered on 22 Jan 2014, 03:15 PM

TestPage.zip

Hello Duke,

I tested the provided code, but the described issue does not occur on my side. For reference I am sending a sample page based on your code. Please check it out and let me know if I have missed something important.

Regards,
Galin
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Header alignment issue

16 Answers, 1 is accepted