Grouping rather than Sorting on header click

[Richard]

Hi there,

Is it possible that when a user clicks on the column header the grouping is redone so that the grid is grouped by the value of that column rather than the grid being sorted?

Regards, Richard

[Shinu]

Hi Richard,

Try the following code snippet to Group the Grid on clicking the column header.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" Skin="Outlook" AllowSorting="false" ShowGroupPanel="true" DataSourceID="SqlDataSource1" GridLines="None">
            <HeaderContextMenu>
                <CollapseAnimation Duration="200" Type="OutQuint" />
            </HeaderContextMenu>
            <MasterTableView AutoGenerateColumns="False"  DataSourceID="SqlDataSource1">
                <Columns>
                    <telerik:GridBoundColumn DataField="ProductID" DataType="System.Int32" HeaderText="ProductID"
                        SortExpression="ProductID" UniqueName="ProductID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName"
                        UniqueName="ProductName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="SupplierID" DataType="System.Int32" HeaderText="SupplierID"
                        SortExpression="SupplierID" UniqueName="SupplierID">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
              <ClientEvents OnColumnClick="OnColumnClick"  />
            </ClientSettings>

        </telerik:RadGrid><br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthWindConnectionString %>"
            SelectCommand="SELECT [ProductID], [ProductName], [SupplierID] FROM [Alphabetical list of products]">
        </asp:SqlDataSource>

JS:

<script type="text/javascript" >
 function OnColumnClick(sender, eventArgs)
 {
  __doPostBack("<%= RadGrid1.UniqueID %>",  "ColumnClicked:" + eventArgs.get_gridColumn().get_uniqueName());
 }
</script>

CS:

 protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument)
    {
        base.RaisePostBackEvent(source, eventArgument);

        if (source == this.RadGrid1 && eventArgument.IndexOf("ColumnClicked") != -1)
        {

            string strUniqueName = eventArgument.Split(':')[1];
            ArrayList arrClickedColumn;
            if (Session["arrClickedColumn"] == null)
            {
                arrClickedColumn = new ArrayList();
            }
            else
            {
                arrClickedColumn = (ArrayList)Session["arrClickedColumn"];
            }
            if (!arrClickedColumn.Contains(strUniqueName))
                arrClickedColumn.Add(strUniqueName);
            Session["arrClickedColumn"] = arrClickedColumn;

            if (RadGrid1.MasterTableView.GroupByExpressions.Count > 0)
            {
                bool newGroup = true;
                int GroupIndex;

                for (GroupIndex = 0; GroupIndex < RadGrid1.MasterTableView.GroupByExpressions.Count; GroupIndex++)
                {
                    if (RadGrid1.MasterTableView.GroupByExpressions[GroupIndex].Expression.Contains(strUniqueName))
                        newGroup = false;
                }
                if (Session["arrClickedColumn"] != null)
                {
                    ArrayList arrColumns = (ArrayList)Session["arrClickedColumn"];
                    int arrColumnCount;
                    if (newGroup == true)
                    {
                        arrColumnCount = arrColumns.Count - 1;
                        AddGroup(strUniqueName);
                        strUniqueName = string.Empty;
                    }
                    else
                        arrColumnCount = arrColumns.Count;
                    int columnCount;
                    for (columnCount = 0; columnCount < arrColumnCount; columnCount++)
                    {
                        if (arrColumns[columnCount].ToString() == strUniqueName)
                        {
                            string strGrpexp = strUniqueName + " " + "Group By" + " " + strUniqueName;
                            RadGrid1.MasterTableView.GroupByExpressions.Remove(strGrpexp);
                            strUniqueName = string.Empty;
                        }

                    }

                }
            }
            else
            {
                AddGroup(strUniqueName);
            }

            RadGrid1.Rebind();

        }
    }

    private void AddGroup(string strUniqueName)
    {
        if (strUniqueName != String.Empty)
        {
            GridGroupByExpression expression = new GridGroupByExpression();
            GridGroupByField gridGroupByField = new GridGroupByField();
            gridGroupByField = new GridGroupByField();
            gridGroupByField.FieldName = strUniqueName;
            gridGroupByField.HeaderText = strUniqueName;
            expression.SelectFields.Add(gridGroupByField);
            expression.GroupByFields.Add(gridGroupByField);

            RadGrid1.MasterTableView.GroupByExpressions.Add(expression);
            strUniqueName = string.Empty;
        }
    }

Set AllowSorting to false if you don't want this functionality.

Regards
Shinu

[Ross]

This code is exactly what I need, however i'm trying to implement it in a user control.

My code is pretty much the same as above, with minor changes as it's a user control:

public partial class Products_ProductSearch : System.Web.UI.UserControl, IPostBackEventHandler
{

  public void RaisePostBackEvent(string eventArgument)
  {
    //do stuff
  }

}

However RaisePostBackEvent is never called. I'm guessing my problem is with the javascript.

I've read through a number of threads but i'm not getting anywhere, any ideas?

Thanks, Ross

[Richard]

I have discovered the other option is to utilise the AllowCustomSorting property and use the SortCommand event Handler.