HeaderContextFilterMenu in RadGrid

[Jiju]

Hello

I have a radgrid of Telerik 2012. The columns are created dynamically as GridBoundColumns. I have set the property EnableHeaderContextFilterMenu to true. My requirement is that, how to put a header context filter menu to the dynamically created gridboundcolumn.

Any help will be highly appreciated.

Regards
Jiju.

[Shinu]

Hi Jiju,

Please take a look into the following code snippet to set the EnableHeaderContextFilterMenu to true dynamically.

C#:

protected void Page_Init(object sender, EventArgs e)
{
   . . .
   RadGrid1.EnableHeaderContextFilterMenu = true;
   RadGrid1.EnableHeaderContextMenu = true;
   RadGrid1.AllowFilteringByColumn = true;
   RadGrid1.AllowSorting = true;
  . . .
}

Regards,
Shinu.

[Jiju]

Hello Shinu

First of all thanks for your help.

The mentioned properties are already set to true. From the demos I could find that header context filter menu is implemented using gridtemplatecolumn, header template and image button, that also at client side. My requirement is how to set like this for a gridboundcolumn at server side.

Regards
Jiju.

[Shinu]

Hi Jiju,

I guess you want an image attached with the GridBoundColumn and want to show EnableHeaderContextFilterMenu on click of that image.Here is the sample code snippet I tried to show the same dynamically.

C#:

void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        GridHeaderItem item = (GridHeaderItem)e.Item;
        TableCell cell = (TableCell)item["EmployeeID"];
        Image img = new Image();
        img.ImageUrl="~/Images/img1.jpg";
        img.ID = "img1";
        img.Attributes.Add("onclick", "ShowColumnHeaderMenu(event,'EmployeeID')"); // EmployeeID is the UniqueName of the BoundColumn
        cell.Controls.Add(img);
    }
}

Javascript:

<script type="text/javascript">
    function ShowColumnHeaderMenu(ev, columnName)
    {
        var grid = $find("<%=RadGrid1.ClientID %>");
        var columns = grid.get_masterTableView().get_columns();

        for (var i = 0; i < columns.length; i++) {
            if (columns[i].get_uniqueName() == columnName) {
                columns[i].showHeaderMenu(ev, 75, 20);
            }
        }
    }
</script>

Thanks,
Shinu.

[Jiju]

Hello Shinu

Great..It really solved my problem. Thanks a lot....


Regards
Jiju.