CODEWITHSUNDEEP
jquery-ui
user1096623
user1096623

Reputation: 63

jQuery UI MultiSelect Widget: after postback only last selected element is checked

I am implementing this JQuery UI multiselect from http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

I have managed to get it to use in my asp.net page, but for some reason after postback, the selected text shows only the last element checked.

Here is my Code

$("document").ready(function () {

    $("#ListBox1").multiselect({

        noneSelectedText: 'Select',
        selectedList: 200

    });

    $("#ListBox2").multiselect({

        noneSelectedText: 'Select',
        selectedList: 200

    });

    function GetSelectedListBox() {


    var array_of_checked_values = $("#ListBox1").multiselect("getChecked").map(function () {
        return this.value;
    }).get();

    var array_of_checked_values1 = $("#ListBox2").multiselect("getChecked").map(function () {
        return this.value;
    }).get();

    $("#HiddenField1").val(array_of_checked_values);

    $("#HiddenField2").val(array_of_checked_values1);


}

});


<body>
    <form id="form1" runat="server">
    <div style="font:12px Helvetica, arial, sans-serif;">
        <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>
        <asp:ListBox ID="ListBox2" runat="server"></asp:ListBox>
        <asp:HiddenField ID="HiddenField1" runat="server" />
        <asp:HiddenField ID="HiddenField2" runat="server" />
    </div>
    <div>
        <asp:Button ID="btn1" runat="server" Text="Press"  OnClientClick="GetSelectedListBox();" onclick="btn1_Click" />
    </div>
    </form>
</body>

in my server side code

ListBox2.DataSource = dt;
ListBox2.DataTextField = "Id";
ListBox2.DataValueField = "ListValue";
ListBox2.DataBind();

protected void btn1_Click(object sender, EventArgs e)
{
    Response.Write(HiddenField1.Value);

    Response.Write(HiddenField2.Value);
}

Any ideas why is it showing only last selected element but the interesting this the values in the HiddenField is displaying "Value1,Value2,Value3, value21" whereas the widget box is only showing value21, and only value21 is disaplyed as checked in the widget when all the elements where checked prior to postback

Thanks

Upvotes: 1

Views: 3515

Answers (2)

AlvaroCasvi
AlvaroCasvi

Reputation: 125

I have make a temporal fix, I already know is not the best solution, but it work until I find the right way to do it.

I have create a hidden field for each select and before submit the form I set the hidden fields with the value of options.

So I can get this values on the controller.

$('#muestraForm').submit(function() {
$("#hidden_temporal_field").val($("#select_field").val());
return true;
});

Upvotes: 3

Raul Olvera
Raul Olvera

Reputation: 97

I was actually just having that same problem.

Try using a listbox with the selection mode as Multiple, I have a postback in my page and the values stay there

<asp:ListBox ID="ListBox1" SelectionMode="Multiple" runat="server"></asp:ListBox>

also, there doesn't seem to be a SelectedItem*s* for a listbox in asp.net only on forms so you need to do this manually something like this 

private String GetSelectedItems(ListBox listbox)
{
    String SelectedValues = "";

    foreach ( ListItem item in listbox.Items)
    {
        if(item.Selected == true)
            SelectedValues = SelectedValues + "," + item.Text ;
    }

    if (SelectedValues.Length > 1)
        SelectedValues = SelectedValues.Remove(0, 1);

    return SelectedValues;
}

This works for me values stay after each post back and I can access the list of selected values in code behing :) , let me know if it helps you

Upvotes: 0

Related Questions