In my application I have a ListView that shows data with a few different columns. I want to give user flexibility to choose columns they want to see in the ListView. So in my page, I have added following

<div class="ibox-content">
        <div id="modal-form" class="modal fade" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-sm-12 b-r">
                                <h3 class="m-t-none m-b">Choose Columns</h3>
                                <p>Move columns from Available to Selected List box to show in the list below</p>
                                <div class="form-group  col-md-4">
                                    <label class="control-label-custom" for="lblAvailableColumns">Available Columns</label>
                                    <asp:ListBox class="form-control" Style="height: 150px;" ClientIDMode="Static" ID="lbAvailableColumns" runat="server" placeholder="AvailableColumns" SelectionMode="Multiple"></asp:ListBox>
                                </div>
                                <div style="margin-left: 20px; margin-right: 10px; margin-top: 45px; margin-bottom: 5px" class="form-group col-md-1">
                                    <input type="button" class="btn btn-default" id="left" value="<" />
                                    <input type="button" class="btn btn-default" style="margin-top: 10px;" id="right" value=">" />
                                </div>
                                <div class="form-group  col-md-4">
                                    <label class="control-label-custom" for="lblSelectedColumns">Selected Columns</label>
                                    <asp:ListBox class="form-control" Style="height: 150px;" ID="lbSelectedColumns" runat="server" placeholder="SelectedColumns" SelectionMode="Multiple"></asp:ListBox>
                                </div>
                                <div style="text-align: left;" class="form-group  col-md-8">
                                    <asp:LinkButton ID="lnkBtnApplyChooseColumns" TabIndex="4" runat="server" CausesValidation="false" class="btn btn-success" OnClick="lnkBtnApplyChooseColumns_Click">
                                        <i class="glyphicon glyphicon-ok icon-white"></i> Apply </asp:LinkButton>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

And this is launched like this

<a data-toggle="modal" class="btn btn-primary" href="../#modal-form"><i class="glyphicon glyphicon-th"></i>Choose Columns</a>

It looks like this while running enter image description here

Though when Apply button is pressed, I dont see updated selections in lbSelectedColumns list box in the codebehind file. What im doing wrong here?

Related posts

Recent Viewed