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

RadGrid expanding and collapsing

5 Answers 220 Views

Grid

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

5 Answers, 1 is accepted

answered on 21 Feb 2013, 03:24 AM

Thank for your suggest，but it not work for me!

Here are my code, it always show some object is null and can not reference some object

can someone help me ?













<%@ Page Language=

"C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<input type="button" onclick="toggleGroups(null);" value="Toggle All" />

<input type="button" onclick="toggleGroups(0);" value="Toggle 1st" />

<input type="button" onclick="toggleGroups(1);" value="Toggle 2st" />

<form id="form1" runat="server">

<script type="text/javascript">

function toggleGroups(index) {

var gridClientID = '<%= RadGrid1.ClientID %>';

var grid = $find(gridClientID);

var masterTable = grid.get_masterTableView();

var groupToggles = masterTable._element.getElementsByTagName('INPUT');

if (index != null) {

if (index < groupToggles.length)

masterTable._toggleGroupsExpand(masterTable._element.getElementsByTagName('INPUT')[index], event);

}

else {

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

masterTable._toggleGroupsExpand(masterTable._element.getElementsByTagName('INPUT')[i], event);

}

</script>

<div>

<telerik:RadScriptManager ID="RadScriptManager2" runat="server"></telerik:RadScriptManager>

<telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" PageSize="5" AllowSorting="True" AllowPaging="True"

GridLines="None">

<PagerStyle Mode="NumericPages"></PagerStyle>

<MasterTableView GroupLoadMode="Client" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1" HierarchyLoadMode="Client" >

<DetailTables>

<telerik:GridTableView DataKeyNames="OrderID" DataSourceID="SqlDataSource2" Width="100%"

runat="server" HierarchyLoadMode="Client">

<ParentTableRelation>

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

</ParentTableRelation>

<Columns>

<telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"

DataField="OrderID" UniqueName="OrderID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"

DataField="OrderDate" UniqueName="OrderDate">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="EmployeeID" HeaderText="EmployeeID" HeaderButtonType="TextButton"

DataField="EmployeeID" UniqueName="EmployeeID">

</telerik:GridBoundColumn>

</Columns>

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridBoundColumn DataField="CustomerID" FilterControlAltText="Filter CustomerID column" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" UniqueName="CustomerID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CompanyName" FilterControlAltText="Filter CompanyName column" HeaderText="CompanyName" SortExpression="CompanyName" UniqueName="CompanyName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ContactName" FilterControlAltText="Filter ContactName column" HeaderText="ContactName" SortExpression="ContactName" UniqueName="ContactName">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings AllowExpandCollapse="true">

</ClientSettings>

</telerik:RadGrid>

<br />

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT * FROM [Orders] WHERE ([CustomerID] = @CustomerID)">

<SelectParameters>

<asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="String" />

</SelectParameters>

</asp:SqlDataSource>

</div>

</form>

</body>

</html>

answered on 25 Feb 2013, 09:05 AM

Hi,

You can fire a ExpandCollapse command and pass the row index as argument:
http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-firecommand.html

I have noticed that you have set the group load mode to client. In that case you probably want to avoid a postback when toggling the expanded state of the groups. For this scenario, you can explicitly click the expand/collapse button of the corresponding group. The following approach demonstrates how to make the entire group header to trigger expand/collapse:

Copy Code

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridGroupHeaderItem)

{

GridGroupHeaderItem groupHeaderItem = e.Item as GridGroupHeaderItem;

groupHeaderItem.Attributes.Add("onclick", "ToggleExpandedState(this,event);");

}

JavaScript:

Copy Code

function ToggleExpandedState(headerEl, event) {

var type = event.target.tagName.toLowerCase();

if (type != "input" && type != "a") {

$(headerEl).children()[0].children[0].click();

}

And the CSS:

Copy Code

<style type="text/css">

div.RadGrid .rgGroupHeader

{

cursor: pointer;

}

div.RadGrid .rgGroupHeader .rgExpand

{

background: url('plus.png') no-repeat 0 0;

}

div.RadGrid .rgGroupHeader .rgCollapse

{

background: url('minus.png') no-repeat 0 0;

}

</style>

Hope this helps. Please give it a try and let me know about the result.

Regards,
Eyup
the Telerik team

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 their blog feed now.