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

RadGrid expanding and collapsing

2 Answers 654 Views

Grid

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

2 Answers, 1 is accepted

my407sw my407sw

commented 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.

Kiran

commented on 10 Jan 2019, 02:54 PM

Hi,

I having been trying since long to get my grouping to collapse and nothing helped. The only thing helped me was adding AllowExpandCollapse=true. I was trying with AllowGroupingexpandcollapse= true but it did not help. Anyone having the same problem as me like, not able to collapse the groping try AllowExpandCollapse="true" in ClientSettings.

Thank you.

Eyup

commented on 15 Jan 2019, 12:44 PM

Hi Kiran,

Thanks for sharing your solution with our community. I hope it will prove helpful to other developers as well.

If you happen to face any issues still, feel free to turn to us.

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Rohit

commented on 04 Feb 2023, 03:49 AM

RadGrid expand and collapse functionality is not working.

this is my code

<telerik:RadGrid RenderMode="Lightweight" EnableAriaSupport="true"
ID="RadGrid1" runat="server"
AllowPaging="True" AllowSorting="True"
OnNeedDataSource="RadGrid1_NeedDataSource"
AllowFilteringByColumn="True"
OnPreRender="RadGrid1_PreRender"
OnItemDataBound="RadGrid1_ItemDataBound"
UseScrollbarsInHierarchy="false"
OnItemCommand="RadGrid1_ItemCommand"
CellSpacing="0" GridLines="None">

<GroupingSettings CaseSensitive="false" />
<MasterTableView AutoGenerateColumns="false"
HierarchyDefaultExpanded="false" EditMode="InPlace"
HierarchyLoadMode="ServerOnDemand" GroupLoadMode="Server"
DataKeyNames="JobId">

<HeaderStyle />

<Columns>
<telerik:GridBoundColumn DataField="JobNo" HeaderText="JobNo" UniqueName="JobNo"
ColumnGroupName="GeneralInformation">
<HeaderStyle Width="170px" />

</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Model" HeaderText="Model" UniqueName="Model"
ColumnGroupName="GeneralInformation" FilterControlWidth="60px">
<HeaderStyle Width="115px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Classification" HeaderText="Classification" UniqueName="Classification"
ColumnGroupName="GeneralInformation">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="RegNo" HeaderText="RegNo" UniqueName="RegNo"
ColumnGroupName="GeneralInformation">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CustomerName" HeaderText="CustomerName" UniqueName="CustomerName" ColumnGroupName="SpecificInformation" FilterControlWidth="55px">
<HeaderStyle Width="110px" />
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="MobileNumber" HeaderText="MobileNumber" UniqueName="MobileNumber" ColumnGroupName="SpecificInformation">
</telerik:GridBoundColumn>
<telerik:GridNumericColumn DataField="Est" HeaderText="Est" UniqueName="Est"
ColumnGroupName="BookingInformation" DataFormatString="<strong>€ {0}</strong>"
AllowFiltering="false" HeaderStyle-Width="80px" />
<telerik:GridTemplateColumn HeaderText="Book" ColumnGroupName="BookingInformation"
AllowFiltering="false">
<HeaderStyle Width="102px" />
<ItemTemplate>
<asp:LinkButton ID="BookButton" runat="server" Text="Book Now" OnClientClick='<%# String.Format("openConfirmationWindow({0}); return false;", Eval("Est")) %>'
CssClass="bookNowLink" />
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>


<NestedViewTemplate >

<div class="row">

<div class="col-12">
<div class="flex-container">
<div class="flex-item">


<telerik:RadButton ID="RadButton4"
AutoPostBack="false"
CssClass="grid-button-border-color"

runat="server"
RenderMode="Lightweight">
<ContentTemplate>

<div style="display: flex; justify-content: flex-start; width: 100%;">
<div style="width: 20%; text-align: end;"><i class="fa fa-sign-in" style="font-size: 30px; margin-right: 7px;" aria-hidden="true"></i></div>
<div class="button-text-align" ><span style="margin-top: 0px; font-size: 18px;">Check-In</span></div>

</div>

</ContentTemplate>

</telerik:RadButton>


</div>

</div>
</div>
</div>

</NestedViewTemplate>
<DetailTables>

<telerik:GridTableView DataKeyNames="JobId">
<DetailItemTemplate>
<div>
testt
</div>
</DetailItemTemplate>
</telerik:GridTableView>
</DetailTables>
<PagerStyle PageSizes="5,10" PagerTextFormat="{4}<strong>{5}</strong> cars matching your search criteria"
PageSizeLabelText="Cars per page:" />
</MasterTableView>
<ClientSettings EnableRowHoverStyle="true" AllowGroupExpandCollapse="true" AllowExpandCollapse="true" EnablePostBackOnRowClick="true">
<Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="" />
</ClientSettings>
</telerik:RadGrid>

Attila Antal

commented on 08 Feb 2023, 01:06 PM

Hi Rohit,

There could be multiple reasons that could prevent the expand/collapse functionality to work. I suggest inspecting the Console tab in the Browser's DevTools to see if there are any JavaScript errors.

Here are some good resources that could give you a hand:

Also, if you have AJAX enabled using either RadAjaxManager, RadAjaxPanel, or asp:UpdatePanels, try removing them temporarily. Just comment them out and test the application again. By having AJAX enabled, server-side exceptions will not show up as you'd expect, but they would come as JS errors. Removing AJAX will reveal those errors and give you a much better idea about the source of the issue.

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

RadGrid expanding and collapsing

2 Answers, 1 is accepted