How to refresh a gridview with ajax? - asp.net

Question

I want to refresh a GridView after selecting values in an AJAX ModalPopup. But the refresh happens only after clicking again on the select button. The refresh should happen straight after click on OK... What do I am wrong?
Greets
Marco
<div id="container" runat="server" />
<input id="dummy" type="button" style="display:none" runat="server"/>
<ajaxToolkit:ModalPopupExtender runat="server"
ID="mpeThePopup"
TargetControlID="dummy"
PopupControlID="pnlModalPopUpPanel"
DropShadow="true"/>
<asp:Panel ID="pnlModalPopUpPanel" runat="server">
<asp:UpdatePanel ID="updatePanel2" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:ListBox ID="availableCategories" runat="server" DataTextField="CategoryName" DataValueField="CategoryID" SelectionMode="Multiple"/>
<asp:Button ID="moveRight" runat="server" Text=">" OnClick="moveRightClick" />
<asp:Button ID="moveLeft" runat="server" Text="<" OnClick="moveLeftClick" />
<asp:ListBox ID="selectedCategories" runat="server" DataTextField="CategoryName" DataValueField="CategoryID" SelectionMode="Multiple"/>
<asp:Button ID="okButton" runat="server" Text="OK" OnClick="okClick" />
<asp:Button ID="cancelButton" runat="server" Text="Cancel" OnClick="cancelClick" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="okButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Objects;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication2
{
public partial class Select : System.Web.UI.UserControl
{
private ObjectSet<Category> osCategories;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
NorthwindEntities northwindEntities = new NorthwindEntities();
categories.DataSource = northwindEntities.Categories;
availableCategories.DataSource = northwindEntities.Categories;
DataBind();
}
Button showModal = new Button();
showModal.Text = "Select";
showModal.Click += new EventHandler(showModal_Click);
container.Controls.Add(showModal);
}
void showModal_Click(object sender, EventArgs e)
{
mpeThePopup.Show();
}
protected void moveRightClick(object sender, EventArgs e)
{
foreach(ListItem listItem in availableCategories.Items)
{
if(listItem.Selected)
{
selectedCategories.Items.Add(listItem);
//availableCategories.Items.Remove(listItem);
}
}
}
protected void moveLeftClick(object sender, EventArgs e)
{
foreach(ListItem listItem in selectedCategories.Items)
{
if(listItem.Selected)
{
availableCategories.Items.Add(listItem);
//selectedCategories.Items.Remove(listItem);
}
}
}
protected void okClick(object sender, EventArgs e)
{
categories.DataSource = null;
categories.DataBind();
categories.DataSource = availableCategories.SelectedItem;
categories.DataBind();
mpeThePopup.Hide();
}
protected void cancelClick(object sender, EventArgs e)
{
mpeThePopup.Hide();
}
}
}

Answer 1

Place your categories GridView inside an UpdatePanel with a Click AsyncPostBackTrigger on the okButton.