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

jQuery script not working on Select when RadFormDecorator active

3 Answers 155 Views

FormDecorator

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

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />

<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

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.

Accepted

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.