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,
Can you tell me where do you add the two controls - in the same “UpdatePanel” or one of the controls is inside “UpdatePanel” and the other is on the page outside the panel?
If only the radio button or the grid is inserted in “UpdatePanel” they will perform partial Postbacks on their own and update of the other control may not be executed.
If you want to show/hide the grid on Client-Side without any Postbacks you can use “set_visible()” function and control the appearance of the grid with any HTML control on the page:
<input type="button" name="btn1" value="Hide Grid" onclick="hideGrid()" />
function hideGrid() {
var grid = $find("WebDataGrid1");
grid.set_visible(false); // true if you want to show the grid
}
If you can send me your page setup and the CSS class applied it will be possible for me to understand your exact scenario and give you more accurate response.
I am looking forward to hearing from you.
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">
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
this.wdgOption2.DataSource = new List<object>() { DateTime.Now };
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>
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.
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.
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:
//if (!this.IsPostBack)
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.
Let me know if you need further assistance with this question.