Bug: FormDecorator is not applied to checkboxes in ListBox

[spt]

            <telerik:radformdecorator id="FormDecorator1" runat="server" decoratedcontrols="CheckBoxes, RadioButtons, Buttons"  />

            <telerik:RadListBox
                runat="server" ID="dlUsers" TransferToID="dlUsersAssign"
                AllowTransfer="true"  AllowDelete="false" AllowReorder="false" AllowTransferDuplicates="false"
                ButtonSettings-ShowTransferAll = "true"
                TransferMode="Copy" SelectionMode="Multiple"
                Width = "250px" Height = "110px" Skin="WebBlue">

                <Items>
                    <telerik:RadListBoxItem Text="User1" Value="0" />
                    <telerik:RadListBoxItem Text="User2" Value="1" />
                    <telerik:RadListBoxItem Text="User3" Value="2" />
                    <telerik:RadListBoxItem Text="User4" Value="3" />
                </Items>

            </telerik:RadListBox>

            <telerik:RadListBox
                runat="server" ID="dlUsersAssign"
                Width = "250px" Height = "110px" CheckBoxes="true"  >
                <Items>
                    <telerik:RadListBoxItem Text="User6" Value="6" />
                    <telerik:RadListBoxItem Text="User7" Value="7" />
                </Items>
            </telerik:RadListBox>

In initial state FormDecorator is applied to checkboxes in the left box, it's ok.
Now let's move some items from right box to left box.
FormDecorator will not be applied to new added items in the left box.

[Svetlina Anati]

Hello spt,

In order to achieve what you need you should force the RadFormDecorator to redecorate because the decoration has already finished with the loading of the page. I prepared for you the following code which does what you require:

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <script type="text/javascript">

    function OnClientTransferred()
    {
      $find("<%=FormDecorator1.ClientID %>").decorate();
    }

    </script>
    <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="CheckBoxes, RadioButtons, Buttons" />
    <telerik:RadListBox runat="server" ID="dlUsers" TransferToID="dlUsersAssign" AllowTransfer="true"
        AllowDelete="false" AllowReorder="false" AllowTransferDuplicates="false" ButtonSettings-ShowTransferAll="true"
        TransferMode="Copy" SelectionMode="Multiple" OnClientTransferred="OnClientTransferred"
        Width="250px" Height="110px" Skin="WebBlue">
        <Items>
            <telerik:RadListBoxItem Text="User1" Value="0" />
            <telerik:RadListBoxItem Text="User2" Value="1" />
            <telerik:RadListBoxItem Text="User3" Value="2" />
            <telerik:RadListBoxItem Text="User4" Value="3" />
        </Items>
    </telerik:RadListBox>
    <telerik:RadListBox runat="server" ID="dlUsersAssign" Width="250px" Height="110px"
        CheckBoxes="true">
        <Items>
            <telerik:RadListBoxItem Text="User6" Value="6" />
            <telerik:RadListBoxItem Text="User7" Value="7" />
        </Items>
    </telerik:RadListBox>
</form>

We are currently thinking of optimizing the code and document it and thus this method is currently not exposed in the help.

Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[spt]

I compelled to open this topic once again.
All works fine in version 2010.1.519, but after upgrading to 2010.2.713 I found that FormDecorator is not applied
to checkboxes in the left box even in initial state.
Obviously, it is not aplied to items which were moved from right box to left box later.

[Lini]

Hi,

With the 2010 Q2 release, the form decorator control will no longer automatically decorate checkboxes or radio buttons that already have a CSS class defined. If your checkboxes have a class attribute, you should remove it. I apologize for the inconvenience this has caused you

All the best,
Lini
the Telerik team

[spt]

Can you explain your answer?
Currently my code looks like:

<

 

telerik:radscriptblock runat="server" ID="rsbEditProject">

 

<

 

script type="text/javascript">

 

 

function OnClientTransferred()

 

{

$find(

"<%=FormDecorator1.ClientID %>").decorate();

 

}

</

 

script>

 

</

 

telerik:radscriptblock>

 

<

 

telerik:radformdecorator id="FormDecorator1" runat="server" decoratedcontrols="CheckBoxes, RadioButtons, Buttons" />

 

<telerik:RadListBox

    runat="server" ID="dlManageTimeTrack" TransferToID="dlManageTimeTrackDestination"

    AllowTransfer="true"  AllowDelete="false" AllowReorder="false" AllowTransferDuplicates="false"

    ButtonSettings-ShowTransferAll = "true"

    TransferMode="Copy" SelectionMode="Multiple" 

    DataSourceID = "odsNonAdminUsers" DataTextField="FullName" DataValueField="Id"

    Width = "300px" Height = "110px" OnClientTransferred="OnClientTransferred">

</telerik:RadListBox>

  

<telerik:RadListBox

    runat="server" ID="dlManageTimeTrackDestination"  

    DataSourceID = "odsManagerTimeTracks" DataTextField="FullName" DataValueField="Id"

    Width = "300px" Height = "110px" CheckBoxes="true"  OnItemDataBound="dlManageTimeTrackDestination_OnItemDataBound">

</telerik:RadListBox> 

What should be changed here?


[Lini]

Hi,

You should remove the class from the checkboxes in the listbox control. This can be done in the client function you currently use to decorate them:

function OnClientTransferred(sender, args)
{
  $telerik.$('.rlbCheck', args.get_destinationListBox().get_element()).removeClass('rlbCheck');
  $find("<%=FormDecorator1.ClientID %>").decorate();
}

The call uses the args parameter of the function to get the destination listbox and remove the class attribute from its checkboxes.

Best wishes,
Lini
the Telerik team

[spt]

Well, it works when item was moved from left list to right.
What about  applying of FormDecorator to checkboxes in the left box in initial state?
I tried somethimng like.

 

<telerik:RadListBox
    runat="server" ID="dlManageTimeTrack" TransferToID="dlManageTimeTrackDestination"
    AllowTransfer="true"  AllowDelete="false" AllowReorder="false" AllowTransferDuplicates="false"
    ButtonSettings-ShowTransferAll = "true"
    TransferMode="Copy" SelectionMode="Multiple"
    DataSourceID = "odsNonAdminUsers" DataTextField="FullName" DataValueField="Id"
    Width = "300px" Height = "110px" OnClientTransferred="OnClientTransferred" OnClientLoad="OnClientLoad">
</telerik:RadListBox>

<telerik:RadListBox
    runat="server" ID="dlManageTimeTrackDestination"
    DataSourceID = "odsManagerTimeTracks" DataTextField="FullName" DataValueField="Id"
    Width = "300px" Height = "110px" CheckBoxes="true"  OnItemDataBound="dlManageTimeTrackDestination_OnItemDataBound">
</telerik:RadListBox>

    function OnClientLoad(sender) {
        $telerik.$('.rlbCheck', sender.get_element()).removeClass('rlbCheck');
        $find("<%=FormDecorator1.ClientID %>").decorate();
    }

But it doesn't work.

[Lini]

Hello,

The code you sent works fine for me. The only thing I needed to add is the CheckBoxes="true" property to the first (dlManageTimeTrack) list box to actually show the checkboxes.

Sincerely yours,
Lini
the Telerik team

[spt]

You are right, it works.