RadGrid ExpandCollapse Column Width

[Jon Walsh]

I have a pretty simple grid that I want the users to be able to expand the row for more information. The issue I am having is that the default ExpandCollapseColumn the grid drops in is something like 100px wide (maybe wider) and shows images of both a right-pointing icon and a left-pointing icon (e.g. " >      < ").

The following is my grid declaration:

<telerik:RadGrid runat="server" ID="grdResults" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" GridLines="None" OnNeedDataSource="grdResults_NeedDataSource" >
    <MasterTableView DataKeyNames="ClaimId" CommandItemDisplay="None" PageSize="50" Width="100%" HierarchyLoadMode="ServerOnDemand">
        <RowIndicatorColumn> 
            <HeaderStyle Width="20px"></HeaderStyle> 
        </RowIndicatorColumn> 
        <ExpandCollapseColumn> 
            <HeaderStyle Width="20px"></HeaderStyle> 
        </ExpandCollapseColumn>
        <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" Position="Bottom" />
        <Columns>
            <telerik:GridBoundColumn UniqueName="claimIdColumn" DataField="ClaimId" HeaderText="" Visible="false"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="policyIdColumn" DataField="PolicyId" HeaderText="" Visible="false"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="carrierIdColumn" DataField="CarrierId" HeaderText="" Visible="false"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="fileNumberColumn" DataField="FileNumber" HeaderText="File Number"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="carrierNameColumn" DataField="CarrierFormattedName" HeaderText="Carrier Name"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="carrierPolicyNumberColumn" DataField="PolicyNumber" HeaderText="Policy Number"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="carrierClaimNumberColumn" DataField="ClaimNumber" HeaderText="Claim Number"></telerik:GridBoundColumn>
            <telerik:GridDateTimeColumn UniqueName="lossDateColumn" DataField="LossDate" HeaderText="Date of Loss" DataFormatString="{0:M/d/yyyy}"></telerik:GridDateTimeColumn>
            <telerik:GridBoundColumn UniqueName="insuredNameColumn" DataField="PolicyHolderDisplayName" HeaderText="Insured Name"></telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="lossCityStateColumn" HeaderText="Loss Location" SortExpression="Location">
                <ItemTemplate>
                    <%# Eval("LossCity") %>,&nbsp<%# Eval("LossState") %>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn UniqueName="lossPostalColumn" DataField="LossPostal" HeaderText="Loss ZIP"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="lossCatNumber" DataField="CatNumber" HeaderText="CAT No."></telerik:GridBoundColumn>
        </Columns>
        <NestedViewSettings>
            <ParentTableRelation>
                <telerik:GridRelationFields DetailKeyField="ClaimId" MasterKeyField="ClaimId" />
            </ParentTableRelation>
        </NestedViewSettings>
        <NestedViewTemplate>                                               
            <asp:Panel runat="server" ID="pnlDetails" BackColor="Ivory" >
                <fieldset style="padding:10px;">  
                    Details will go here.
                </fieldset>
            </asp:Panel>
        </NestedViewTemplate>
        <NoRecordsTemplate>
            No data found
        </NoRecordsTemplate>
    </MasterTableView>
</telerik:RadGrid>

Searched through the forum for answers and everything I have tried doesn't seem to work. There is one thread that suggests setting the MasterTableView-ExpandCollapseColumn-HeaderStyle-Width in the grid declaration but that was unsuccessful. In addition, there were various suggestions of changing the width on OnColumnCreated event but that too did not work.

I have the 2011 Q1 Release of the tools and am running IE8 (both compatibility mode on and off). Any kind of help would be greatly appreciated.

~ Jon

[Princy]

Hello Jon,

Please have a look at the following forums. Hope it will help.
Controlling width of an expand column
Expand / collapse image size

Thanks,
Princy.

[Jon Walsh]

Unfortunately, neither worked. I am not entirely sure what I am missing because in all the threads that I have looked at a solution is finally found that works for the individual but none have worked for me.

Any ideas? Could it be that I have conflicting property settings (e.g. Do I need to turn on/off Grouping mode or something). I have tried numerous permutations but none seem to work.

The other thought I have is: could this be an issue with the Skin (I am using Default)? When I attempt to change the DisplayMode(?) from SpriteButton to Image or something else, it has no effect.

As a last resort, I will custom code the whole thing, but I really hoping that I do not have to. Especially over something like getting a column width to set appropriately.

Any help would be ost appreciated...

~ Jon

[Pavlina]

Hello Jon,

Please find attached to this message a sample test project which I prepared following your scenario. Give it a try and see if it works for you or you need further assistance.

I hope this helps.

Kind regards,
Pavlina
the Telerik team

[Jon Walsh]

Pavlina,

The project you provided below worked; that is, when I ran the project the expand column appeared as it should. When I made the changes to my code to match your sample, it did NOT work. I can make the columns wider, but not smaller - minimum is still about 100px.

I am having another member of my team look at it to see if I missed something. Any other ideas would be greatly appreciated.

~ Jon

[Pavlina]

Hi Jon,

Unfortunately we could not determine the exact cause for the issue you encountered without a working demo which demonstrates it. Therefore, I suggest that you isolate a stripped working version of your project and send it attached to a formal support ticket. We will examine it in details and will get back to you with our findings.

Thank you.

Kind regards,
Pavlina
the Telerik team

[Charles]

Hi Jon,

I have spent all morning troubleshooting this issue, i found it was not just the expandcollapsecolumn, but the left-most column in all grids. I then spent some time drafting additional information here and just after submitting had a thought!

It seems that since VS2010, VS is aware of stylesheets attached in Mastertemplates. Whenever i add a style to something in a contentpage, it attempts to update what it thinks is the correct style declaration in the main css file. This is rather irritating.......

Long story short, i went to the stylesheet, looked up my default table cell (td) styling, and lo-and-behold VS had dumped width: 67% into it. I removed this line, and all of my radgrids are now displaying perfectly!

Hope this helps

Charles

[Pavlina]

Hello Charles,

Thank you for sharing your experience with us and with the community. I am sure it would help other developers facing the same issue.

Best wishes,
Pavlina
the Telerik team

[Jon Walsh]

Charles,

As it turns out, out issue had to deal with conflicts in the (ASP.NET) .skin file we are using. We have certain buttons that we want to lock into being a certain size. That size was larger (wider) than the expand/collapse column. Moreover, I believe that because skin we were using was a general "apply-to-everything" skin (no SkinID applied) for a Button, it applied itself to expand/collapse button on the grid.

So, this was not a telerik issue after all. But it took two of us something like 40 hrs to track it down. So the lesson to be learned here is that should you experience a similar issue, do not forget to check your application's .skin file for general width settings for button.

Causes Issue:
<asp:Button runat="server" Font-Names="Segoe UI" Font-Size="small" width="90px" />

Corrects the Issue (no width defined)
<asp:Button runat="server" Font-Names="Segoe UI" Font-Size="small" />

Another fix would be supply a skin Id for what you are trying to define.

Thanks to one and all for the help!!
~ Jon