user control javascript not working in footer row of a gridview

gagansharma7 · May 6th, 2009, 05:27 PM

Hi there,

I successfully tested a user control for multi-select dropdownlist in a c# webform. The user control has some javascript functions to make it work. But when I use the same user-control in the footer row of a gridview, it doesnt work. The gridview is inside a <div>, <updatepanel>,<table> and is in the contentpage that uses a master page.

The error I am getting is: 'object required'.

register directive used in my webform is:

<%@RegisterTagPrefix="uc1"TagName="mddl"Src="../Controls/mddl.ascx" %>

gridview uses this:

<FooterTemplate>
<ucmddl:mddl id="ListMulti1"runat="server"></ucmddl:mddl>
</FooterTemplate>

using this line in the codebehind to detect and populate the user control:

ucpage.mddl m1 = (MultiDropdownSample.mddl)gridview1.FooterRow.FindControl("ListMulti1");

m1.List.Items.Add(new System.Web.UI.WebControls.ListItem("val1", "1"));
m1.List.Items.Add(new System.Web.UI.WebControls.ListItem("val2", "2"));

Any thoughts towards solution are really welcome.

Thanks
gs

Imar · May 7th, 2009, 03:11 PM

You probably need to show us the JavaScript to see what's wrong.

Once thing to be aware of is that ASP.NET can change client side IDs.

E.g., a Button like this:

Code:

 <asp:Button ID="Button1" runat="server" Text="Button" />

ends up like this in the browser:

Code:

<input type="submit" name="Button1" value="Button" id="Button1" />

However, the same button inside a "naming container control" (e.g. a GridView, a User Control, a Content control) can end up like this:

Code:

<input type="submit" name="ctl00$cpMainContent$Button1" value="Button" 
          id="ctl00_cpMainContent_Button1" />

If you assume there's a client element called Button1, your JavaScript will break. Look into ClientID to see how you can get the final ID of the control in the client.

Cheers,

Imar

gagansharma7 · May 7th, 2009, 03:31 PM

Hi Imar,

Thanks for your reply.

The js I am using is:

<scripttype="text/javascript"language="javascript">
function SelectedIndexChanged(ctlId)
{

var control = document.getElementById(ctlId+'ctl00_ContentPlaceHolder1_gvThreshold_ctl04_ListM ulti1_DDList');
var strSelText='';
for(var i = 0; i < control.length; i ++)
{
if(control.options[i].selected)
{
strSelText +=control.options[i].text + ',';
}
}
if (strSelText.length>0)
strSelText=strSelText.substring(0,strSelText.lengt h-1);
var ddLabel = document.getElementById(ctlId+"ctl00_ContentPlaceHolder1_gvThreshold_ctl04_ListM ulti1_DDLabel");
ddLabel.innerHTML = strSelText;
ddLabel.innerText = strSelText;
ddLabel.title = strSelText;
}
function OpenListBox(ctlId)
{
var lstBox = document.getElementById(ctlId+"ctl00_ContentPlaceHolder1_gvThreshold_ctl04_ListM ulti1_DDList");
if (lstBox.style.visibility == "visible")

{ CloseListBox(ctlId) ; }
else
{
lstBox.style.visibility = "visible";
lstBox.style.height="100px";
}
}
function CloseListBox(ctlId)
{
var panel = document.getElementById(ctlId+"ctl00_ContentPlaceHolder1_gvThreshold_ctl04_ListM ulti1_Panel2");
var tabl = document.getElementById(ctlId+"ctl00_ContentPlaceHolder1_gvThreshold_ctl04_ListM ulti1_Table2");
var lstBox = document.getElementById(ctlId+"ctl00_ContentPlaceHolder1_gvThreshold_ctl04_ListM ulti1_DDList");
lstBox.style.visibility = "hidden";
lstBox.style.height="0px";
panel.style.height=tabl.style.height;
}
</script>

The codebehind in the usercontrol to call it are:

publicvoid PageInit()
{
string ctlID= this.UniqueID + "_";

DDList.Attributes.Add("onchange", "SelectedIndexChanged('" + ctlID + "');");
DDList.Attributes.Add("onmouseout", "CloseListBox('" + ctlID + "');");
DDLabel.Attributes.Add("onclick", "OpenListBox('" + ctlID + "');");
colDDImage.Attributes.Add("onclick", "OpenListBox('" + ctlID + "');");
}

Thanks
gs

Imar · May 7th, 2009, 03:38 PM

When you post code here, can you please use the Clear Formatting button on the toolbar and wrap the code in code tags?

Also, this is a bit too much code for me to digest, especically without the possibility to see it running and without the relation to the final HTML in the browser. Also, "it doesn't work" is a bit too vague a discription to work with.

Try narrowing down the problem to a simple reproducible situation and please describe the problem in more detail.

Cheers,

Imar

gagansharma7 · May 7th, 2009, 04:21 PM

Hi Imar,

Sorry about not following the formatting and tags in my last posts, will take care of that from now. I am trying to use a multi-select dropdownlist in the footer row of gridview to add a new record to the database table. I saw an example of multi-select dropdownlist here:
http://www.codeproject.com/KB/user-c...pdownList.aspx

made it work on my localhost and tried to use this usercontrol in my main page. When I click on the dropdownlist on my page, it gives javascript error :

some line no. and 'object required'

Is it bit clear now?

Imar · May 7th, 2009, 04:33 PM

Yes, but my ability to help you hasn't improved.... ;-)

Without running code, I can't reproduce the problem and thus I can't suggest a fix. You need to use a debugger (VS 2008 has on-board JavaScript debugging; alternatively you can tools like FireBug or simply put a debugger statement in your code). Then you can find out's what's causing the null reference and work from there.

BTW: no need to be sorry about formatting your code. It's a bug in this forum that requires you to take these steps unfortunately.

Cheers,

Imar