Sort button on filter row

[David]

Some days ago, I asked a question to remove the header row and making a label with the header text on the filter row, and switching to the filter when the label is clicked, and going back to the label when the textbox blurs.

The code to achieve that is:

C#

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        e.Item.Visible = false;
        e.Item.Display = false;
    }
    if (e.Item is GridFilteringItem)
    {
        GridHeaderItem header = RadGrid1.MasterTableView.GetItems(GridItemType.Header)[0] as GridHeaderItem;

        GridFilteringItem filterItem = e.Item as GridFilteringItem;
        for (int i = 0; i < header.Cells.Count; i++)
        {
            Label label = new Label();
            label.Text = header.Cells[i].Text;

            if (filterItem.Cells[i].Controls.Count > 0)
            {
                TextBox textbox = filterItem.Cells[i].Controls[0] as TextBox;
                textbox.CssClass = "hidden";

                Button button = filterItem.Cells[i].Controls[1] as Button;
                button.CssClass = "hidden";

                filterItem.Cells[i].Controls.Add(label);

                label.Attributes.Add("onclick", "showFilterItem('" + label.ClientID + "','" + textbox.ClientID + "','" + button.ClientID + "')");
                textbox.Attributes.Add("onblur", "hideFilterItem('" + label.ClientID + "','" + textbox.ClientID + "','" + button.ClientID + "')");
            }
        }
    }
}

Javascript:

<script type="text/javascript">
    //Put your JavaScript code here.
    function showFilterItem(labelID, textID, buttonID) {
        $get(labelID).className = "hidden";
        $get(textID).className = "visible";
        $get(buttonID).className = "visibleButton";
    }
    function hideFilterItem(labelID, textID, buttonID) {
        $get(labelID).className = "visible";
        $get(textID).className = "hidden";
        $get(buttonID).className = "hidden";
    }


</script>

CSS

<style type="text/css">
    .hidden
    {
        display: none !important;
    }
    .visible
    {
        display: "";
        margin-top: 0px;
        height: 10px;
    }
    .rcbArrowCell
    {
        display: none !important;
    }
    .rgFilterRow td
    {
        border-right: none !important;
    }
    .RadGrid .rgFilterRow .rcbInputCell
    {
        padding:0;
        border-width:0;
    }
    .visibleButton
    {
        display: "";
        background-image: url('icon-filter.gif');
        height: 16px;
        background-repeat: no-repeat;
    }

</style>

But if I set the radgrid property AllowSorting to True, the label disappears, as the headercell does not contain any text (the label doesn't disappear, but its text is null). I know it is a hyperlink, but I cant get the href link with code behind.

How do I fetch the Sort function from the header cell, so I can put the function in a button right beside the label?

[Shinu]

Hi,

One suggestion is that you can add a LinkButton with CommandName as shown below.
C#:

protected void RadGrid2_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == "Sort")
    {
        GridSortExpression expression = new GridSortExpression();
        expression.FieldName = "OrderID";
        expression.SortOrder = GridSortOrder.Descending;
        RadGrid2.MasterTableView.SortExpressions.AddSortExpression(expression);
        RadGrid2.MasterTableView.Rebind();
    }
}
protected void RadGrid2_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        foreach (GridColumn col in RadGrid2.Columns)
        {
            GridFilteringItem fitem = (GridFilteringItem)e.Item;
            LinkButton btn = new LinkButton();
            btn.CommandName = "Sort";
            btn.Text = "sort";
            fitem[col.UniqueName].Controls.Add(btn);
        }
    }
}

Thanks,
Shinu

[David]

ok, now there is a link button beside the label, but I need each of the links to sort the column they are in

I need to get the column uniquename to set it on this line

expression.FieldName = "OrderID";

because all the sorts perform the same action (on the same column)


Also, I would like the sort to do ascending and descending alternated

[David]

Well, I made some changes to the code, and now each sort takes action on the column they belong (using some dirty tricks)

C#

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    string cmd = e.CommandName;
    if (cmd.Length >= 4)
    {
        string sort = cmd.Substring(0, 4);
        if (sort == "Sort")
        {
            GridSortExpression expression = new GridSortExpression();
            expression.FieldName = cmd.Substring(4);
            expression.SortOrder = GridSortOrder.Ascending;
            RadGrid1.MasterTableView.SortExpressions.AddSortExpression(expression);
            RadGrid1.MasterTableView.Rebind();
        }
    }
}
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        foreach (GridColumn col in RadGrid1.Columns)
        {
            GridFilteringItem fitem = (GridFilteringItem)e.Item;

            ImageButton imgbtn = new ImageButton();
            imgbtn.CommandName = "Sort" + col.UniqueName;
            imgbtn.ImageUrl = "sort_icon.gif";

            fitem[col.UniqueName].Controls.Add(imgbtn);
        }
    }
}

But I still want the sorting to do ascending, descending and none, alternated.

I've tried to implement the code in the demo:

protected void RadGrid1_SortCommand(object source, GridSortCommandEventArgs e)
    {
        GridSortExpression sortExpr = new GridSortExpression();
        TextBox1.Visible = false;
        switch (e.OldSortOrder)
        {
            case GridSortOrder.None:
                sortExpr.FieldName = e.SortExpression;
                sortExpr.SortOrder = GridSortOrder.Ascending;

                e.Item.OwnerTableView.SortExpressions.AddSortExpression(sortExpr);
                break;

            case GridSortOrder.Ascending:
                sortExpr.FieldName = e.SortExpression;
                sortExpr.SortOrder = GridSortOrder.Descending;

                e.Item.OwnerTableView.SortExpressions.AddSortExpression(sortExpr);
                break;

            case GridSortOrder.Descending:
                sortExpr.FieldName = e.SortExpression;
                sortExpr.SortOrder = GridSortOrder.None;

                e.Item.OwnerTableView.SortExpressions.AddSortExpression(sortExpr);
                break;
        }

        e.Canceled = true;
        RadGrid1.Rebind();
    }

But it doesn''t seem to reach this part of the code when clicking on the sort button.

Could you help me?