This is a migrated thread and some comments may be shown as answers.

jQuery script not working on Select when RadFormDecorator active

3 Answers 100 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Marja
Top achievements
Rank 1
Marja asked on 17 Dec 2013, 09:59 PM
I have a user control with 2 listboxes, and 2 buttons to move items from one listbox to the other. This moving is done using jQuery.

The jQuery script works fine when the listboxes aren't decorated with the RadFormDecorator. But when the listboxes are decorated, the items can't me moved between the 2 listboxes anymore.

This is a simplified version of my code, illustrating the issue:

<%@ Page Language="vb" EnableEventValidation="false" AutoEventWireup="false" CodeBehind="TestRadFormDecorator1.aspx.vb"
    Inherits="WebwareNET.TestRadFormDecorator1" ClientIDMode="Static" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        function wsListMoveItem(p_sSourceID, p_sTargetID) {
            $('#' + p_sSourceID + ' > option:selected').each(function () {
                $(this).remove().appendTo('#' + p_sTargetID);
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
    <telerik:RadSkinManager ID="RadSkinManager1" ShowChooser="true" runat="server" />
    <telerik:RadFormDecorator ID="RadFormDecorator1" DecoratedControls="all" runat="server" />
    <table>
        <tr style="vertical-align: middle;">
            <td style="text-align: center;">
                Does NOT belong
                <br />
                <asp:ListBox ID="lstDoesNot" Rows="7" SelectionMode="Multiple" runat="server">
                    <asp:ListItem Text="1"></asp:ListItem>
                    <asp:ListItem Text="2"></asp:ListItem>
                    <asp:ListItem Text="3"></asp:ListItem>
                </asp:ListBox>
            </td>
            <td style="text-align: center;">
                <asp:Button ID="btnAdd" runat="server" Text="»" UseSubmitBehavior="false" OnClientClick="wsListMoveItem('lstDoesNot','lstDoes');return false;" />
                <br />
                <br />
                <asp:Button ID="btnRemove" runat="server" Text="«" UseSubmitBehavior="false"
                    OnClientClick="wsListMoveItem('lstDoes','lstDoesNot');return false;" />
            </td>
            <td style="text-align: center;">
                Does belong
                <br />
                <asp:ListBox ID="lstDoes" Rows="7" SelectionMode="Multiple" runat="server">
                    <asp:ListItem Text="a"></asp:ListItem>
                    <asp:ListItem Text="b"></asp:ListItem>
                    <asp:ListItem Text="c"></asp:ListItem>
                </asp:ListBox>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>


Why is the jQuery script not moving the items when the RadFormDecorator is activated?

Best regards, Marja

3 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 20 Dec 2013, 01:28 PM
Hello Marja,

In order to decorate the select elements, RadFormDecorator position them absolutely outside of the viewport and insert on their place decorated ul elements. Therefore when you modify the select (i.e. add/remove options) the selects' decoration must be updated. This can be done through the updateSelect() method of the RadFormDecorator. For example:
<script type="text/javascript">
    function wsListMoveItem(p_sSourceID, p_sTargetID) {
 
        $('#' + p_sSourceID + ' > option:selected').each(function () {
            $(this).remove().appendTo('#' + p_sTargetID);
        });
 
        var targSelect = $get(p_sSourceID);
        var sourceSelect = $get(p_sTargetID);
        var decorator = $find("RadFormDecorator1");
 
        decorator.updateSelect(targSelect);
        decorator.updateSelect(sourceSelect);
    }
</script>


Regards,
Danail Vasilev
Telerik
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Marja
Top achievements
Rank 1
answered on 27 Dec 2013, 10:12 AM
Did you try this in the example page I posted?

The list items are now moved between the listboxes, but the listboxes get very tiny after performing such a move. The lose their width and height (rows=7).
0
Accepted
Ianko
Telerik team
answered on 30 Dec 2013, 02:58 PM
Hello Marja,

The described layout issue is reproducible only under IE and when the ListBox control is set with the Row attribute. The reason for this is that the ListBox control is originally rendered as a select element, when decorated by the FormDecorator it is being modified to hidden and for some reason its size attribute (which is the Row attribute of the control) gets set to value 2. After redecorating the control, it is decorated accordingly to the last value, which is approximately 30px height.

I suggest you using the Height attribute, instead of the Row one. This way the initial height should be correctly preserved after decorating the form elements, because the size attribute of the select element is not being used in the rendered HTML.

If you have difficulties using the Height attribute, you can reinitialize the size attribute of the select element accordingly to the Row attribute of the server control by modifying the JavaScript customization. The additional logic should add the correct size/row attribute to the hidden select element. You can follow this example modification, which works fin on my end:
function wsListMoveItem(p_sSourceID, p_sTargetID) {
    $telerik.$('#' + p_sSourceID + ' > option:selected').each(function () {
        $telerik.$(this).remove().appendTo('#' + p_sTargetID);
    });
 
    decorateLists();
}
 
function decorateLists() {
    var decorator = $find("RadFormDecorator1");
    var lstDoes = $get("<%= lstDoes.ClientID %>");
    var lstDoesNot = $get("<%= lstDoesNot.ClientID %>");
 
    lstDoes.setAttribute("size", "<%= lstDoes.Rows %>");
    lstDoesNot.setAttribute("size", "<%= lstDoesNot.Rows %>");
 
    decorator.updateSelect(lstDoesNot);
    decorator.updateSelect(lstDoes);
}

Let me know if you need further assistance on this matter.

Regards,
Ianko
Telerik
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
Tags
FormDecorator
Asked by
Marja
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Marja
Top achievements
Rank 1
Ianko
Telerik team
Share this question
or