Sorting the grid

[Marja]

We're evaluating the trial version of the Telerik AJAX control suite, and we like it very much.

However, regarding the Grid we're wondering why we need to sort a column in ascending order first when we know upfront we want to sort descending.
The way it is now we need to fetch all data twice which costs extra time and is irritating as well.

Why not 2 sort arrows in the column header so we can trigger the sorting order we need right away?

[Princy]

Hi Marja,

You can change the way the sort mode changes using the SortCommand event of the RadGrid and setting AllowCustomSorting="true". One suggestion is that you can customize the headers to show image buttons for Ascending/Descending and write code to handle the events for the sort respectively.
Below is a sample code snippet that i tried to sort in Descending at first.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" OnSortCommand="RadGrid1_SortCommand">
    <MasterTableView AllowCustomSorting="true">

C#:

protected void RadGrid1_SortCommand(object sender, GridSortCommandEventArgs e)
{
    GridSortExpression sortExpr = new GridSortExpression();
    switch (e.OldSortOrder)
    {
        case GridSortOrder.None:
            sortExpr.FieldName = e.SortExpression;
            sortExpr.SortOrder = GridSortOrder.Descending;
            e.Item.OwnerTableView.SortExpressions.AddSortExpression(sortExpr);
            break;
        case GridSortOrder.Ascending:
            sortExpr.FieldName = e.SortExpression;
            sortExpr.SortOrder = RadGrid1.MasterTableView.AllowNaturalSort ? GridSortOrder.None : GridSortOrder.Descending;
            e.Item.OwnerTableView.SortExpressions.AddSortExpression(sortExpr);
            break;
        case GridSortOrder.Descending:
            sortExpr.FieldName = e.SortExpression;
            sortExpr.SortOrder = GridSortOrder.Ascending;
            e.Item.OwnerTableView.SortExpressions.AddSortExpression(sortExpr);
            break;
    }
    e.Canceled = true;
    RadGrid1.Rebind();

    if (!e.Item.OwnerTableView.SortExpressions.ContainsExpression(e.SortExpression))
    {
        sortExpr.FieldName = e.SortExpression;
        sortExpr.SortOrder = GridSortOrder.Ascending;
        e.Item.OwnerTableView.SortExpressions.AddSortExpression(sortExpr);
    }
}

Thanks,
Princy

[Marja]

Hi Princy,

Your example shows how to change the default sort order.
That's not what I'm after: I want 2 sort icons in each column header: 1 for sorting in ascending order and one for sorting in descending order.

But you also say: "Also you can customize the headers to show image buttons to perform the Ascending/Descending sort."

So how would I always show 2 sort icons in the column headers, so that the user can at any time either click on the 'asc' order icon or on the 'desc' order icon?

[Jayesh Goyani]

Hello,

You can simply achieve this thing by using context menu.
Grid - Context Menu

Thanks,
Jayesh Goyani

[Marja]

Ah yes, I see.
However, I would like to get 2 visible sort icons directly in each column header, so the user doesn't have to open a context menu first to find them.

[Marja]

Sorry, I understand now what I need to do:
I need to create all GridTemplateColumn type columns for my grid. That way I can define a custom header cell for all columns, with 2 sort arrows in it.

But... won't that be a lot slower than using regular GridBoundColumn type columns?

[Princy]

Hi Marja,

You don't have to create TemplateColumns to achieve this. In the ItemCreated event of the RadGrid, you can add ImageButton as shown below in the sample code snippet. Set the CommandName of the buttons so as to Identify them and handle the functionality in the ItemCommand event.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" OnItemCreated="RadGrid1_ItemCreated" OnItemCommand="RadGrid1_ItemCommand">
    <MasterTableView DataKeyNames="OrderID">
        <Columns>
            <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID"/>
            <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity"/>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    int i = 0;
    if (e.Item is GridHeaderItem)
    {
        GridHeaderItem header = (GridHeaderItem)e.Item;
        foreach (GridColumn col in RadGrid1.Columns)
        {
            ImageButton asc = new ImageButton();
            asc.ImageUrl = "~Image/ASC.jpg";
            asc.ID = "ASC" + i;
            asc.CommandName = "AscSort";
            asc.CommandArgument = col.UniqueName;
            header[col.UniqueName].Controls.Add(asc);
            i++;

            ImageButton desc = new ImageButton();
            desc.ImageUrl = "~Image/DESC.jpg";
            desc.ID = "DESC" + i;
            desc.CommandName = "DescSort";
            desc.CommandArgument = col.UniqueName;
            header[col.UniqueName].Controls.Add(desc);
            i++;
        }
    }
}

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == "AscSort")
    {
        GridSortExpression sortExprAsc = new GridSortExpression();
        sortExprAsc.FieldName = e.CommandArgument.ToString();
        sortExprAsc.SortOrder = GridSortOrder.Ascending;
        e.Item.OwnerTableView.SortExpressions.AddSortExpression(sortExprAsc);
    }
    else if (e.CommandName == "DescSort")
    {
        GridSortExpression sortExprDesc = new GridSortExpression();
        sortExprDesc.FieldName = e.CommandArgument.ToString();
        sortExprDesc.SortOrder = GridSortOrder.Descending;
        e.Item.OwnerTableView.SortExpressions.AddSortExpression(sortExprDesc);
    }
    e.Canceled = true;
    RadGrid1.Rebind();
}

Thanks,
Princy