RadTreeView checkboxes not styling.

[Aash]

Hi,

It seems that the checkboxes in a RadTreeView are not being styled, here is my markup from the page where I isolated the issue:

 

 <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server"
DecoratedControls="All" Skin="Windows7" />

<telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="True" Height="280px">
<Nodes>
<telerik:RadTreeNode Text="Software" Expanded="true">
<Nodes>
<telerik:RadTreeNode Text="Business &amp;amp; Office"/>
<telerik:RadTreeNode Text="Database" />
<telerik:RadTreeNode Text="Networking" />
<telerik:RadTreeNode Text="Presentation" />
<telerik:RadTreeNode Text="Project Management" />
<telerik:RadTreeNode Text="Reports" />
<telerik:RadTreeNode Text="Spreadsheet" />
<telerik:RadTreeNode Text="Word Processing" />
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="Books">
<Nodes>
<telerik:RadTreeNode Text="Arts" />
<telerik:RadTreeNode Text="Biographies" />
<telerik:RadTreeNode Text="Children's Books" />
<telerik:RadTreeNode Text="Computers &amp;amp; Internet" />
<telerik:RadTreeNode Text="Cooking" />
<telerik:RadTreeNode Text="History" />
<telerik:RadTreeNode Text="Fiction" />
<telerik:RadTreeNode Text="Mystery" />
<telerik:RadTreeNode Text="Nonfiction" />
<telerik:RadTreeNode Text="Romance" />
<telerik:RadTreeNode Text="Science Fiction " />
<telerik:RadTreeNode Text="Travel" />
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="Music">
<Nodes>
<telerik:RadTreeNode Text="Alternative" />
<telerik:RadTreeNode Text="Blues" />
<telerik:RadTreeNode Text="Children's Music" />
<telerik:RadTreeNode Text="Classical" />
<telerik:RadTreeNode Text="Country" />
<telerik:RadTreeNode Text="Dance" />
<telerik:RadTreeNode Text="Folk " />
<telerik:RadTreeNode Text="Hard Rock" />
<telerik:RadTreeNode Text="Jazz" />
<telerik:RadTreeNode Text="Soundtracks" />
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="Movies">
<Nodes>
<telerik:RadTreeNode Text="Action" />
<telerik:RadTreeNode Text="Animation" />
<telerik:RadTreeNode Text="Classics" />
<telerik:RadTreeNode Text="Comedy" />
<telerik:RadTreeNode Text="Documentary" />
<telerik:RadTreeNode Text="Drama" />
<telerik:RadTreeNode Text="Horror" />
<telerik:RadTreeNode Text="Musicals" />
<telerik:RadTreeNode Text="Mystery" />
<telerik:RadTreeNode Text="Westerns" />
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView> 

 

Have I missed something or is it a known bug ?

Many Thanks,
Aash.

[Yana]

Hello Aash,

Actually this is expected behavior  - from Q2 2010 RadFormDecorator will not style checkboxes and radiobuttons if they have a class property assigned as the checkboxes in RadTreeView, RadListBox, etc.
We're sorry for the caused inconvenience.

Best wishes,
Yana
the Telerik team

[Igor]

Hello Yana,

do you know a work around for this problem? Interesting that Webkit shows checkboxes correctly.

All the best,
Igor

[Yana]

Hi Igor,

You can use the following code in order to work-around this:

<telerik:RadCodeBlock runat="server">
       <script type="text/javascript">
           function pageLoad() {
               var $ = $telerik.$;
               var tree = $('#<%= RadTreeView1.ClientID %>');
               var decorator = $find('<%= RadFormDecorator1.ClientID %>');

               var boxes = $('input[type*=checkbox]', tree);
               boxes.removeAttr('class');

               decorator.decorate (document.documentElement);

               boxes.addClass('rtChk');
           }
       </script>
   </telerik:RadCodeBlock>

Hope this helps.

Regards,
Yana
the Telerik team

[Igor]

Hi Yana,

thank you, it works for all visible nodes. Still I have problem if a tree node becomes expanded. I have to click onto the expanded child node to  have the checkbox formatted correctly. I tried to recall the purposed javascript code using OnClientNodeExpanded inside the RadTreeView, without success. Any idea?

Many thanks,
Igor

[Yana]

Hi Aash,

Which ExpandMode do you use?  If you're using ServerSideCallBack , you should use OnClientNodePopulated and execute the code in its handler. Is that the case?

Greetings,
Yana
the Telerik team

[Igor]

Hi Yana,

this is my case and your tip works perfectly.
Thank you.
Igor