CODEWITHSUNDEEP
c#javascriptasp.net
whoah
whoah

Reputation: 4443

How to hide a div with asp:ListView

I have a < div> with < asp:ListView>- with results of searching. I want to hide this div, and show it when ListView will be full (or better - when this part of code will be completed)

    lvSearchResult.DataSource = getSearchResult();
    lvSearchResult.DataBind();

How can I do this? Meanwhile when this < div> with listview will be not visible, I want to show another div with information "Loading". When ListView will be ready, < div> with results will show up, and < div> with "loading" will be hidden.

Upvotes: 1

Views: 1315

Answers (7)

huMpty duMpty
huMpty duMpty

Reputation: 14460

Use runat="server" attribute in your div

Then depending on any condition you can show or hide div 

<div runat="server" id="myDiv">


var result = getSearchResult();    

    if(result!= null){
        myDiv.Visible = true;
        lvSearchResult.DataSource = result;
        lvSearchResult.DataBind();
       }

Upvotes: 0

Lloyd Powell
Lloyd Powell

Reputation: 18790

Declare your divs like:

<div id="searchResultDiv" runat="server" visible="false">...</div>

<div id="loadingDiv" runat="server">...</div>

The runat="server" makes them accessible in your asp.net code behind.

Then in your code you can change their properties, in this instance change the Visibility:

lvSearchResult.DataSource = getSearchResult();
lvSearchResult.DataBind();
searchResultDiv.Visible = true;
loadingDiv.Visible = false;

Upvotes: 1

WraithNath
WraithNath

Reputation: 18013

If you are using an Update panel you can acheive with code similar to below. This will show a modal panel over the page while it is updating.

You could modify the start and end request methods to also hide / show the div containing the list view

note this uses jQuery.

    <div id="workingDialog" style="display: none" title="Please wait">
        <p>
           Loading Data
        </p>   
     </div>

<div id="listViewDiv" style="display:none">
//List View
</div>

<script>

var _workingDialog;


    //Page Load event
    function pageLoad(sender, args) {
        //Register events
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

        _workingDialog = $('#workingDialog');
    }

    function beginRequest(sender, args) {
        $(_workingDialog).dialog({ modal: true });
        $('#listViewdiv').hide();
    }

    function endRequest(sender, args) {
        $(_workingDialog).dialog('close');
        $('#listViewdiv').show();
    }

</script>

http://wraithnath.blogspot.co.uk/2011/12/showing-modal-dialog-while-page-is.html

Upvotes: 1

Stefan Steiger
Stefan Steiger

Reputation: 82196

add runat="server" to the div, then you can set visible = false/true

Upvotes: 0

Lemex
Lemex

Reputation: 3794

From my understanding you could use css? and set display:none and when your condition is met change display to block/show?

Hope this helps: http://webdesign.about.com/od/dhtml/a/aa101507.htm

Upvotes: 0

Freeman
Freeman

Reputation: 5801

depending on your list you can make a method that ads 2 css classes, one for when the list is full and one for the other case. so in one css you will have display: none; and in the other display: inline-block;

Upvotes: 0

Abhijeetchindhe
Abhijeetchindhe

Reputation: 400

Use AJAX with UpdatePanel , no? that will work..

Upvotes: -1

Related Questions