Alternative to Editable GridView in UserControls

 First of all this is my first blog post and I´m not sure if it can be interesting for some of you. I was trying for some days in differents ways to have a GridView with Textbox to edit information created dinamically. I googled and looked to blog like this for some that could help me and most people says that they were having problems with dynamic GridView in UserControls. The reason  I had to use a UserControl is that my requirement was to show the same kind of information but depending on a value (lets say state or country)  the gridview shows 1 to n rows in the gridview and also on each row should contain some textboxes to entry information and validate them according to different rules per entity (state or country). Also the info in the GridView should collapsed and expanded that was with JavaScript of course.

 My solution was to use the HTMLTable ASP Net Control and there I had some other issues and I needed to learn more about the pages Events and Loading UserControls from my page.

First of all in order to mantain the state of the TextBoxes in the UserControl I used (I will take some details from my code because it is from a Production Software I developed in my company).

Override the PreInit Event of the page 

        protected override void OnPreInit(EventArgs e)
        {
                base.OnPreInit(e);
          

                FillControls();
         }

In the page I have a PlaceHolder and in the FillControls do the following. Get the List of states and I add the UserControl for each of them. Since the UserControl contains a HTMLTable I included some methods in the UserControls class to add all the empty rows for items, a row for Summaryze values and a footer row that contains Buttons to Process the information. The ActiveToggle is the method to add attributes to the Image for collapse and expand the UserControl.

        protected void FillControls()
        {
            lstSt = MyDLL.EntityTempGetStates(param1,param2,param3);
            int id = 1;

            foreach (BEState beSt in lstSt)
            {
                EntityCredit EntityCtrl = (EntityPoints)Page.LoadControl("UserControls/EntityPoints.ascx");
                plhControls.Controls.Add(EntityCtrl);
                EntityCtrl.ID = "EntityCtrl" + id;
                EntityCtrl.StateID = beSt.StateID;
                EntityCtrl.param2 = param2;
                EntityCtrl.EventID = param1;
                EntityCtrl.StateName = beSt.StateCode;
                EntityCtrl.param3 = param3;
                id++;

                lstbeEntitys = MyDLL.EntityTempGetValues(param1, beSt.StateID,param2,param3);

                if (lstbeEntitys != null)
                    if (lstbeEntitys.Count > 0)
                    {
                        foreach (BEObjectDetailValues beObjValues in lstbeEntitys)
                        {
                            EntityCtrl.AddRow();
                        }
                    }
                EntityCtrl.AddSumsRow();
                EntityCtrl.AddFooterRow();
                EntityCtrl.ActiveToggle();
                EntityCtrl.AddRules();
            }
        }

In the codebehind of the UserControl are the methods called on the page class custom method FillControls. The source of the UserControls is included so you can consult it just to view the approach maybe could have errors cause I modified to use other variables name.

Once the UserControls is prepared in the Load Event of the page call the FillGrid method for each UserControl where the bind is done

                foreach (BEState beSt in lstSt)
                {
                    EntityCredit EntityCtrl = (EntityCredit)Page.FindControl("EntityCtrl" + id);
                    id++;
                    EntityCtrl.FillGrid();
                }

the JavaScript to collapse and expand the user control is the following

//Function to collapse or Expand the panel with Entity Grid
    function ToggleEntity(ctrlId,panelId)
    {
        var pnl = document.getElementById(panelId);
        var img = document.getElementById(ctrlId);
       
        if(pnl.style.display == "block")
        {
            pnl.style.display = "none";
            img.src="Closed.gif";
        }
        else
        {
            pnl.style.display = "block";
            img.src="Open.gif";
        }
    
    }

That´s the way I solved my problem and I hope it could be helpful for someone else. I didn´t include it the JavaScript to complete all the functionality but you can contact me for further info.