[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1000
  • Last Modified:

Hiding nested asp:repeaters with div tags and javascript

I'm creating nested repeaters and each item of each repeater is a asp:LinkButton. Surrounding each repeater (div tags with id's) are the nested repeaters. I register the javascript in the codebehind for each element of the repeater, but the div tags are not intended to be server side controls and I am lost on how to pass the idea to the javascript to display or hide the repeaters. Basically, the div tags are nested within the repeaters themselves, so the form isn't finding them using getElementById. How do you accomplish this?
0
janessaallen
Asked:
janessaallen
  • 5
  • 3
1 Solution
 
raj3060Commented:
can you show the code.
0
 
janessaallenAuthor Commented:
sorry to inundate ...

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Catalog</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css">
    <script language="javascript" type="text/javascript">
            function lnkCatalog_OnClick(div)
            {
                alert(div);
                  if (div.style.display == "none")
                  {
                      div.style.display == "";
                  }
            }
            

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Repeater ID="rptCatalogs" runat="server" OnItemDataBound="rptCatalogs_OnItemDataBound">
            <HeaderTemplate></HeaderTemplate>
            <FooterTemplate></FooterTemplate>
            <ItemTemplate>
                <asp:Table ID="tblCatalog" runat="server">
                    <asp:TableRow>
                        <asp:TableCell>
                            <asp:LinkButton ID="lnkCatalog" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "CatalogName") %>' CssClass="linkbutton"></asp:LinkButton>
                        </asp:TableCell>
                    </asp:TableRow>
                </asp:Table>
                <div id="Families" style="display:none" runat="server">
                <asp:Repeater ID="rptFamilies" runat="server" OnItemDataBound="rptFamilies_OnItemDataBound">
                    <HeaderTemplate></HeaderTemplate>
                    <FooterTemplate></FooterTemplate>
                    <ItemTemplate>
                        <asp:Table ID="tblFamily" runat="server">
                            <asp:TableRow>
                                <asp:TableCell Width="10%"></asp:TableCell>
                                <asp:TableCell>
                                    <asp:LinkButton ID="lnkFamily" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "FamilyName") %>' CssClass="linkbutton"></asp:LinkButton>
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                        <asp:Repeater ID="rptCategories" runat="server" OnItemDataBound="rptCategories_OnItemDataBound">
                            <HeaderTemplate></HeaderTemplate>
                            <FooterTemplate></FooterTemplate>
                            <ItemTemplate>
                                <asp:Table ID="tblCategory" runat="server">
                                    <asp:TableRow>
                                        <asp:TableCell Width="20%"></asp:TableCell>
                                        <asp:TableCell>
                                            <asp:LinkButton ID="lnkCategory" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "CategoryName") %>' CssClass="linkbutton"></asp:LinkButton>
                                        </asp:TableCell>
                                    </asp:TableRow>
                                </asp:Table>  
                                <asp:Repeater ID="rptSubCategories" runat="server" OnItemDataBound="rptSubCategories_OnItemDataBound">
                                    <HeaderTemplate></HeaderTemplate>
                                    <FooterTemplate></FooterTemplate>
                                    <ItemTemplate>
                                        <asp:Table ID="tblSubCategory" runat="server">
                                            <asp:TableRow>
                                                <asp:TableCell Width="30%"></asp:TableCell>
                                                <asp:TableCell>
                                                    <asp:LinkButton ID="lnkSubCategory" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "SubCategoryName") %>' CssClass="linkbutton"></asp:LinkButton>
                                                </asp:TableCell>
                                            </asp:TableRow>
                                        </asp:Table>
                                        <asp:Repeater ID="rptProducts" runat="server">
                                            <HeaderTemplate></HeaderTemplate>
                                            <FooterTemplate></FooterTemplate>
                                            <ItemTemplate>
                                                <asp:Table ID="tblProduct" runat="server">
                                                    <asp:TableRow>
                                                        <asp:TableCell Width="40%"></asp:TableCell>
                                                        <asp:TableCell>
                                                            <asp:LinkButton ID="lnkProduct" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ProductDescription") %>' CssClass="linkbutton"></asp:LinkButton>
                                                        </asp:TableCell>
                                                    </asp:TableRow>
                                                </asp:Table>
                                            </ItemTemplate>
                                        </asp:Repeater>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </ItemTemplate>
                        </asp:Repeater>
                    </ItemTemplate>
                </asp:Repeater>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </form>
</body>
</html>


protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindTree();
        }
    }

    protected void BindTree()
    {
        rptCatalogs.DataSource = BuildTree();
        rptCatalogs.DataBind();

        LinkButton catalog_link = new LinkButton();
        Control div = (Control)form1.FindControl("Families");

        for (int i = 0; i <= rptCatalogs.Items.Count - 1; i++)
        {
            catalog_link = (LinkButton)rptCatalogs.Items[i].FindControl("lnkCatalog");
            catalog_link.Attributes.Add("OnClick", "javascript:lnkCatalog_OnClick(div);");
        }
    }

    protected DataSet BuildTree()
    {
        DataSet ds = new DataSet();
        conn = new ConnectionUtility();
          conn.cmd.CommandType = CommandType.StoredProcedure;
          conn.cmd.CommandText = "spBuildTree";
          try
          {
            XmlReader xr = conn.cmd.ExecuteXmlReader();
            ds.ReadXml(xr, XmlReadMode.InferSchema);
        }
          finally
          {
                if(conn != null)
                {
                      conn.Close();
                }
          }
        conn.Close();
      return ds;
  }

    protected void rptCatalogs_OnItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        RepeaterItem item = e.Item;
        if ((item.ItemType == ListItemType.Item) ||
            (item.ItemType == ListItemType.AlternatingItem))
        {
            Repeater FamilyRepeater = (Repeater)item.FindControl("rptFamilies");
            DataRowView drv = (DataRowView)item.DataItem;
            FamilyRepeater.DataSource = drv.CreateChildView("catalog_family");
            FamilyRepeater.DataBind();
        }
    }

    protected void rptFamilies_OnItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        RepeaterItem item = e.Item;
        if ((item.ItemType == ListItemType.Item) ||
            (item.ItemType == ListItemType.AlternatingItem))
        {
            Repeater CategoryRepeater = (Repeater)item.FindControl("rptCategories");
            DataRowView drv = (DataRowView)item.DataItem;
            CategoryRepeater.DataSource = drv.CreateChildView("family_category");
            CategoryRepeater.DataBind();
        }
    }

    protected void rptCategories_OnItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        RepeaterItem item = e.Item;
        if ((item.ItemType == ListItemType.Item) ||
            (item.ItemType == ListItemType.AlternatingItem))
        {
            Repeater SubCategoryRepeater = (Repeater)item.FindControl("rptSubCategories");
            DataRowView drv = (DataRowView)item.DataItem;
            SubCategoryRepeater.DataSource = drv.CreateChildView("category_subcategory");
            SubCategoryRepeater.DataBind();
        }
    }

    protected void rptSubCategories_OnItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        RepeaterItem item = e.Item;
        if ((item.ItemType == ListItemType.Item) ||
            (item.ItemType == ListItemType.AlternatingItem))
        {
            Repeater ProductRepeater = (Repeater)item.FindControl("rptProducts");
            DataRowView drv = (DataRowView)item.DataItem;
            ProductRepeater.DataSource = drv.CreateChildView("subcategory_product");
            ProductRepeater.DataBind();
        }
    }
}
0
 
janessaallenAuthor Commented:
also, i realize that if i take the runat="server" off of the div tag, then my javascript executes. i just can't get it to recognize the tag by the id.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
David H.H.LeeCommented:
Dear janessaallen,
Try amend this code:
 function lnkCatalog_OnClick()
            {
                alert(arguments[0]);
               //the rest of your code
               // var div;
               //div=document.getElementById(arguments[0]);
              }
           

catalog_link.Attributes.Add("OnClick", "javascript:lnkCatalog_OnClick('" + div.ClientID + "');");
0
 
janessaallenAuthor Commented:
okay, i figured it out. all i have to do is get the div tag style.display - not the id of the control.
0
 
janessaallenAuthor Commented:
Thanks for the suggestion, but it doesn't seem to want to recognize creating a reference to the div tag. When I put this in the code-behind:

Control div = new Control();
            div = (Control)rptCatalogs.FindControl("Families");
            catalog_link.Attributes.Add("OnClick", "javascript:lnk_OnClick('" + div.ClientID + "');");

it gives me an object reference error. not sure why ... i have runat=server in the actual div tag.
0
 
David H.H.LeeCommented:
Dear janessaallen,
You can bind current javascript function inside onItemDataBound event.
eg:
protected void BindTree()
    {
        rptCatalogs.DataSource = BuildTree();
        rptCatalogs.DataBind();
    }

protected void rptCatalogs_OnItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        RepeaterItem item = e.Item;
        if ((item.ItemType == ListItemType.Item) ||
            (item.ItemType == ListItemType.AlternatingItem))
        {
             //bind javascript function here
            System.Web.UI.HtmlControls.HtmlGenericControl Families;
            System.Web.UI.WebControls.LinkButton lnkCatalog;
 
            Families=(System.Web.UI.HtmlControls.HtmlGenericControl)item.FindControl("Families");
           lnkCatalog=(System.Web.UI.WebControls.LinkButton )item.FindControl("lnkCatalog");
lnkCatalog.Attributes.Add("OnClick", "javascript:lnkCatalog_OnClick('" + Families.ClientID + "');");

            Repeater FamilyRepeater = (Repeater)item.FindControl("rptFamilies");
            DataRowView drv = (DataRowView)item.DataItem;
            FamilyRepeater.DataSource = drv.CreateChildView("catalog_family");
            FamilyRepeater.DataBind();
        }
    }
0
 
janessaallenAuthor Commented:
hmmm...seems like that should work but for some reason, i'm still getting a null reference exception. it may have something to do with the html and the repeaters, etc. I'll mark this as a solution. Good call ... totally didn't even think about doing it on the data bind function.
0
 
David H.H.LeeCommented:
Dear janessaallen,
I'm glad to help.  
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now