GridExpandColumn - ExpandImageUrl and ButtonType

[m]

Hi,
I have a hierarchical grid (version 2009.1.402.20 of Telerik.Web.UI ) where I need a expand / collapse column as the rightmost column for the master table. I need to have a particular image for expand / collapse.
I tried following code, however I am not able to get the image set for expand / collapse icons:

 

1. With the following code, I get the expand image set at first time, but on expand / collapse, it goes off (it shows image is not available) and then onwards no image is set.

 

<Telerik:RadGrid ID="rgMyGoals" runat="server" AllowMultiRowSelection="True"

 

 

OnItemDataBound="rg_ItemDataBound"

 

 

AutoGenerateColumns="False" EnableEmbeddedSkins="False"

 

 

GridLines="None" ShowDesignTimeSmartTagMessage="true"

 

 

MasterTableView-RowIndicatorColumn-Visible="true"

 

 

MasterTableView-ExpandCollapseColumn-Display="false" ClientSettings-AllowExpandCollapse="true"

 

 

SelectedItemStyle-CssClass="GridRowSelected" ShowHeader ="false"

 

 

Skin="TP">

 

 

<ClientSettings ClientEvents-OnHierarchyExpanding="HierarchyExpanded" ClientEvents-OnHierarchyExpanded="HierarchyExpanded">

 

 

<Selecting AllowRowSelect="True" />

 

 

<Scrolling AllowScroll="True" />

 

 

</ClientSettings>

 

 

<MasterTableView DataKeyNames="GoalCategoryPK" HierarchyLoadMode="Client"

 

 

BorderWidth="0" GridLines="None" BorderStyle="None" Frame="Void"

 

 

Name="MasterTable" Width="100%" >

 

 

<DetailTables>

 

 

.
.
.
.

 

 

</DetailTables>

 

 

<Columns>

 

 

<Telerik:GridClientSelectColumn UniqueName="SelectColumn" ItemStyle-Width="5%"

 

 

ItemStyle-HorizontalAlign="Left">

 

 

</Telerik:GridClientSelectColumn>

 

 

<Telerik:GridBoundColumn DataField="ObjCategory" UniqueName="ObjCategory" ItemStyle-HorizontalAlign="Left"></Telerik:GridBoundColumn>

 

 

<Telerik:GridExpandColumn ItemStyle-Width="15%" ItemStyle-HorizontalAlign="Right" ButtonType="ImageButton" Display="true" Visible="true"

 

 

ExpandImageUrl="~/expand.gif" UniqueName="ExpandCollapse"

 

 

CollapseImageUrl="~/collpase.gif"></Telerik:GridExpandColumn>

 

 

</Columns>

 

 

 

</MasterTableView>

 

 

 

 

</Telerik:RadGrid>

 

When I changed the above snippet to have ButtonType="LinkButton", I get the  '+' image set for expand as well as collapse. It does not honor the image urls which i have set for ExpandImageUrl / CollapseImageUrl.

I also tried setting these from OnInit(). However that also did not work well. Please guide me  to set and retain the Expand / Collapse images.

Thanks and Regards,
Maitreyee

[Princy]

Hello,

You can achieve this by using one GridButtonColumn with CommandName as 'ExpandCollapse'. And from code behind depending on whether it is expand/collpase, change the ImageUrl.

ASPX:

<telerik:GridButtonColumn UniqueName="GridButtonColumn" ButtonType="ImageButton"
    ImageUrl="../Images/expand.gif" CommandName="ExpandCollapse">
</telerik:GridButtonColumn>

C#:

protected void rgMyGoals_ItemCommand(object source, GridCommandEventArgs e)
   {
       if (e.CommandName == "ExpandCollapse")
       {
           GridDataItem item=(GridDataItem)e.Item;
           if (item.Expanded == false)
           {
               ImageButton imgBtn = (ImageButton)item["GridButtonColumn"].Controls[0];
               imgBtn.ImageUrl = "../Images/collapse.gif";
           }
           if (item.Expanded == true)
           {
               ImageButton imgBtn = (ImageButton)item["GridButtonColumn"].Controls[0];
               imgBtn.ImageUrl = "../Images/expand.gif";
           }
       }
   }

Thanks,
Princy.

[m]

Hi,

Thanks for the reply. However we need to implement the Expand / Collapse at the client side without the postback. Can you please guide for the same?

Thanks and Regards,
Maitreyee

[Martin]

Hello m,

Based on your initial code I have created a small sample that runs as expected on my side. Please also note the following quote from our documentation:

"ButtonType:    Gets a Telerik.Web.UI.GridExpandColumnType value, indicating the type of the button. The button of the GridExpandColumn is always of type ImageButton."

I hope this helps

Regards,
Martin
the Telerik team

[m]

Thanks for the reply.
The sample works in Firefox. However its not working in IE7 and IE8.

One additional thing I noticed with the code that I have posted above is - If my page gets a postback, then the collapse / expand image is shown properly.

Can you please help me in getting the correct image displayed in IE?

Thanks and Regards,
Maitreyee

[Martin]

Hello Maitreyee,

You can try hiding the default expand collapse column on the server:

<telerik:RadGrid ID="RadGrid1" runat="server" OnColumnCreated="RadGrid1_ColumnCreated" ... >
...
</telerik:RadGrid>

Code behind:

protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
{
    if (e.Column is GridExpandColumn)
    {
        e.Column.Visible = false;
    }
}

I hope this helps.

Greetings,
Martin
the Telerik team

[Sreeram]

Dear Martin,

 

The code in sample.zip attached in this forum thread doesnot work in IE 7 & IE 8. It works only with Firefox. The issue we are facing is in IE, when a row is expanded, it just displays a message with text "Expand". I am attaching screen shots with the error in IE and correct behaviour in FF. We are not looking at a server side fix because on expanding a row, we are not really doing a post back.

Thanks,
Sreeram

[Martin]

Hello Sreeram,

The issue you have described is a browser specific behavior that can be reproduced in IE8 Compatibility View, IE7 and bellow. The project works as expected under FF 3.6.8, Chrome 5.0.375.127, Opera 10.60 and Safari 4.0.4.

The problem comes from the fact that in IE versions prior to IE8, the browser counts even the rendered columns that are hidden with style="display: none;". And when you set MasterTableView-ExpandCollapseColumn-Display="false"  the default expand column is rendered on the page, but is set hidden with the CSS rule above.

To go through the problem you have to hide the default expand column on the server. The best approach you can follow to achieve this task, is to wire the ColumnCreated event and hide the column by setting Column.Visible = false; as stated in my previous post.

Attached is a modified version of the project that demonstrates the required changes and works as expected.

I hope this helps.

Best wishes,
Martin
the Telerik team

[Sreeram]

Dear Martin,

Thanks for the post. The solution provided works. Appreciate it.

Regards,
Sreeram