locked
Gird view display:none RRS feed

  • Question

  • User219039814 posted

    I have a girdview which is hidden or shown depending on the value selected in the dropdown list.

    My web designer has asked me to change the the hidden to display none property because when the gridview is not being displayed , that space can be used by other components.

    <div id="yrgrid">
    <div class="dbtable">
    <asp:GridView ID="showingyears" CssClass="table table-bordered" runat="server">

    </asp:GridView>
    </div>
    </div>

    my JQuery

    $(function () {

    $("#details").change(function () {

    var text = $('#details :selected').text();
    if (text == "Year Payment") {


    //$('#yrgrid').show();


    } else {

    $('#yrgrid').hide();

    }
    });
    });

    Monday, May 21, 2018 3:40 AM

Answers

  • User-369506445 posted

    hi

    for use display non or block , you can try below code:

    $(function () {
                $("#details").change(function () {
                    var text = $('#details :selected').text();
                    if (text == "Year Payment") {
                        $('#yrgrid').css("display", "block");
                    } else {
                        $('#yrgrid').css("display", "none");
    
                    }
                });
            });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 21, 2018 5:20 AM
  • User-1780421697 posted

    Initially you can hide control and then then you can how it,, you can use inline style or class

    #ygrid
    {
     display:none;
    }

    Or inline style when page get loaded then this div is not visible then from client side code you can show this div by $("#ygrid").show(); method on #details change event.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 21, 2018 7:26 AM

All replies

  • User-369506445 posted

    hi

    for use display non or block , you can try below code:

    $(function () {
                $("#details").change(function () {
                    var text = $('#details :selected').text();
                    if (text == "Year Payment") {
                        $('#yrgrid').css("display", "block");
                    } else {
                        $('#yrgrid').css("display", "none");
    
                    }
                });
            });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 21, 2018 5:20 AM
  • User-1780421697 posted

    Initially you can hide control and then then you can how it,, you can use inline style or class

    #ygrid
    {
     display:none;
    }

    Or inline style when page get loaded then this div is not visible then from client side code you can show this div by $("#ygrid").show(); method on #details change event.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 21, 2018 7:26 AM