Question

I’m working on an ASP.Net usercontrol and I’d like to include a jQuery DropdownChecklist (http://code.google.com/p/dropdown-check-list/). Does anyone know if that is possible?

So far, when I place the usercontrol on a page, it displays the basic list and not the styled DropdownChecklist, so I know something isn’t right.

I’m injecting the necessary script tags using RegisterClientScriptBlock() from the usercontrol’s code-behind. It looks like that’s succeeding based on what Firebug tells me, but for some reason the DropdownChecklist isn’t working.

Does anyone have any ideas? Has anyone tried this before?

I’d appreciate any help you can give me. Thanks in advance.

Here’s the markup of my usercontrol…

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="SelectedFilterBox.ascx.vb"
    Inherits="SelectedFilterBox.SelectedFilterBox" %>
<div>
    <asp:Table ID="tblFilters" runat="server" Width="200">
        <asp:TableRow>
            <asp:TableCell>
                <table>
                    <tr>
                        <td>
                            <select id="s1" multiple="true" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:UpdatePanel ID="UP1" runat="server">
                                <ContentTemplate>
                                    <input id="inpHide" type="hidden" runat="server" />
                                    <asp:Repeater ID="rpFilters" runat="server" Visible="false">
                                        <ItemTemplate>
                                            <table class="selectedFilter">
                                                <tr>
                                                    <td class="selectedFilterLeft">
                                                        <%# Eval("filterName")%>
                                                    </td>
                                                    <td class="selectedFilterRight" align="right">
                                                        <a onclick='DeselectFilter("s1","<%#Eval("filterName") %>");'>
                                                            <asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>'
                                                                OnCommand="ibRemove_Click" />
                                                        </a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                    <asp:Label ID="lblFilters" runat="server" />
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </td>
                    </tr>
                </table>
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>
</div>

Here’s the custom script I’m injecting…

function DoPostback() {
    __doPostBack('UP1', ''); // Note: You must have a server control on the form somewhere in order for this function to work.
};

// deselects item matching targetString within specified dropdownchecklist
function DeselectFilter(selectID, targetString){
  $("#"  + selectID + " option").each(function(){
     if($(this).text() === targetString) $(this).attr("selected", "");
  });
  $("#" + selectID).dropdownchecklist("refresh");
};

$(function () {
    // sets default dropdownchecklist settings, I'm assuming this is run when the control is instantiated
    $("#s1").dropdownchecklist({ forceMultiple: true, width: 200,  textFormatFunction: function() {
        return "Filters:";
        }
    });

    // binds the following function to the dropdownchecklist's "change" event
    $('#s1').change(function () {
        // collect selected values
        var values = $(this).val();
        // store values in hidden input field
        document.getElementById("inpHide").value = values;
        // perform postback, allowing server to handle those values
        DoPostback();
    });
});

The rest that I’m injecting are required by the jQuery DropdownChecklist. This is just the references, not the code I’m using to inject them. I think its probably pretty standard stuff…

<!-- Use a JQuery ThemeRoller theme, in this case 'smoothness' -->
<link rel="stylesheet" type="text/css" href="smoothness/jquery-ui-1.8.4.custom.css" />
<link rel="stylesheet" type="text/css" href="ui.dropdownchecklist.themeroller.css" />
<!-- Include the basic JQuery support (core and ui) -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.4.custom.min.js"></script>
<!-- Include the DropDownCheckList support -->
<script type="text/javascript" src="ui.dropdownchecklist-1.1-min.js"></script>

Answer 1

Since your element has a runat=”server” attribute, the runtime will rename it so that it can track it as a child control of your user control. What you can do is modify your javascript and anywhere you need to refer to it replace it with s1.ClientID. Like this:

$("<# s1.ClientID %>").dropdownchecklist( ... );