Im writing this post as i have had an issue with Ajax Combo Boxes that occurs when changing the datasource if an item has been selected. For example, if the ComboBox has 10 items, and the 10th item is selected. Then the datasource is changed to 5 items an
error occurs in the javascript and setting the selected index or selected value of the control server side has no effect.
The error is: Microsoft Jscript runtime error: 'style' is null or not an object
I have included code below to show how to reproduce and a work around that works for me....
ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!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></title>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table class="style1">
<tr>
<td>
<cc1:ComboBox ID="ComboBox1" runat="server" AutoPostBack="True">
</cc1:ComboBox>
</td>
<td>
<asp:Button ID="btnChangeDatasource" runat="server"
onclick="btnChangeDatasource_Click" Text="Change Datasource (error)" />
</td>
<td>
<asp:Button ID="btnChangeDatasourceAlt" runat="server"
onclick="btnChangeDatasourceAlt_Click" Text="Change Datasource" />
</td>
<td>
To Reproduce the error ( Stlye is null or not an object ) select the bottom item
in the drop down list. Once the bottom item is selected, click change datasource
(error) and you will see the problem. I think this is due to the combo box
trying to set what it thinks the selected index is. A work around it to use the
second change datasource button which uses and alternate method.</td>
<td>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
CS
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
class ComboItem
{
private string _Text;
public string Text
{
get { return _Text; }
set { _Text = value; }
}
private string _value;
public string Value
{
get { return _value; }
set { _value = value; }
}
public ComboItem( string Text, string Value )
{
_Text = Text;
_value = Value;
}
}
public partial class _Default : System.Web.UI.Page
{
private List<ComboItem> Data1
{
get
{
if ( Session[ "Data1" ] == null )
{
Session[ "Data1" ] = new List<ComboItem>();
}
return Session[ "Data1" ] as List<ComboItem>;
}
set
{
Session[ "Data1" ] = value;
}
}
private List<ComboItem> Data3
{
get
{
if ( Session[ "Data3" ] == null )
{
Session[ "Data3" ] = new List<ComboItem>();
}
return Session[ "Data3" ] as List<ComboItem>;
}
set
{
Session[ "Data3" ] = value;
}
}
protected void Page_Load( object sender, EventArgs e )
{
if ( !Page.IsPostBack )
{
this.LoadData();
}
}
private void LoadData()
{
this.Data1.Add( new ComboItem( "Item1", "1" ) );
this.Data1.Add( new ComboItem( "Item2", "2" ) );
this.Data1.Add( new ComboItem( "Item3", "3" ) );
this.Data1.Add( new ComboItem( "Item4", "4" ) );
this.Data1.Add( new ComboItem( "Item5", "5" ) );
this.Data1.Add( new ComboItem( "Item6", "6" ) );
this.Data1.Add( new ComboItem( "Item7", "7" ) );
this.Data1.Add( new ComboItem( "Item8", "8" ) );
this.Data1.Add( new ComboItem( "Item9", "9" ) );
this.Data1.Add( new ComboItem( "Item0", "0" ) );
this.Data3.Add( new ComboItem( "Item1", "1" ) );
this.Data3.Add( new ComboItem( "Item2", "2" ) );
this.Data3.Add( new ComboItem( "Item3", "3" ) );
this.Data3.Add( new ComboItem( "Item4", "4" ) );
this.Data3.Add( new ComboItem( "Item5", "5" ) );
ComboBox1.DataSource = this.Data1;
ComboBox1.DataTextField = "Text";
ComboBox1.DataValueField = "Value";
ComboBox1.DataBind();
}
protected void btnChangeDatasource_Click( object sender, EventArgs e )
{
ComboBox1.SelectedIndex = 0;
ComboBox1.DataSource = Data3;
ComboBox1.DataBind();
}
protected void btnChangeDatasourceAlt_Click( object sender, EventArgs e )
{
HiddenField hf = ComboBox1.FindControl( "HiddenField" ) as HiddenField;
hf.Value = "0";
ComboBox1.DataSource = Data3;
ComboBox1.DataBind();
}
}
}
WraithNath
Member
4 Points
24 Posts
Ajax ComboBox Style is null or not an object
Apr 09, 2010 10:54 AM|LINK
Hello,
Im writing this post as i have had an issue with Ajax Combo Boxes that occurs when changing the datasource if an item has been selected. For example, if the ComboBox has 10 items, and the 10th item is selected. Then the datasource is changed to 5 items an error occurs in the javascript and setting the selected index or selected value of the control server side has no effect.
The error is: Microsoft Jscript runtime error: 'style' is null or not an object
I have included code below to show how to reproduce and a work around that works for me....
ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!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></title> <style type="text/css"> .style1 { width: 100%; } </style> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <table class="style1"> <tr> <td> <cc1:ComboBox ID="ComboBox1" runat="server" AutoPostBack="True"> </cc1:ComboBox> </td> <td> <asp:Button ID="btnChangeDatasource" runat="server" onclick="btnChangeDatasource_Click" Text="Change Datasource (error)" /> </td> <td> <asp:Button ID="btnChangeDatasourceAlt" runat="server" onclick="btnChangeDatasourceAlt_Click" Text="Change Datasource" /> </td> <td> To Reproduce the error ( Stlye is null or not an object ) select the bottom item in the drop down list. Once the bottom item is selected, click change datasource (error) and you will see the problem. I think this is due to the combo box trying to set what it thinks the selected index is. A work around it to use the second change datasource button which uses and alternate method.</td> <td> </td> </tr> </table> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html>CS
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebApplication1 { class ComboItem { private string _Text; public string Text { get { return _Text; } set { _Text = value; } } private string _value; public string Value { get { return _value; } set { _value = value; } } public ComboItem( string Text, string Value ) { _Text = Text; _value = Value; } } public partial class _Default : System.Web.UI.Page { private List<ComboItem> Data1 { get { if ( Session[ "Data1" ] == null ) { Session[ "Data1" ] = new List<ComboItem>(); } return Session[ "Data1" ] as List<ComboItem>; } set { Session[ "Data1" ] = value; } } private List<ComboItem> Data3 { get { if ( Session[ "Data3" ] == null ) { Session[ "Data3" ] = new List<ComboItem>(); } return Session[ "Data3" ] as List<ComboItem>; } set { Session[ "Data3" ] = value; } } protected void Page_Load( object sender, EventArgs e ) { if ( !Page.IsPostBack ) { this.LoadData(); } } private void LoadData() { this.Data1.Add( new ComboItem( "Item1", "1" ) ); this.Data1.Add( new ComboItem( "Item2", "2" ) ); this.Data1.Add( new ComboItem( "Item3", "3" ) ); this.Data1.Add( new ComboItem( "Item4", "4" ) ); this.Data1.Add( new ComboItem( "Item5", "5" ) ); this.Data1.Add( new ComboItem( "Item6", "6" ) ); this.Data1.Add( new ComboItem( "Item7", "7" ) ); this.Data1.Add( new ComboItem( "Item8", "8" ) ); this.Data1.Add( new ComboItem( "Item9", "9" ) ); this.Data1.Add( new ComboItem( "Item0", "0" ) ); this.Data3.Add( new ComboItem( "Item1", "1" ) ); this.Data3.Add( new ComboItem( "Item2", "2" ) ); this.Data3.Add( new ComboItem( "Item3", "3" ) ); this.Data3.Add( new ComboItem( "Item4", "4" ) ); this.Data3.Add( new ComboItem( "Item5", "5" ) ); ComboBox1.DataSource = this.Data1; ComboBox1.DataTextField = "Text"; ComboBox1.DataValueField = "Value"; ComboBox1.DataBind(); } protected void btnChangeDatasource_Click( object sender, EventArgs e ) { ComboBox1.SelectedIndex = 0; ComboBox1.DataSource = Data3; ComboBox1.DataBind(); } protected void btnChangeDatasourceAlt_Click( object sender, EventArgs e ) { HiddenField hf = ComboBox1.FindControl( "HiddenField" ) as HiddenField; hf.Value = "0"; ComboBox1.DataSource = Data3; ComboBox1.DataBind(); } } }Best regards,
Nathan
C# combobox