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

Frozen Columns with Hierarchy Expanded Rows

3 Answers 152 Views

Grid

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

Timothy Kruszewski asked on 25 Aug 2010, 08:10 PM

grid1.png

I have two questons here. First, how do I format the exapaned grid columns to be a fixed width? I've tried setting the header and item style widths but they are not working. Second, how can I make the expanded row highlited like if I were Selecting it. I've attached screen shots and my code

<telerik:RadGrid ID="rgFeedback" runat="server" Skin="Web20" DataSourceID="dsFeedback"

AutoGenerateColumns="False" AllowSorting="True" AllowMultiRowSelection="False"

AllowPaging="True" GridLines="None" PageSize="25" Width="100%" OnSelectedIndexChanged="rgFeedback_SelectedIndexChanged"

OnItemCommand="rgFeedback_ItemCommand">

<MasterTableView DataKeyNames="FeedbackID" AllowMultiColumnSorting="True" HierarchyLoadMode="ServerOnDemand"

Width="100%">

<CommandItemSettings ShowExportToWordButton="true" ShowExportToExcelButton="true"

ShowExportToCsvButton="true" ExportToExcelText="Excel" />

<DetailTables>

<telerik:GridTableView DataKeyNames="FeedbackDetailID" DataSourceID="edsDetails" Width="900px"

runat="server">

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="FeedbackID" MasterKeyField="FeedbackID" />

</ParentTableRelation>

<Columns>

<telerik:GridBoundColumn HeaderText="Entered Date" DataField="EnteredDate" DataFormatString="{0:d}"

HeaderStyle-Width="90px" ItemStyle-Width="90px">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="User Name" HeaderStyle-Width="90px" ItemStyle-Width="90px">

<ItemTemplate>

<asp:Label ID="FirstName" runat="server" Text='<%# Eval("User.FirstName") %>'></asp:Label>

<asp:Label ID="LastName" runat="server" Text='<%# Eval("User.LastName") %>'></asp:Label>

</ItemTemplate>

<HeaderStyle Width="100px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Details">

<ItemTemplate>

<asp:Label ID="Comments" runat="server" Text='<%# Eval("Comments") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</telerik:GridTableView>

</DetailTables>

<ExpandCollapseColumn Visible="True">

</ExpandCollapseColumn>

<Columns>

<telerik:GridButtonColumn Text="Select" UniqueName="Select" CommandName="Select"

HeaderStyle-Width="50px" ItemStyle-Width="50px">

</telerik:GridButtonColumn>

<telerik:GridBoundColumn HeaderText="ID" DataField="FeedbackID" ReadOnly="true" HeaderStyle-Width="50px"

ItemStyle-Width="50px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Site Type" DataField="FeedbackSiteType" ReadOnly="true"

HeaderStyle-Width="60px" ItemStyle-Width="60px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Feedback Type" DataField="FeedbackType" ReadOnly="true"

HeaderStyle-Width="75px" ItemStyle-Width="75px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Importance" DataField="FeedbackImportance" ReadOnly="true"

HeaderStyle-Width="75px" ItemStyle-Width="75px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Description" DataField="Description" ReadOnly="true"

HeaderStyle-Width="200px" ItemStyle-Width="200px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Entered Date" DataField="EnteredDate" DataFormatString="{0:d}"

ReadOnly="true" HeaderStyle-Width="75px" ItemStyle-Width="75px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Entered By" DataField="UserName" ReadOnly="true"

HeaderStyle-Width="75px" ItemStyle-Width="75px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Sponsor" DataField="Sponsor" ReadOnly="true"

HeaderStyle-Width="75px" ItemStyle-Width="75px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Status" DataField="FeedbackStatus" ReadOnly="true"

HeaderStyle-Width="75px" ItemStyle-Width="75px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Developer" DataField="AssignedDeveloper" ReadOnly="true"

HeaderStyle-Width="60px" ItemStyle-Width="60px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Start Month" DataField="StartMonth" ReadOnly="true"

HeaderStyle-Width="75px" ItemStyle-Width="75px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="End Month" DataField="EndMonth" ReadOnly="true"

HeaderStyle-Width="75px" ItemStyle-Width="75px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Dev Hours" DataField="TimeEst" ReadOnly="true"

HeaderStyle-Width="60px" ItemStyle-Width="60px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="% Complete" DataField="PercentComplete" DataFormatString="{0:P0}"

ReadOnly="true" HeaderStyle-Width="60px" ItemStyle-Width="60px">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<PagerStyle Position="TopAndBottom" />

<HeaderStyle Width="100px" />

<ClientSettings>

<Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" ScrollHeight="500px"

FrozenColumnsCount="5"></Scrolling>

</ClientSettings>

<ExportSettings ExportOnlyData="true" IgnorePaging="true" OpenInNewWindow="true"

HideStructureColumns="true" Pdf-PageBottomMargin=".5" Pdf-PageTopMargin=".5"

Pdf-PageLeftMargin=".5" Pdf-PageRightMargin=".5" Pdf-PaperSize="Legal" Pdf-PageWidth="356mm"

Pdf-PageHeight="216mm" />

</telerik:RadGrid>

3 Answers, 1 is accepted

answered on 31 Aug 2010, 10:34 AM

Hello Timothy,

Straight onto your questions:

First, how do I format the exapaned grid columns to be a fixed width? I've tried setting the header and item style widths but they are not working.
Remove the global HeaderStyle property together with all the ItemStyle-Width settings.

...

<PagerStyle Position="TopAndBottom" />

<HeaderStyle Width="100px" /> <- REMOVE THIS LINE

<ClientSettings>

...

Note that you should use the HeaderStyle Width when you need to set the column width.

Second, how can I make the expanded row highlited like if I were Selecting it.
Please try the following approach:

protected void rgFeedback_ItemCommand(object source, GridCommandEventArgs e)

{

if (e.CommandName == RadGrid.ExpandCollapseCommandName)

{

if (e.Item.Expanded)

e.Item.CssClass = e.Item.ItemType == GridItemType.Item ? "rgRow" : "rgAltRow";

else

e.Item.CssClass = "rgSelectedRow";

}

Kind regards,
Daniel
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 21 Jan 2011, 01:16 AM

<td>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">

<ProgressTemplate>

<img src="images/ajax-loader.gif" /></ProgressTemplate>

</asp:UpdateProgress>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"></asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource2" runat="server"

SelectCommand=

"SELECT   S.ID ,  Service, PayerName,  Status  FROM ServiceIssues S, ServiceIssuesToSites SS   WHERE (S.ID=SS.ServiceIssuesID   and SS.SitesID=@ID   and CreateDate <= DateAdd(year,1,GetDate()))"

>

<SelectParameters>

<asp:SessionParameter Name="ID" SessionField="ID" Type="Int32"/>

</SelectParameters>

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource3" runat="server"

SelectCommand=" select I.ID, I.InteractionDate,I.InteractionType, I.PostCall, I.PreCall from Interactions I

inner join ServiceIssuesToInteractions SI on SI.InteractionsID=I.ID

where (SI.ServiceIssuesID =@ID)">

<SelectParameters>

<asp:SessionParameter Name="ID" SessionField="ID" Type="Int32"/>

</SelectParameters>

</asp:SqlDataSource>

<span class="style1">Site History</span><asp:Label ID="Label1" runat="server"></asp:Label>

<br /> <%--AllowFilteringByColumn="True" AllowMultiRowSelection="True"--%>

<telerik:RadGrid ID="RadGrid1" runat="server" Skin="Simple" AllowPaging="True" AllowSorting="True" EnableLinqExpressions="false"

HorizontalAlign="Left"

DataSourceID="SqlDataSource1" OnSelectedIndexChanged="RadGrid1_SelectedIndexChanged"

GridLines="None">

<MasterTableView AutoGenerateColumns="False" AlternatingItemStyle-HorizontalAlign="Left"

ItemStyle-HorizontalAlign="Left" DataKeyNames="ID"

DataSourceID="SqlDataSource1" Caption="Sites"

IsFilterItemExpanded="True">

<RowIndicatorColumn>

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<DetailTables>

<telerik:GridTableView runat="server" Caption="Cases" DataKeyNames="ID" DataSourceID="SqlDataSource2"

OnSelectedIndexChanged="rgCases_OnSelectedIndexChanged"

Skin="Simple" AllowFilteringByColumn="False">

<ExpandCollapseColumn Visible="True">

</ExpandCollapseColumn>

<RowIndicatorColumn>

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="ID" MasterKeyField="ID" />

</ParentTableRelation>

<ExpandCollapseColumn Visible="False">

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<%-- Interactions s --%>

<DetailTables>

<telerik:GridTableView DataKeyNames="ID" DataSourceID="SqlDataSource3" Width="100%" Caption="Interactions"

runat="server">

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="ID" MasterKeyField="ID" />

</ParentTableRelation>

</telerik:GridTableView>

</DetailTables>

<%-- Interactions e --%>

</telerik:GridTableView>

</DetailTables>

<ExpandCollapseColumn Visible="True">

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="ID" HeaderText="ID" SortExpression="ID" UniqueName="ID"

DataType="System.Int32" ReadOnly="True" ShowFilterIcon="false" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Name" HeaderText="Name" SortExpression="Name"

UniqueName="SiteName" ShowFilterIcon="false" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Address1" HeaderText="Address1" SortExpression="Address1"

UniqueName="Address1" ShowFilterIcon="false" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Address2" HeaderText="Address2" SortExpression="Address2"

UniqueName="Address2" ShowFilterIcon="false" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="City" HeaderText="City" SortExpression="City"

UniqueName="City" ShowFilterIcon="false" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="State" HeaderText="State" SortExpression="State"

UniqueName="State" ShowFilterIcon="false" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Zip" DataType="System.Int32" HeaderText="Zip"

SortExpression="Zip" UniqueName="Zip" ShowFilterIcon="false" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" >

</telerik:GridBoundColumn>

</Columns>

<ItemStyle HorizontalAlign="Left" />

<AlternatingItemStyle HorizontalAlign="Left" />

</MasterTableView>

<SelectedItemStyle BorderStyle="Solid" />

<ClientSettings EnablePostBackOnRowClick="True" EnableRowHoverStyle="True">

<Selecting AllowRowSelect="True" />

</ClientSettings>

</telerik:RadGrid>

<asp:Button ID="btnCancel" runat="server" Text="Cancel"

Width="114px" />

<asp:Button ID="btnOpenSite" runat="server" Text="Open Site"

Width="114px" Enabled="False" />

<asp:Button ID="btnOpenCase" runat="server" Text="Open Case"

Width="114px" Enabled="False" />

</td>

protected void rgCases_OnSelectedIndexChanged(object sender, EventArgs e)

{

SessionData Sess = (SessionData)Session["SessionState"];

foreach (GridItem selectedItem in RadGrid1.SelectedItems)

{

GridDataItem dataItem = (GridDataItem)selectedItem;

Sess.IDTable["ServiceIssues"] = int.Parse(dataItem["ID"].Text);

}

I have a hierarchy grid and I want to be able to fire an event when the child GridTableView is expaned. I have search the web, the site and can't seem to find a solution. I am very pressed for time and apologize if this is the wrong posting but am I said my deadline is very soon
Thanks

answered on 26 Jan 2011, 01:00 PM

Hello Rose,

Please try the following approach:

<script type="text/javascript">

function gridCommand(sender, args)

{

if (args.get_commandName() == "ExpandCollapse")

sender.get_masterTableView().fireCommand("MyCommand");

}

</script>

<ClientSettings>

<ClientEvents OnCommand="gridCommand" />

</ClientSettings>

</telerik:RadGrid>

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)

{

if (e.CommandName == "MyCommand")

{

//your code

}

I hope this helps.

Best regards,
Daniel
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.