This is a migrated thread and some comments may be shown as answers.

Change expand collapse image of radgrid

19 Answers 889 Views
Grid
This is a migrated thread and some comments may be shown as answers.
unnikkannan m
Top achievements
Rank 1
unnikkannan m asked on 13 Nov 2009, 07:04 AM
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
 

19 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 13 Nov 2009, 09:40 AM
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.
0
unnikkannan m
Top achievements
Rank 1
answered on 13 Nov 2009, 11:43 AM
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
0
unnikkannan m
Top achievements
Rank 1
answered on 14 Nov 2009, 07:16 AM
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
0
unnikkannan m
Top achievements
Rank 1
answered on 17 Nov 2009, 04:33 AM
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
0
Accepted
Princy
Top achievements
Rank 2
answered on 17 Nov 2009, 05:27 AM
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.
0
unnikkannan m
Top achievements
Rank 1
answered on 17 Nov 2009, 07:00 AM
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
0
Krishnan LN
Top achievements
Rank 1
answered on 19 Feb 2010, 06:29 AM

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> 
0
Badrinarayanan
Top achievements
Rank 1
answered on 07 Sep 2010, 04:19 PM
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.
0
Princy
Top achievements
Rank 2
answered on 08 Sep 2010, 08:05 AM
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.
0
Developer
Top achievements
Rank 1
answered on 14 Sep 2010, 07:57 PM
Thanks Princy, I tried all of them and the latest one worked for me.

Regards.
0
Mário
Top achievements
Rank 1
answered on 02 Jun 2014, 09:58 AM
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



0
Princy
Top achievements
Rank 2
answered on 02 Jun 2014, 10:16 AM
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
0
Mário
Top achievements
Rank 1
answered on 02 Jun 2014, 10:58 AM
That solve my problem.

Thank you Princy.

Mário
0
Mousumi
Top achievements
Rank 1
answered on 12 Nov 2015, 03:59 PM

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.

 

0
Eyup
Telerik team
answered on 17 Nov 2015, 01:12 PM
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
0
Mousumi
Top achievements
Rank 1
answered on 17 Nov 2015, 04:45 PM

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!!

0
Eyup
Telerik team
answered on 20 Nov 2015, 09:31 AM
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
0
Mousumi
Top achievements
Rank 1
answered on 21 Nov 2015, 03:29 PM

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.

0
Eyup
Telerik team
answered on 25 Nov 2015, 08:55 AM
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
Tags
Grid
Asked by
unnikkannan m
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
unnikkannan m
Top achievements
Rank 1
Krishnan LN
Top achievements
Rank 1
Badrinarayanan
Top achievements
Rank 1
Developer
Top achievements
Rank 1
Mário
Top achievements
Rank 1
Mousumi
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or