I have a web page with a WebDataGrid that is hidden initially. Postback from a radio button turns the visibility on. If I perform a full postback, the grid loads fine and is styled correctly. If I wrap the controls in an UpdatePanel, the grid still loads during the [partial] postback, but the CSS does not get applied.
Reviewing the resultant HTML, I can see that Infragistics adds a Script Handler (.AXD), some StyleSheets, and some JavaScript code to make the grid initialize. These seem only to be generated during a full postback, not partial.
Does anyone know of a way to force the grid to initialize properly during a partial postback.
Hello erichardson,
Let me know if you need further assistance with this question.
Thank you for the clarification.
I have modified the sample based on your last response and I was able to reproduce this issue.
It is caused most probably by the “!IsPostBack” check that is made on every Postback since the grid require its Datasource. You can correct this by modifying the “Page_Load()” event like this:
protected void Page_Load(object sender, EventArgs e) { //if (!this.IsPostBack) this.wdgOption2.DataSource = new List<object>() { DateTime.Now }; this.wdgOption2.DataBind(); }
protected void Page_Load(object sender, EventArgs e)
{
//if (!this.IsPostBack)
this.wdgOption2.DataSource = new List<object>() { DateTime.Now };
this.wdgOption2.DataBind();
}
Since you are using “DataViewState” for the grid you can use your original “Page_Load()” event setup but execute “DataBind()” for the grid in this event.
Let me know if you have further questions.
Sorry, change the radio buttons so that rbOption1 Checked=True instead of rbOption2. Then you will see the problem.
So if on the first page load, rbOption1 is checked and the grid is not visible, it will not work after subsequent partial postbacks. If rbOption2 is checked on the first page load, the grid initializes fine and will hide and reappear just fine.
I have created sample based on the code posted but can you tell me what are the exact steps that need to be followed to observe the described by you behavior and what is the expected and actual result gained after following these steps?
In the sample that I have created based on the above code the grid and its styles are loaded initially and after radio button “rbOption2” (Option #2) is clicked.
I am waiting for your response.
The radio buttons are outside the UpdatePanel, but I get the same result if I move them inside. The problem is that because the WebDataGrid is not on the page for the first page load, some client-side resources are not being initialized properly. The grid is added during a partial postback, and JavaScript errors occur because these resources are missing. I have created a sample page to demonstrate:
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script type="text/C#" runat="server">
if (!this.IsPostBack)
protected void Page_PreRender(object sender, EventArgs e)
if (this.rbOption1.Checked)
this.MultiView.SetActiveView(this.vwOption1);
else if (this.rbOption2.Checked)
this.MultiView.SetActiveView(this.vwOption2);
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Sample</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:RadioButton ID="rbOption1" runat="server" AutoPostBack="true"
GroupName="Options" Text="Option #1" /><br />
<asp:RadioButton ID="rbOption2" runat="server" AutoPostBack="true"
Checked="true" GroupName="Options" Text="Option #2" /><br /><br />
<asp:MultiView ID="MultiView" runat="server">
<asp:View ID="vwOption1" runat="server">
<asp:Label ID="lblOption1" runat="server" Text="You have selected option #1." />
</asp:View>
<asp:View ID="vwOption2" runat="server">
<asp:Label ID="lblOption2" runat="server" Text="You have selected option #2." /><br />
<ig:WebDataGrid ID="wdgOption2" runat="server" EnableDataViewState="true" Width="100%" />
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>