Expand/Collapse not rendering

[Kenneth]

Anyone have any ideas what would cause the images for the expand/collapse not to render.  See the attached screenshot.
I am not doing anything out of the ordinary.  And haven't modified the styles at all.

The treelist is on a UserControl.

Hopefully someone can point me in the right direction.

Thanks,
Kenneth

[Tsvetina]

Hello Kenneth,

This would happen either when the style for the button is not loaded or when you specify a different image for the expand/collapse button or the default one cannot be found. Would it be possible that you send us a live url to your page? If it is confidential, you could send it to us through the ticketing system. We will inspect the page and see what causes the problem.

Kind regards,
Tsvetina
the Telerik team

[Kenneth]

I don't have a live link to this.  I am demoing the product on my local development environment and can't push it to production where it would be publicly available.

I haven't specified an alternate image so it's not being loaded for some reason.  Where should the images be located?
Do I need to setup a virtual directory in IIS to point to these images?

Thanks,
Kenneth

[Tsvetina]

Hello Kenneth,

The images are available in the Telerik.Web.UI.Skins.dll and by default you do not need to do anything to make them load. I am not sure what exactly prevents them from showing now but you could inspect your page in IE Developer Toolbar or Firebug and see what styles are applied to the button. You could make a screenshot of the button element, the surrounding HTML and the CSS styles applied to the button and attach it here.

Greetings,
Tsvetina
the Telerik team

[Kenneth]

I have attached 2 screenshots, one of the html of the button and surrounding and one of the styles attached to it.  I don't see anything obvious that would override the existing styles.

I checked and the Telerik.Web.UI.Skins is added to the project as a reference.  All the other skin elements seem to be loading, just not the expand and collapse. 

Thanks for your help!
Kenneth

[Kenneth]

Here is the code on the ASPX page for the TreeList

<telerik:RadTreeList  Width="98%"   ID="radTestTreeList" runat="server" 

    AutoGenerateColumns="False"

    DataKeyNames="TASK_ID"

    ParentDataKeyNames="PARENT_TASK_ID"

    OnNeedDataSource="radTestTreeList_NeedDataSource"

    Skin="Web20" AllowMultiItemSelection="True" AllowRecursiveSelection="True"

        PageSize="15" >

     

<ExportSettings ExportMode="RemoveControls">

<Pdf PageWidth="8.5in" PageHeight="11in"></Pdf>

</ExportSettings>

    <PagerStyle AlwaysVisible="True" Mode="NextPrevNumericAndAdvanced"

        Position="TopAndBottom" />

    <ClientSettings>

        <Selecting AllowItemSelection="True" UseSelectColumnOnly="True" />

        <Scrolling ScrollHeight="500px" AllowScroll="True" />

    </ClientSettings>

     

    <Columns>       

        <telerik:TreeListTemplateColumn ReadOnly="True">

            <ItemTemplate>     

                <%# getIcon( Container.DataItem ) %>         

                <%# getTestLabel( Container.DataItem ) %>                 

            </ItemTemplate>

            <ItemStyle Wrap="False" HorizontalAlign="Left" />

        </telerik:TreeListTemplateColumn>

        <telerik:TreeListTemplateColumn readonly="true">

        <HeaderStyle Width="80" HorizontalAlign="Center"  />

            <ItemTemplate>

                <%# getMarkers( Container.DataItem ) %>     

                <%# getAnchor( Container.DataItem ) %>                         

            </ItemTemplate>

            <ItemStyle HorizontalAlign="Center" />

        </telerik:TreeListTemplateColumn>               

        <telerik:TreeListSelectColumn>

            <HeaderStyle Width="30" HorizontalAlign="Center"  />

            <Itemstyle HorizontalAlign="Center" Wrap="false" />

        </telerik:TreeListSelectColumn>

                                 

        <telerik:TreeListTemplateColumn HeaderText="Due Date &<BR>Audit Trail">

            <ItemTemplate>                               

                 

            <span id="spDueDate" runat="server"><%# getDueDate( Container.DataItem ) %></span>

            <telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="spDueDate" RelativeTo="Element" Position="BottomCenter" Animation="Slide" RenderInPageRoot="true" EnableShadow="true">

                <br />

                  This is the Due Date for a control or a rollup of the earliest due date.  <br />

                  If at the control level click on the link to view the Audit Popup.  <br />

                <br />

            </telerik:RadToolTip>

                 

            </ItemTemplate>

 

            <HeaderStyle HorizontalAlign="Center" Width="90px" />

 

<ItemStyle HorizontalAlign="Center" Width="90px"></ItemStyle>

        </telerik:TreeListTemplateColumn>                                          

        <telerik:TreeListBoundColumn DataField="CA_TOTAL" HeaderText="Total"  >

            <ItemStyle HorizontalAlign="Center" Width="90px" />

            <HeaderStyle HorizontalAlign="Center" Width="90px" />

        </telerik:TreeListBoundColumn>

        <telerik:TreeListBoundColumn DataField="CA_NOT_STARTED"

            HeaderText="Not Started" >

            <HeaderStyle HorizontalAlign="Center" Width="90px" />

            <ItemStyle HorizontalAlign="Center" Width="90px"  />

        </telerik:TreeListBoundColumn>

        <telerik:TreeListBoundColumn DataField="CA_IN_PROGRESS"

            HeaderText="In Progress"   >

            <HeaderStyle HorizontalAlign="Center" Width="90px" />

            <ItemStyle HorizontalAlign="Center" Width="90px" />

        </telerik:TreeListBoundColumn>

        <telerik:TreeListBoundColumn DataField="CA_APPROVED" HeaderText="Complete" >

            <ItemStyle HorizontalAlign="Center" Width="90px" />

            <HeaderStyle HorizontalAlign="Center" Width="90px" />

        </telerik:TreeListBoundColumn>

        <telerik:TreeListBoundColumn DataField="CA_PAST_CNT" HeaderText="Past Due" >

            <ItemStyle HorizontalAlign="Center" Width="90px" />

            <HeaderStyle HorizontalAlign="Center" Width="90px" />

        </telerik:TreeListBoundColumn>

        <telerik:TreeListBoundColumn DataField="CA_CONTROLS_NOT_SELECTED_FOR_TESTING"

            HeaderText="Controls<br>Not Tested" >

            <HeaderStyle HorizontalAlign="Center" Width="90px" />

            <ItemStyle HorizontalAlign="Center" Width="90px" />

        </telerik:TreeListBoundColumn>

        <telerik:TreeListBoundColumn DataField="CA_CONTROLS_REJECTED_IN_TESTING"

            HeaderText="Ineffective<br>Controls"   >       

            <HeaderStyle HorizontalAlign="Center" Width="90px" />

            <ItemStyle HorizontalAlign="Center" Width="90px" />

        </telerik:TreeListBoundColumn>

         

        <telerik:TreeListBoundColumn DataField="TASK_ID" Visible="false" UniqueName="TASK_ID" >          

        </telerik:TreeListBoundColumn>

    </Columns>

 

<EditFormSettings EditFormType="AutoGenerated"></EditFormSettings>

 

</telerik:RadTreeList>

[Tsvetina]

Hello Kenneth,

Indeed everything seems fine on the screenshots. I also tested your code and it works fine on my side. Another thing that you can check are the web resource requests of your page. You can again use IE Developer Toolbar.

Also, you can try loading the styles from Telerik CDN and see if it makes a difference:
http://www.telerik.com/help/aspnet-ajax/radstylesheetmanager-cdn-support.html

Kind regards,
Tsvetina
the Telerik team

[Kenneth]

I tried adding the styles from the CDN and it seemed to load the images for a second but then they where lost and the standard button look and feel came back.

Is there any way to over-ride the existing styles either in the CSS or the code behind?

We really want to move forward with your controls but can't justify the purchase if we can't even get the expand/collapse buttons to work.

Thanks,
Kenneth

[Tsvetina]

Hi Kenneth,

Would it be possible that you isolate the problem in a sample application and send it to us in a support ticket, so that we can inspect it on our side and see what is going wrong. This way we will be able to address the issue faster and give you a solution that will work.

All the best,
Tsvetina
the Telerik team

[Kenneth]

While I was putting together a sample application, I was able to isolate a JS file that was causing the issue.  The file includes functions with the following names.  I am assuming that I am over riding a function that is being used in the TreeList.

Can you tell me which functions I am over ridding.  I am hoping it is only one because I am not looking forward to tracking down all the uses since this is a utility file and is used a lot.

window.getElem = getElem;
window.getAttr = getAttr;
window.getElemParentByType = getElemParentByType;
window.getRowIndex = getRowIndex;
window.getFirstChildOfType = getFirstChildOfType;
window.getElemPosition = getElemPosition;
window.getElementsByClass = getElementsByClass;
window.hideElem = hideElem;
window.showElem = showElem;
window.hasClass = hasClass;
window.remClass = remClass;
window.addClass = addClass;
window.getHtml = getHtml;
window.getHead = getHead;
window.getBody = getBody;
window.getAll = getAll;
window.deferListen = deferListen;
window.listen = listen;
window.mlisten = mlisten;
window.getCenteredTop = getCenteredTop;
window.getCenteredLeft = getCenteredLeft;

Thank you for your help.
Kenneth

[Tsvetina]

Hello Kenneth,

I did not find RadTreeList internal or public methods with the same name, but you could check the addClass() and hasClass() ones as they have the same names as jQuery methods which might be internally used by our controls.

Kind regards,
Tsvetina
the Telerik team