Hide/visible columns in radgrid

13 posts, 0 answers
  1. Sandeep
    Sandeep avatar
    22 posts
    Member since:
    Apr 2013

    Posted 04 Oct 2013 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Oct 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sandeep
    Sandeep avatar
    22 posts
    Member since:
    Apr 2013

    Posted 04 Oct 2013 Link to this post

    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.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Oct 2013 Link to this post

    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
  6. Sandeep
    Sandeep avatar
    22 posts
    Member since:
    Apr 2013

    Posted 04 Oct 2013 Link to this post

    Hi Princy,

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

    Regards,
    Sandy.
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Oct 2013 Link to this post

    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
  8. Sandeep
    Sandeep avatar
    22 posts
    Member since:
    Apr 2013

    Posted 10 Oct 2013 Link to this post

    Hi Princy,

    Thank you for reply. It has solved my issue.

    Regards,
    Sandeep Kumar
  9. Rohit
    Rohit avatar
    5 posts
    Member since:
    Jul 2013

    Posted 15 Jan 2014 Link to this post

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


    Thanks & Regards
    Omveer Singh
  10. Rohit
    Rohit avatar
    5 posts
    Member since:
    Jul 2013

    Posted 16 Jan 2014 Link to this post

    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.

  11. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Jan 2014 Link to this post

    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
  12. Abhay
    Abhay avatar
    4 posts
    Member since:
    Feb 2015

    Posted 04 Feb 2015 in reply to Princy Link to this post

    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);
    }
  13. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 09 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  14. Abhay
    Abhay avatar
    4 posts
    Member since:
    Feb 2015

    Posted 11 Feb 2015 in reply to Kostadin Link to this post

    Hi Kostadin,
    Thanks for reply!
    It works for me.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017