Change expand collapse image of radgrid

20 posts, 1 answers
  1. unnikkannan m
    unnikkannan m avatar
    31 posts
    Member since:
    Aug 2009

    Posted 13 Nov 2009 Link to this post

    Hello Everyone,

         I'm using radgrid with the detail table.
        I need to change the expand-collapse button of the radgrid to

    SingleMinus.gifSingleMinus.gif,

    SinglePlus.gifSinglePlus.gif    so that the users can easily identify that the detail table is there.

    Please give a solution, i'm providing the users to change the theme too. So the change should be applicable when applying different themes.

    Thanks In Advance
     Unni
     
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Nov 2009 Link to this post

    Hi Unni,

    You can try out the following css settings to change the Expand/Collapse images in your grid:
    css:
    <style type="text/css"
       .rgExpand  
        {  
          background:url('Images/Image1.gif'center center no-repeat !important;       
        }  
      
       .rgCollapse  
        {  
          background:url('Images/Image2.gif'center center no-repeat !important;  
        }  
    </style> 

    Thanks
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. unnikkannan m
    unnikkannan m avatar
    31 posts
    Member since:
    Aug 2009

    Posted 13 Nov 2009 Link to this post

    Hai Princy,
         Thank you very much for fast reply.
         I tried with the css that you provided. But the image is not shown when we can expand and collapse the detail table. Is it needed to set any other property for setting the image visibility to true??


    Regards
    Unni
  5. unnikkannan m
    unnikkannan m avatar
    31 posts
    Member since:
    Aug 2009

    Posted 14 Nov 2009 Link to this post

    Hai,
       I didn't got a reply from the telerik team the last answered was Princy but that solution was not enough to solve the issue. Please some one have an attention to this problem and give me a solution.

    Regards
    Unni
  6. unnikkannan m
    unnikkannan m avatar
    31 posts
    Member since:
    Aug 2009

    Posted 16 Nov 2009 Link to this post

    Hai Telerik Team,
          This is for the first time for the Telerik Team that I'm not getting a response. 2 days had already passed i didn't got any reply. Is there any maintenance work going behind.
          Please help me

    Regards
    Unni
  7. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Nov 2009 Link to this post

    Hello Unni,

    Try out the following settings and see if it helps:
    aspx:
    <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server">  
                    <MasterTableView DataSourceID="SqlDataSource1" ExpandCollapseColumn-ButtonType="ImageButton"  
    ExpandCollapseColumn-CollapseImageUrl="Images/Collapse.gif"   
    ExpandCollapseColumn-ExpandImageUrl="Images/Expand.gif" >  

    Thanks
    Princy.
  8. unnikkannan m
    unnikkannan m avatar
    31 posts
    Member since:
    Aug 2009

    Posted 17 Nov 2009 Link to this post

    Hai Princy,

        Thank you very much. The code worked. I know that the telerik team would provide the solution at the earliest.
    Once again Thanks a lot...


    Regards
    Unni
  9. Krishnan LN
    Krishnan LN avatar
    16 posts
    Member since:
    Feb 2010

    Posted 19 Feb 2010 Link to this post

    Hi,
    I have the same issue and the above code is not working for me.

    Following is my code

    <telerik:RadGrid ID="RadGrid1" runat="server" AllowMultiRowSelection="False" AutoGenerateColumns="True"   
         OnNeedDataSource="RadGrid1_NeedDataSource" OnColumnCreated="RadGrid1_ColumnCreated" OnItemCreated="RadGrid1_ItemCreated" OnItemDataBound="RadGrid1_ItemDataBound">  
                <MasterTableView HierarchyDefaultExpanded="true" HierarchyLoadMode="Client" AllowSorting="true" 
                    DataKeyNames="ID, ParentID" Width="100%" ExpandCollapseColumn-ButtonType="ImageButton" ExpandCollapseColumn-CollapseImageUrl="Images/plus.png"      
                    ExpandCollapseColumn-ExpandImageUrl="Images/minus.png">  
                    <SelfHierarchySettings ParentKeyName="ParentID" KeyName="ID" /> 
                </MasterTableView> 
                <ClientSettings AllowExpandCollapse="true" /> 
            </telerik:RadGrid> 
  10. Badrinarayanan
    Badrinarayanan avatar
    21 posts
    Member since:
    Apr 2008

    Posted 07 Sep 2010 Link to this post

    Hi,
    Following is my code.
    <telerik:RadGrid ID="radgridSegment36" EnableEmbeddedSkins="true" runat="server"
                                BorderStyle="None" Skin="WebBlue" AllowAutomaticInserts="false" AutoGenerateColumns="false">
                                <ItemStyle HorizontalAlign="Right" Height="20px" Width="150px" CssClass="RowStyle" />
                                <AlternatingItemStyle HorizontalAlign="Right" Height="20px" Width="150px" BackColor="White" />
                                <MasterTableView Width="900px" GroupLoadMode="Client" TableLayout="Fixed" GroupsDefaultExpanded="true"
                                  ShowHeader="false" ExpandCollapseColumn-ButtonType="ImageButton" ExpandCollapseColumn-CollapseImageUrl="App_Themes/WebBlue/Grid/SingleMinus.gif"
                                  ExpandCollapseColumn-ExpandImageUrl="App_Themes/WebBlue/Grid/SinglePlus.gif"  ExpandCollapseColumn-ItemStyle-BackColor="Transparent"  ExpandCollapseColumn-Visible="false">
                                  <GroupByExpressions>
                                    <telerik:GridGroupByExpression>
                                      <SelectFields>
                                        <telerik:GridGroupByField FieldName="cost_type" HeaderText='<%Bind("cost_type") %>'
                                          HeaderValueSeparator=""></telerik:GridGroupByField>
                                      </SelectFields>
                                      <GroupByFields>
                                        <telerik:GridGroupByField FieldName="cost_type" HeaderText='<%Bind("cost_type") %>'>
                                        </telerik:GridGroupByField>
                                      </GroupByFields>
                                    </telerik:GridGroupByExpression>
                                  </GroupByExpressions>
                                  <Columns>
                                    <telerik:GridBoundColumn DataField="calculation_type" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="150px">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Year1" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="150px">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Year2" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="150px">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Year3" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="150px">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Total" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="150px">
                                    </telerik:GridBoundColumn>
                                  </Columns>
                                </MasterTableView>
                                <ClientSettings AllowGroupExpandCollapse="True" ReorderColumnsOnClient="false" AllowDragToGroup="false"
                                  AllowColumnsReorder="false">
                                  <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True">
                                  </Scrolling>
                                </ClientSettings>
                              </telerik:RadGrid>


    Though, I have specified "Image Button" , it still retains the push button and the Text of the Group gets pushed to the next row.  Please advise.
  11. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Sep 2010 Link to this post

    Hello Badrinarayanan,

    Try the following code in ColumnCreated event to change the group expand/collapse image.

    C#:
    protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
        {
           if (e.Column is GridGroupSplitterColumn)
            {
                (e.Column as GridGroupSplitterColumn).ExpandImageUrl = "App_Themes/WebBlue/Grid/SinglePlus.gif";
                (e.Column as GridGroupSplitterColumn).CollapseImageUrl = "App_Themes/WebBlue/Grid/SingleMinus.gif";
            }
        }

    Thanks,
    Princy.
  12. Developer
    Developer avatar
    16 posts
    Member since:
    Jun 2009

    Posted 14 Sep 2010 Link to this post

    Thanks Princy, I tried all of them and the latest one worked for me.

    Regards.
  13. Mário
    Mário avatar
    10 posts
    Member since:
    Jun 2014

    Posted 02 Jun 2014 Link to this post

    Hello,

    That last indication did not work for me.

    So, i added OnColumnCreated="rgProcessos_ColumnCreated" to <telerik:RadGrid ... >

    After, i put the following code in file.cs:

        protected void rgProcessos_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
        {
            if (e.Column is GridGroupSplitterColumn)
            {
                (e.Column as GridGroupSplitterColumn).ExpandImageUrl = "Images/SinglePlus.gif";
                (e.Column as GridGroupSplitterColumn).CollapseImageUrl = "Images/SingleMinus.gif";
            }
        }

    Am i doing something wrong? 
    Thanks



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

    Posted 02 Jun 2014 in reply to Mário Link to this post

    Hi Mário,

    I'm not sure if you want to set Grouping image or Expand/Collapse image on hierarchy. Please take a look at the below code snippet.

    C#:
    protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
    //To set Expand/Collapse Image for Grouping
        if (e.Column is GridGroupSplitterColumn)
        {
            (e.Column as GridGroupSplitterColumn).ExpandImageUrl = "~/Image/down.png";
            (e.Column as GridGroupSplitterColumn).CollapseImageUrl = "~/Image/up.jpg";
        }  
    //To set Expand/Collapse on Hierarchy Grid
       if (e.Column is GridExpandColumn)
            {
                (e.Column as GridExpandColumn).ButtonType = GridExpandColumnType.ImageButton;
     
                (e.Column as GridExpandColumn).ExpandImageUrl = "Image/down.jpg";
                (e.Column as GridExpandColumn).CollapseImageUrl = "Image/up.jpg";
            }
    }

    Thanks,
    Princy
  15. Mário
    Mário avatar
    10 posts
    Member since:
    Jun 2014

    Posted 02 Jun 2014 Link to this post

    That solve my problem.

    Thank you Princy.

    Mário
  16. Mousumi
    Mousumi avatar
    4 posts
    Member since:
    Sep 2015

    Posted 12 Nov 2015 Link to this post

    Hi,

    I have a radgrid with one detailtable inside it and a gridtableview inside the detailtable. I want to have expand/collapse image and expand and collapse functionality for the gridtableview records. 

    For ex: if "order id" and "date ordered" are columns inside the gridtableview, there should be expand/collapse image and I should be expand and collapse the records.

    Thanks.

     

  17. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 17 Nov 2015 Link to this post

    Hello Mousumi,

    You can traverse the detail tables using the approach demonstrated in the following article and apply your custom logic to display or hide the expand buttons:
    http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/hierarchical-grid-types-and-load-modes/how-to/hiding-the-expand-collapse-images-when-no-records

    Hope this helps.

    Regards,
    Eyup
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  18. Mousumi
    Mousumi avatar
    4 posts
    Member since:
    Sep 2015

    Posted 17 Nov 2015 Link to this post

    Hi Eyup,

    Thanks for the reply.

    I would require some more help. In the above link, the columns: order id, Date Ordered, Employee Id are inside the gridtableview.

    Please share with me the code that displays the expand/collapse image against the header of the above columns, so that the records of the gridtableview can be expanded and collapsed. Right now, the expand collapse image does not display by default in my screen.

    Thanks!!

  19. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 20 Nov 2015 Link to this post

    Hello Mousumi,

    Do you mean the ExpandAll button as demonstrated here?
    http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/declarative-relations/defaultcs.aspx

    Or perhaps you use NestedViewTemplate?
    http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/hierarchy-with-templates/defaultcs.aspx

    Regards,
    Eyup
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  20. Mousumi
    Mousumi avatar
    4 posts
    Member since:
    Sep 2015

    Posted 21 Nov 2015 Link to this post

    Hi,

    In the example given in the first link, I want ExpandAll button against the header of unit price as highlighted in the attached image.

  21. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 25 Nov 2015 Link to this post

    Hello Mousumi,

    Generally, this requirement is not supported. You can log it as a feature request in our improvements portal and our dev team may consider implementing it for the future releases:
    http://feedback.telerik.com/Project/108


    Nevertheless, you can try to incorporate some custom solution similar to this:
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridHeaderItem && e.Item.OwnerTableView.Name == "OrderDetails")
        {
            GridHeaderItem headerItem = (GridHeaderItem)e.Item;
            GridNestedViewItem container = headerItem.OwnerTableView.NamingContainer as GridNestedViewItem;
            if (container.Cells[0].Controls.Count == 0)
            {
                Button button = new Button()
                {
                    ID = "CustomExpandAll",
                    Text = "Expand All"
                };
     
                button.Click += (o, a) =>
                {
                    GridDataItem item = RadGrid1.MasterTableView.Items[0];
                    item.FireCommandEvent("ExpandCollapseAll", "");
                };
     
                container.Cells[0].Controls.Add(button);
            }
        }
    }

    Hope this helps.

    Regards,
    Eyup
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017