Hide/visible columns in radgrid

[Sandeep]

Hi Team,

I am using RadGrid, in which i have Col1, Col2, Col3, Col4 and Col5. All columns are filterable. I need that when the grid is loaded for first time col4 and col5 should not be visible, but when I right clink on grid header the it should display all columns and I should be able to select col4 and col5 to make columns visible.

can anybody help on this please.

Regards,
Sandy.

[Princy]

Hi Sandeep,

You can use the EnableHeaderContextMenu=true of the radgrid to show and hide column ,when you right click on the headers you can have the options to show or hide columns.In order to hide the column in page load you can set its Display="false".

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" EnableHeaderContextMenu="true" AllowFilteringByColumn="true">

C#:

protected void Page_Load(object sender, EventArgs e)
  {
   if (!IsPostBack)
    {
      RadGrid1.MasterTableView.GetColumn("ColumnUniqueName").Display = false;
    }
  }

Thanks,
Princy

[Sandeep]

Hi Princy,

Thanks for the quick response, it really worked and solved my issue.

I am having another issue, I am having GridClientSelectColumn in bound columns list, How do I hide this column when I right click on grid header.

Regards,
Sandy.

[Princy]

Hi Sandeep,

You can add GridClientSelectColumn,to the columns, this will also be available in the HeaderContextMenu. There you can hide or show the column.PLease try and let me know if any concern.Please find the attached image for the output.

ASPX:

<telerik:GridClientSelectColumn UniqueName="GridClientSelectColumn"></telerik:GridClientSelectColumn>

Thanks,
Princy

[Sandeep]

Hi Princy,

I have already added this column. But I dont want to show when user clicks right button on header.

Regards,
Sandy.

[Princy]

Hi Sandeep,

I guess you donot want to show the GridClientSelectColumn in the HeaderContextMenu,please try the following code snippet.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" EnableHeaderContextMenu="true">

    <HeaderContextMenu OnClientItemOpening="OnClientItemOpening">

    </HeaderContextMenu>

    <MasterTableView>

        <Columns>

            <telerik:GridClientSelectColumn UniqueName="GridClientSelectColumn">

            </telerik:GridClientSelectColumn>  
               . . . . . .       

        </Columns>

    </MasterTableView>

    <ClientSettings Selecting-AllowRowSelect="true">    

    </ClientSettings>

</telerik:RadGrid>

JS:

function OnClientItemOpening(menu, args) {
   var item = args.get_item();
   item.get_items().getItem(0).get_element().style.display = "none";
  }

Thanks,
Princy

[Sandeep]

Hi Princy,

Thank you for reply. It has solved my issue.

Regards,
Sandeep Kumar

[Rohit]

Hi All, 
 this is the very helpful to me and its working fine as expected.


Thanks & Regards
Omveer Singh

[Rohit]

Hi All ,
   I want this kind of functionality on the button because i have to run application on ipad and there is not option of right click on header. 
so how to impliment this approach , i m new user to telerik controls .


thanks .
Omveer singh.

[Princy]

Hi Rohit,

Please have a look into the following sample code snippet to have buttons to obtain HeaderContextMenu:

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="true" AllowPaging="true"    AllowMultiRowSelection="true" OnNeedDataSource="RadGrid1_NeedDataSource" EnableHeaderContextMenu="true"
    OnItemCreated="RadGrid1_ItemCreated">
    <ClientSettings>
        <ClientEvents OnHeaderMenuShowing="HeaderMenuShowing" />
    </ClientSettings>
</telerik:RadGrid>

JS:

<script type="text/javascript">
    function ShowMenuClicked(sender, eventArgs) {
        var cellIndex = sender.get_element().parentNode.cellIndex;
        $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_columns()[cellIndex].showHeaderMenu(eventArgs);
    }
    function HeaderMenuShowing(sender, eventArgs) {
        if (eventArgs.get_domEvent().target &&
                    eventArgs.get_domEvent().target.tagName.toLowerCase() === "th") {
            eventArgs.set_cancel(true);
        }
    }
</script>

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        RadButton radButton;
        GridHeaderItem headerItem = (GridHeaderItem)e.Item;
        for (int i = 0; i < headerItem.Cells.Count; i++)
        {
            radButton = new RadButton();
            radButton.Text = "Show menu";
            radButton.AutoPostBack = false;
            radButton.OnClientClicked = "ShowMenuClicked";
            headerItem.Cells[i].Controls.Add(radButton);
        }
    }
}

Thanks,
Princy

[Abhay]

Multiple RadGrid are going to call this same function. All grids are having telerik:GridClientSelectColumn with different unique name. How to find UniqueName of telerik:GridClientSelectColumn in RowSelected event ?

function RowSelected(sender, eventArgs) {
var grid = sender;
var MasterTable = grid.get_masterTableView();
var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
var uniquename=find uniqueName
var cell = MasterTable.getCellByColumnUniqueName(row, uniquename **Or** CallCustomJsFunction);
}

[Kostadin]

Hi Abhay,

A possible solution is to set an identical UniqueNames of GridClientSelectColumns and this way you will be able to loop through all columns and get the correct one. For instance if you have two grid - ProductGrid and CustomersGrid, you can set a UniqueName to the GridClientSelectColumn similar to the following one - ProductClientSelectColumn and CustomersClientSelectColumn. The you can use the following approach to access the column.

function OnRowSelected(sender, eventArgs)
{
    var grid = sender;
    var MasterTable = grid.get_masterTableView();
    var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
    var columnUniqeName;
    for (var i = 0; i < MasterTable.get_columns().length; i++) {
        if(MasterTable.get_columns()[i].get_uniqueName().indexOf("ClientSelectColumn") != -1)
        {
            columnUniqeName = MasterTable.get_columns()[i].get_uniqueName();
            break;
        }
    }
}

Regards,
Kostadin
Telerik

 

 

[Abhay]

Hi Kostadin,
Thanks for reply!
It works for me.