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

RadGrid show grouping panel using client side

2 Answers 227 Views

Grid

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

2 Answers, 1 is accepted

answered on 21 Feb 2012, 05:15 PM

Sumit:

In order to have the Group Panel available to show on the client side without causing any postback, you'd need to set the ShowGroupPanel="true" and then use the GroupPanel-CssClass="hideGroupPanel" to set the the css properrty: display: none.

Then, you can attach a ShowGroupPanel() JavaScript function to the "OnClientClick" event for your button. This function can reset the GroupPanel-CssClass="rgGroupPanel"

See the video for the functionality in action: http://screencast.com/t/sxtYSfBeD

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="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>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

<style type="text/css">

.hideGroupPanel

{

display: none;

}

</style>

</head>

<body>

<form runat="server" id="mainForm" method="post">

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" >

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

</Scripts>

</telerik:RadScriptManager>

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

<script type="text/javascript">

<!--

function ShowGroupPanel() {

var result = $telerik.$(".hideGroupPanel");

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

result[i].className = "rgGroupPanel";

}

function HideGroupPanel() {

var result = $telerik.$(".rgGroupPanel");

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

result[i].className = "hideGroupPanel";

}

-->

</script>

</telerik:RadCodeBlock>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadGrid ID="RadGrid1" ShowGroupPanel="true" GroupPanel-CssClass="hideGroupPanel" AutoGenerateColumns="False"

DataSourceID="SqlDataSource1" ShowFooter="True" runat="server" GridLines="None"

AllowPaging="True" PageSize="7" OnPreRender="RadGrid1_PreRender"

GroupingSettings-RetainGroupFootersVisibility="true" CellSpacing="0">

<MasterTableView ShowGroupFooter="true">

<GroupHeaderTemplate>

<asp:Label runat="server" ID="Label1" Text='<%# "Number of units: "+ (((GridGroupHeaderItem)Container).AggregatesValues["UnitsInStock"]) %>'

Visible='<%# ((((GridGroupHeaderItem)Container).AggregatesValues["UnitsInStock"]) != null)%>'>

</asp:Label>

<asp:Label runat="server" ID="Label2" Text='<%# "Number of items in group: "+ (((GridGroupHeaderItem)Container).AggregatesValues["AvailableUnits"]) %>'

Visible='<%# ((((GridGroupHeaderItem)Container).AggregatesValues["AvailableUnits"]) != null)%>'>

</asp:Label>

<asp:Label runat="server" ID="Label3" Text='<%# "Product name: "+Eval("ProductName") %>'

Visible='<%# ((((GridGroupHeaderItem)Container).AggregatesValues["ProductName"]) != null)%>'></asp:Label>

<asp:Label runat="server" ID="Label4" Text='<%# "Product price: "+ Eval("UnitPrice") %>'

Visible='<%# ((((GridGroupHeaderItem)Container).AggregatesValues["UnitPrice"]) != null)%>'></asp:Label>

<asp:Label runat="server" ID="Label5" Text='<%# "Total price: "+Eval("TotalPriceResult") %>'

Visible='<%# ((((GridGroupHeaderItem)Container).AggregatesValues["TotalPriceResult"]) != null)%>'>

</asp:Label>

</GroupHeaderTemplate>

<GroupFooterTemplate>

Product count:

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

</asp:Label>

Total units:

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

</asp:Label>

Total sum:

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

</asp:Label>

Total price:

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

</asp:Label>

</GroupFooterTemplate>

<Columns>

<telerik:GridBoundColumn Aggregate="Count" DataField="ProductName" HeaderText="Product name"

SortExpression="ProductName" UniqueName="ProductName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn Aggregate="Sum" DataField="UnitsInStock" HeaderText="Units In Stock"

SortExpression="UnitsInStock" UniqueName="UnitsInStock">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn Aggregate="Sum" DataField="UnitPrice" HeaderText="Unit price"

FooterText="Total price: ">

</telerik:GridBoundColumn>

<telerik:GridCalculatedColumn HeaderText="Total Price" UniqueName="TotalPrice" DataType="System.Double"

DataFields="UnitPrice, UnitsInStock" Expression="{0}*{1}" FooterText="Total : "

Aggregate="Sum" />

</Columns>

<GroupByExpressions>

<telerik:GridGroupByExpression>

<GroupByFields>

<telerik:GridGroupByField FieldName="UnitsInStock" />

</GroupByFields>

<SelectFields>

<telerik:GridGroupByField FieldName="UnitsInStock" Aggregate="Count" FieldAlias="AvailableUnits"

HeaderText="UnitsInStock" />

</SelectFields>

</telerik:GridGroupByExpression>

</GroupByExpressions>

</MasterTableView>

<ClientSettings AllowDragToGroup="true" />

<GroupingSettings ShowUnGroupButton="true" />

</telerik:RadGrid>

<br />

<asp:Button ID="Button1" runat="server" Text="Show Group Panel" OnClientClick="ShowGroupPanel(); return false;" />

<asp:Button ID="Button2" runat="server" Text="Hide Group Panel" OnClientClick="HideGroupPanel(); return false;" />

<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

SelectCommand="SELECT * FROM [Products]" runat="server"></asp:SqlDataSource>

</form>

</body>

</html>

Cheers!