Change expand collapse image of radgrid

[unnikkannan m]

Hello Everyone,

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

SingleMinus.gif,

SinglePlus.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
 

[Princy]

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.

[unnikkannan m]

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

[unnikkannan m]

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

[unnikkannan m]

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

[Princy]

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.

[unnikkannan m]

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

[Krishnan LN]

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>

[Badrinarayanan]

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.

[Princy]

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.

[Developer]

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

Regards.

[Mário]

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

[Princy]

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

[Mário]

That solve my problem.

Thank you Princy.

Mário

[Mousumi]

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.

 

[Eyup]

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

[Mousumi]

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

[Eyup]

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

[Mousumi]

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.

[Eyup]

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