jQuery script not working on Select when RadFormDecorator active

4 posts, 1 answers
  1. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 17 Dec 2013 Link to this post

    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
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 20 Dec 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 27 Dec 2013 Link to this post

    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).
  5. Answer
    Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 30 Dec 2013 Link to this post

    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.
Back to Top