0

I have a dropdown list in my SharePoint Webpart and upon selection of a value from the dropdown list (selectindexchanged) I am showing a aspnet treeview. The issue I face is the TreeView control takes a while to load content. I wonder if there is any jQuery that I could utilize that keeps the end user abreast that the request is in progress utilizing a progress bar etc.

I cannot use AspNet Ajax as TreeViews cannot be rendered in Ajax. Please if you can provide any jQuery code it would be great.

Below is an excerpt of my HTML that I have in my user control:

                        <td  width="70%" id="div_DCL">

                            <asp:DropDownList ID="ddl_DCL_ModifiedDate" runat="server" OnTextChanged="DCL_ModifiedDate_Changed" AutoPostBack="true">
                                <asp:ListItem Value="7" Text="Modified Within Last Week" Selected="True"></asp:ListItem>
                                <asp:ListItem Value="30" Text="Modified Within Last Month"></asp:ListItem>
                                <asp:ListItem Value="180" Text="Modified Within Last 6 Months"></asp:ListItem>
                                <asp:ListItem Value="365" Text="Modified Within Last Year"></asp:ListItem>
                                <asp:ListItem Value="3650" Text="Modified Longer Than a Year"></asp:ListItem>
                             </asp:DropDownList>
                            <br />
                                 <asp:TreeView ID="tvDocumentLibrary" runat="server"></asp:TreeView>

                    </td>

1 Answer 1

0

Since you are not using Update Panels, you are doing a full postback.

Then why not use JQuery script which binds JS code on change like below

1) Add a class to your dropdown. Like below

asp:DropDownList ID="ddl_DCL_ModifiedDate" CssClass="ddl_DCL_ModifiedDate"

2) Write code inside DOM ready in your webpart to trigger initial JS codes

$(document).ready(function () {

$(".ddl_DCL_ModifiedDate").change(function()
{

   //Here show an DIV which is hidden by default & has properties like width 100% height 100% & transparency. It can contain HTML contents also like image/test

 $("#divMaskDashboard").show();

});

});

So this is how it works

  1. You attach a change handler in the DOM ready on your dropdown using CSS class name
  2. This will display a image/div when the dropdown in changed while the postback is happening in the background
  3. You complete postback happens & the image/div gets hidden automatically

I normally use below CSS for the DIV

#divMaskDashboard {
    /*
    opacity: 1;
    background: rgba(16, 22, 23,0.7);*/
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: rgb(16,22,23);
    color: #000;
    z-index: 99999;
    display: none;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}
1
  • Thanks Anand - appreciate your detailed explanation of the answer. One thing I personally don't like was the styling of #divMaskDashboard. It would be nice if there is a spinner with some text saying processing your request etc. That anyways is cosmetic, I will try incorporating something of my choice, thanks for the detailed answer once again.
    – Ali
    Sep 30, 2015 at 16:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.