How to remove expand/collapse icon in red pivot grid

2 posts, 0 answers
  1. Mohan
    Mohan avatar
    9 posts
    Member since:
    Aug 2018

    Posted 20 Aug 2018 Link to this post

    Hello Team,

    is there any property to which could help me set the hide the expand/collapse icon of my rad pivot grid. 

    Note: am setting my rows and column field using server side code. ex:

     PivotGridColumnField columnField = new PivotGridColumnField();
                    columnField.DataField = name;
                    columnField.UniqueName = name;
                    RadPivotGrid1.Fields.Add(columnField);

     

    refer attachment for pivot grid.

    Thanks,

    Mohan Pal.

  2. Attila Antal
    Admin
    Attila Antal avatar
    323 posts

    Posted 23 Aug 2018 Link to this post

    Hi Mohan,

    Hiding the expand/collapse icons can de done using CSS and override the base classes.

    For example, to hide them unconditionally at all times, you can use one of the following approaches.
    <style>
        /* Hide only the expand icons */
        .RadPivotGrid .rpgRowHeader .rpgExpandIcon,
        .RadPivotGrid .rpgColumnHeader .rpgExpandIcon{
            display: none;
        }
     
        /* Hide only the collapse icons */
        .RadPivotGrid .rpgRowHeader .rpgCollapseIcon,
        .RadPivotGrid .rpgColumnHeader .rpgCollapseIcon {
            display: none;
        }
     
        /* Hide both collapse and expand icons */
        .RadPivotGrid .rpgRowHeader .rpgExpandIcon,
        .RadPivotGrid .rpgRowHeader .rpgCollapseIcon,
        .RadPivotGrid .rpgColumnHeader .rpgExpandIcon,
        .RadPivotGrid .rpgColumnHeader .rpgCollapseIcon {
            display: none;
        }
    </style>

    If you wish to hide the icons conditionally, you can assign a custom CSS class name to the fields, like the example below. (this can even be done programmatically if needed)
    <telerik:PivotGridRowField CellStyle-CssClass="noIcon">
    </telerik:PivotGridRowField>
    <telerik:PivotGridColumnField CellStyle-CssClass="noIcon">
    </telerik:PivotGridColumnField>

    Then define the CSS class with the following rule:
    <style>
        /* Conditional hiding with custom CSS class */
        .RadPivotGrid .noIcon .rpgExpandIcon,
        .RadPivotGrid .noIcon .rpgCollapseIcon {
            display: none;
        }
    </style>

    I hope this will prove helpful.

    Kind regards,
    Attila Antal
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top