AutoCompleteExtender problems with ModalPopupExtender

If you've tried to use the AutoCompleteExtender inside a ModalPopupExtender, you'll notice that the autocomplete options show behind the modal popup. This is a Z-index problem in which the ModalPopupExtender overrides all other controls. If you check the modal's Z-index you'll see that it uses 100001 for its foreground element, so use something higher like 10000001.

<cc1:AutoCompleteExtender ID="ace" runat="server" OnClientShown="ShowOptions">
</cc1:AutoCompleteExtender>

<script language="javascript" type="text/javascript">
    function ShowOptions(control, args) {
        control._completionListElement.style.zIndex = 10000001;
    }
</script>
 
So we use the OnClientShown property which will call a javascript function to change the AutoCompleteExtender's Z-index when it kicks in.

ASP.NET AJAX this._form is null error on javascript

If ever you encounter this sneaky error on your ASP.NET AJAX-Enabled websites (you would know it when you see the this._form is null javascript error message or simply if your controls don't cause postbacks anymore) the culprit is the javascript declaration found on the head tag in the html page.


If you have declared it like this:


<script src="scripts/main.js" type="text/javascript" />


Simply change it to this:


<script src="scripts/main.js" type="text/javascript"></script>


And problem is solved.




-k

Source for AJAX loading gif

Here's a good website to grab some free loading animation gif's for your websites.


Ajaxload.Info

A sample one, cool facebook-style loading gif

ASP.NET Gridview Paging and Sorting with AJAX

To enable paging and sorting of our gridviews with ajax, we must first include the prerequisites of any ajax-enabled asp.net website, the script manager and the update panel.

We place the scriptmanager inside of our form (note the enable partial rendering attribute, it must be set to "true" to enable asynchronous postbacks):

<asp:ScriptManager ID="sm" runat="server" EnablePartialRendering="true" />

Then enclose our gridview with the update panel.

<asp:UpdatePanel ID="up" runat="server">
    <ContentTemplate>
        <asp:GridView ID="gv" runat="server"
        AllowSorting="true" AllowPaging="true" PageSize="10"
        OnSorting="gv_Sorting" OnPageIndexChanging="gv_PageIndexChanging">
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>

Notice we set both AllowSorting and AllowPaging to true, then add PageSize for the number of items to be shown per page. Next we'll add the code behind for the sorting and paging events.



Let's start first with the sorting part.

We'll assume in this next snippet that we're getting our data from the database or whatsoever then assign it to a DataSet, then finally bind the dataset to our GridView.

private void BindGridView()
{
    //Get data from there..
    //Assign to dataset here..
    DataSet ds = TheData;

    //Bind dataset to gridview
    gv.DataSource = ds;
    gv.DataBind();

    //We persist DataTable from our DataSet through session.
    Session["sess_table"] = ds.Tables[0];
}

To explain the code above, this function can be placed anywhere in your code behind, it's where you load data into your gridview (*note: imagine TheData already has our data from the database or any other source, loading data to a dataset will be in another lesson). What's new here is the assigning of the DataTable from our DataSet through session. We need that to preserve our data asynchronously.


Then the next step will be to add this other function, again it can be placed anywhere in the code behind.


private string GetSortDirection(string column)
{
    //By default, set the sort direction to ascending.
    string sortDirection = "ASC";

    //Retrieve the last column that was sorted.
    string sortExpression = ViewState["SortExpression"] as string;

    if (sortExpression != null)
    {
        //Check if the same column is being sorted.
        //Otherwise, the default value can be returned.
        if (sortExpression == column)
        {
            string lastDirection = ViewState["SortDirection"] as string;
            if ((lastDirection != null) && (lastDirection == "ASC"))
            {
                sortDirection = "DESC";
            }
        }
    }

    //Save new values in ViewState.
    ViewState["SortDirection"] = sortDirection;
    ViewState["SortExpression"] = column;

    return sortDirection;
}

The code above was taken directly from the msdn website, what it does is just return Ascending or Descending depending on the gridview column header that was clicked.

And finally the sorting event handler..

protected void gv_Sorting(object sender, GridViewSortEventArgs e)
{
    //Retrieve the DataTable from the session object.
    DataTable dt = Session["sess_table"] as DataTable;

    if (dt != null)
    {
        //Sort the table.
        dt.DefaultView.Sort = e.SortExpression + " " + GetSortDirection(e.SortExpression);
        //Bind the sorted table to the gridview.
        gv.DataSource = Session["sess_table"];
        gv.DataBind();
        //Update the UpdatePanel or the changes won't show.
        up.Update();
    }
}




Okay we're already halfway there, next is the paging part, this is really short and simple compared to the sorting one.

protected void gv_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    gv.PageIndex = e.NewPageIndex;
    BindGridView();
    upTransactions.Update();
}

3 lines and that's it. Okay to explain: the first line just sets the new page index to the gridview's PageIndex attribute. Next we use the function we created earlier to bind our data to the gridview again (that's assuming the imaginary code, remember?). And then finally update our UpdatePanel to reflect the changes.

...And thanks, I hope you learned something from this post, or remembered something you forgot.

-k