Good day,

I figured out that there are keys that are duplicated and recreated. In the beginning the eleventh data row of the first movie (Avengers Infinity War), the key is “text111″, meaning the key of the first row, eleventh datarow. Later at the eleventh row (which should be Zombieland: Double Tap), the key there is “text111″, the eleventh row, first datarow. I solved just by adding an underscore between the key’s row and datarow identifiers e.g. “text1_11” and “text11_1”, it solved the problem and the table is created with all movie items from the database.

Good day,

This is actually my first question on the site, I actually made an account for this problem alone.
I struggling a lot with this and can’t seem to figure out what the cause is.

I’m playing around with dynamically creating html controls and populating them with data from a SQL Database.

As a test application I have been using the concept of a video store rental shop that has an admin site to modify (Insert, Update, Delete) movies, receive reports and statistics about the movies and so on.

So as a control to display the movies I use a html table with my own custom style sheet, with the Movie’s detail in a header row, and when you click on the header row the table expands to show the stock of that movie (As a movie can have multiple physical “discs” within the shop that have different stock codes and statuses).

Thus the reason I’m trying to create the table dynamically as the number of movies and the number of “discs” these movies can have can change. I have created a working “Proof of Concept”, but a problem occurs on the eleventh movie where the header row (Showing Main Title, Sub Title, Age Restriction, Main Category, Secondary Category, and Rental Amount) isn’t created but the data that is shown when you click on the header and it expands is created, but is appended to the tenth movie’s expanded data.

The scripts are appended using ScriptManager.RegisterStartupScript. When I check the compiled code in a browser (Chrome’s Inspect Tool), the scripts in the Manager are all appended except for the the eleventh movie’s header and first data row.

I used breakpoints to check the codebehind (OnPage_Load Event) and the script runs and it isn’t a problem with the ScriptManager.RegisterStartupScript’s key parameter, as it is created with a loop and I made sure that the controls created dynamically have unique ID tags to call on in the script itself and for later.

I’ve been stuck on this problem the whole day and can’t figure out why all the rows and there expanded data rows are created and works except for the last one and its first data row.

Why is this happening? Is it a problem in the script? (But why are all the other rows created without a problem?)

So far I believe it’s a problem in the codebehind of program but still can’t figure out why the problem happens.

Here is the C# from the codebehind

namespace WebApplication4
{
    public partial class _Default : Page
    {
        private static String connectionString = @"Data Source=BOARDROOM-PCSQLEXPRESS;Initial Catalog=Express_Video;Integrated Security=True";
        private static SqlConnection connection;
        private SqlDataAdapter da1 = null;
        private SqlDataAdapter da2 = null;
        private SqlCommand command1 = null;
        private SqlCommand command2 = null;
        private DataSet ds1 = null;
        private DataSet ds2 = null;

        protected void Page_Load(object sender, EventArgs e)
        {
            connection = new SqlConnection(connectionString);
            connection.Open();

            da1 = new SqlDataAdapter();
            da2 = new SqlDataAdapter();

            command1 = new SqlCommand("sp_EV_AllMoviesForStock", connection);
            command1.CommandType = CommandType.StoredProcedure;

            ds1 = new DataSet();

            da1.SelectCommand = command1;
            da1.Fill(ds1, "Movies");

            string MovieID;
            string MainTitle;
            string SecTitle;
            string Age_R;
            string Cat_M;
            string Cat_S;
            double Rent_Amount;

            string StockCode;
            string Status;
            string StatusInfo;
            string DateCreated;

            string script1;
            string script2;
            string key1;
            string key2;

            ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "CreatePageConnector();", true);

            for (int Outer = 1; Outer <= ds1.Tables["Movies"].Rows.Count; Outer++)
            {

                MovieID     = ds1.Tables["Movies"].Rows[Outer - 1][0].ToString();
                MainTitle   = ds1.Tables["Movies"].Rows[Outer - 1][1].ToString();
                SecTitle    = ds1.Tables["Movies"].Rows[Outer - 1][2].ToString();
                Age_R       = ds1.Tables["Movies"].Rows[Outer - 1][3].ToString();
                Cat_M       = ds1.Tables["Movies"].Rows[Outer - 1][4].ToString();
                Cat_S       = ds1.Tables["Movies"].Rows[Outer - 1][5].ToString();
                Rent_Amount = Convert.ToDouble(ds1.Tables["Movies"].Rows[Outer - 1][6].ToString());

                script1 = "'" + Outer + "','" + MainTitle + "','" + SecTitle + "','" + Age_R + "','" + Cat_M + "','" + Cat_S + "','" + Rent_Amount + "'";
                key1 = "text" + Outer.ToString();            

                if (Outer % 2 == 0)
                {
                    ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), key1, "CreateTableRowEven(" + script1 + ");", true);
                }
                else
                {
                    ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), key1, "CreateTableRowOdd(" + script1 + ");", true);
                }

                command2 = new SqlCommand("sp_EV_StockByMovie", connection);
                command2.CommandType = CommandType.StoredProcedure;
                command2.Parameters.AddWithValue("@MovieID", MovieID);

                ds2 = new DataSet();

                da2.SelectCommand = command2;
                da2.Fill(ds2, "Stock");

                for (int Inner = 1; Inner <= ds2.Tables["Stock"].Rows.Count; Inner++)
                {
                    key2 = "text" + Outer.ToString() + Inner.ToString();

                    StockCode   = ds2.Tables["Stock"].Rows[Inner - 1][0].ToString();
                    Status      = ds2.Tables["Stock"].Rows[Inner - 1][1].ToString();
                    StatusInfo  = ds2.Tables["Stock"].Rows[Inner - 1][2].ToString();
                    DateCreated = ds2.Tables["Stock"].Rows[Inner - 1][3].ToString();

                    script2 = "'" + StockCode + "','" + Status + "','" + StatusInfo + "','" + DateCreated + "'";

                    ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), key2, "CreateInnerData('" + Outer + "','" + Inner + "'," + script2 + ");", true);
                }
            }
        }
    }
}

Here is the Page html (.aspx file)

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication4._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <div class="container" id="containTable">
        <%--Table is Created Here--%>
    </div> 

</asp:Content>

Here is CreateTable.js

Note: the Odd and Even functions are to change the row’s color (I feel it done this why is repetitive and unnecessary but its good enough for now, as a proof of concept)

function CreatePageConnector() {
    var TableHolder = document.createElement("table");

    TableHolder.setAttribute("class", "table");
    TableHolder.setAttribute("id", "TableHolder");

    document.getElementById("containTable").appendChild(TableHolder);
}

function CreateTableRowOdd(ID, MainTitle, SubTitle, Age_Restr, Cat_1, Cat_2, Rent_Amount) {
    var HeaderRow = document.createElement("tr");

    HeaderRow.setAttribute("class", "header");
    HeaderRow.setAttribute("id", "HeaderRow_A_" + ID);

    document.getElementById("TableHolder").appendChild(HeaderRow);

    var InfoHeader = document.createElement("td");

    InfoHeader.setAttribute("class", "InfoHeader");
    InfoHeader.setAttribute("colspan", "4");
    InfoHeader.setAttribute("id", "InfoHeaderData_A_" + ID);

    document.getElementById("HeaderRow_A_" + ID).appendChild(InfoHeader);

    var contHolder = document.createElement("div");

    contHolder.setAttribute("class", "container contHolder");
    contHolder.setAttribute("id", "contHolder_A_" + ID);

    document.getElementById("InfoHeaderData_A_" + ID).appendChild(contHolder);

    var innerTable = document.createElement("table");

    innerTable.setAttribute("class", "table innerTable");
    innerTable.setAttribute("id", "innerTable_A_" + ID);

    document.getElementById("contHolder_A_" + ID).appendChild(innerTable);

    var DataHeader = document.createElement("tr");

    DataHeader.setAttribute("class", "DataHeaderOdd");
    DataHeader.setAttribute("id", "DataHeaderOdd_A_" + ID);

    document.getElementById("innerTable_A_" + ID).appendChild(DataHeader);

    var DataHolder1 = document.createElement("td");

    DataHolder1.setAttribute("id", "DataHolder_A_A_" + ID);
    DataHolder1.innerHTML = MainTitle;

    var DataHolder2 = document.createElement("td");

    DataHolder2.setAttribute("id", "DataHolder_A_B_" + ID);
    DataHolder2.innerHTML = SubTitle;

    var DataHolder3 = document.createElement("td");

    DataHolder3.setAttribute("id", "DataHolder_A_C_" + ID);
    DataHolder3.innerHTML = Age_Restr;

    var DataHolder4 = document.createElement("td");

    DataHolder4.setAttribute("id", "DataHolder_A_D_" + ID);
    DataHolder4.innerHTML = Cat_1 + " " + Cat_2;

    var DataHolder5 = document.createElement("td");

    DataHolder5.setAttribute("id", "DataHolder_A_E_" + ID);
    DataHolder5.innerHTML = "R " + Rent_Amount;

    document.getElementById("DataHeaderOdd_A_" + ID).appendChild(DataHolder1);
    document.getElementById("DataHeaderOdd_A_" + ID).appendChild(DataHolder2);
    document.getElementById("DataHeaderOdd_A_" + ID).appendChild(DataHolder3);
    document.getElementById("DataHeaderOdd_A_" + ID).appendChild(DataHolder4);
    document.getElementById("DataHeaderOdd_A_" + ID).appendChild(DataHolder5);

    var InnerHeaderRow = document.createElement("tr");

    InnerHeaderRow.setAttribute("class", "innerDataHeader");
    InnerHeaderRow.setAttribute("id", "InnerHeaderRow_B_" + ID);

    document.getElementById("TableHolder").appendChild(InnerHeaderRow);

    var HeaderHolder1 = document.createElement("td");

    HeaderHolder1.setAttribute("id", "HeaderHolder_B_A" + ID);
    HeaderHolder1.innerHTML = "Stock Code";

    var HeaderHolder2 = document.createElement("td");

    HeaderHolder2.setAttribute("id", "HeaderHolder_B_B" + ID);
    HeaderHolder2.innerHTML = "Status";

    var HeaderHolder3 = document.createElement("td");

    HeaderHolder3.setAttribute("id", "HeaderHolder_B_C" + ID);
    HeaderHolder3.innerHTML = "Status Information";

    var HeaderHolder4 = document.createElement("td");

    HeaderHolder4.setAttribute("id", "HeaderHolder_B_D" + ID);
    HeaderHolder4.innerHTML = "Status Change Date";

    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder1);
    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder2);
    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder3);
    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder4);
}

function CreateTableRowEven(ID, MainTitle, SubTitle, Age_Restr, Cat_1, Cat_2, Rent_Amount) {
    var HeaderRow = document.createElement("tr");

    HeaderRow.setAttribute("class", "header");
    HeaderRow.setAttribute("id", "HeaderRow_A_" + ID);

    document.getElementById("TableHolder").appendChild(HeaderRow);

    var InfoHeader = document.createElement("td");

    InfoHeader.setAttribute("class", "InfoHeader");
    InfoHeader.setAttribute("colspan", "4");
    InfoHeader.setAttribute("id", "InfoHeaderData_A_" + ID);

    document.getElementById("HeaderRow_A_" + ID).appendChild(InfoHeader);

    var contHolder = document.createElement("div");

    contHolder.setAttribute("class", "container contHolder");
    contHolder.setAttribute("id", "contHolder_A_" + ID);

    document.getElementById("InfoHeaderData_A_" + ID).appendChild(contHolder);

    var innerTable = document.createElement("table");

    innerTable.setAttribute("class", "table innerTable");
    innerTable.setAttribute("id", "innerTable_A_" + ID);

    document.getElementById("contHolder_A_" + ID).appendChild(innerTable);

    var DataHeader = document.createElement("tr");

    DataHeader.setAttribute("class", "DataHeaderEven");
    DataHeader.setAttribute("id", "DataHeaderEven_A_" + ID);

    document.getElementById("innerTable_A_" + ID).appendChild(DataHeader);

    var DataHolder1 = document.createElement("td");

    DataHolder1.setAttribute("id", "DataHolder_A_A_" + ID);
    DataHolder1.innerHTML = MainTitle;

    var DataHolder2 = document.createElement("td");

    DataHolder2.setAttribute("id", "DataHolder_A_B_" + ID);
    DataHolder2.innerHTML = SubTitle;

    var DataHolder3 = document.createElement("td");

    DataHolder3.setAttribute("id", "DataHolder_A_C_" + ID);
    DataHolder3.innerHTML = Age_Restr;

    var DataHolder4 = document.createElement("td");

    DataHolder4.setAttribute("id", "DataHolder_A_D_" + ID);
    DataHolder4.innerHTML = Cat_1 + " " + Cat_2;

    var DataHolder5 = document.createElement("td");

    DataHolder5.setAttribute("id", "DataHolder_A_E_" + ID);
    DataHolder5.innerHTML = "R " + Rent_Amount;

    document.getElementById("DataHeaderEven_A_" + ID).appendChild(DataHolder1);
    document.getElementById("DataHeaderEven_A_" + ID).appendChild(DataHolder2);
    document.getElementById("DataHeaderEven_A_" + ID).appendChild(DataHolder3);
    document.getElementById("DataHeaderEven_A_" + ID).appendChild(DataHolder4);
    document.getElementById("DataHeaderEven_A_" + ID).appendChild(DataHolder5);

    var InnerHeaderRow = document.createElement("tr");

    InnerHeaderRow.setAttribute("class", "innerDataHeader");
    InnerHeaderRow.setAttribute("id", "InnerHeaderRow_B_" + ID);

    document.getElementById("TableHolder").appendChild(InnerHeaderRow);

    var HeaderHolder1 = document.createElement("td");

    HeaderHolder1.setAttribute("id", "HeaderHolder_B_A_" + ID);
    HeaderHolder1.innerHTML = "Stock Code";

    var HeaderHolder2 = document.createElement("td");

    HeaderHolder2.setAttribute("id", "HeaderHolder_B_B_" + ID);
    HeaderHolder2.innerHTML = "Status";

    var HeaderHolder3 = document.createElement("td");

    HeaderHolder3.setAttribute("id", "HeaderHolder_B_C_" + ID);
    HeaderHolder3.innerHTML = "Status Information";

    var HeaderHolder4 = document.createElement("td");

    HeaderHolder4.setAttribute("id", "HeaderHolder_B_D_" + ID);
    HeaderHolder4.innerHTML = "Status Change Date";

    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder1);
    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder2);
    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder3);
    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder4);
}

function CreateInnerData(ID1, ID2, StockCode, Status, StatusInfo, DateChanged) {
    var InnerData = document.createElement("tr");

    InnerData.setAttribute("class", "innerData");
    InnerData.setAttribute("id", "InnerData_C_" + ID1 + "_" + ID2);

    document.getElementById("TableHolder").appendChild(InnerData);

    var innerDataHolder1 = document.createElement("td");

    innerDataHolder1.setAttribute("id", "HeaderHolder_C_A_" + ID1 + "_" + ID2);
    innerDataHolder1.innerHTML = StockCode;

    var innerDataHolder2 = document.createElement("td");

    innerDataHolder2.setAttribute("id", "HeaderHolder_C_B_" + ID1 + "_" + ID2);
    innerDataHolder2.innerHTML = Status;

    var innerDataHolder3 = document.createElement("td");

    innerDataHolder3.setAttribute("id", "HeaderHolder_C_C_" + ID1 + "_" + ID2);
    innerDataHolder3.innerHTML = StatusInfo;

    var innerDataHolder4 = document.createElement("td");

    innerDataHolder4.setAttribute("id", "HeaderHolder_C_D_" + ID1 + "_" + ID2);
    innerDataHolder4.innerHTML = DateChanged;

    document.getElementById("InnerData_C_" + ID1 + "_" + ID2).appendChild(innerDataHolder1);
    document.getElementById("InnerData_C_" + ID1 + "_" + ID2).appendChild(innerDataHolder2);
    document.getElementById("InnerData_C_" + ID1 + "_" + ID2).appendChild(innerDataHolder3);
    document.getElementById("InnerData_C_" + ID1 + "_" + ID2).appendChild(innerDataHolder4);
}

Here is the Javascript for the row dropdown of the table

$(document).ready(function () {
    var ua = navigator.userAgent,
        event = (ua.match(/iPad/i)) ? "touchstart" : "click";
    if ($('.table').length > 0) {
        $('.table .header').on(event, function () {
            $(this).toggleClass("active", "").nextUntil('.header').css('display', function (i, v) {
                return this.style.display === 'table-row' ? 'none' : 'table-row';
            });
        });
    }
})

Here is the Style Sheet

@import url('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap');

body {
    color: #6a6c6f;
    background-color: #f1f3f6;
    margin-top: 30px;
    font-family: 'Titillium Web', sans-serif;
}

.container {
    max-width: 960px;
}

.contHolder {
    height: 100%;
    padding: 0;
}

.table {
    color: white;
    text-align: center;
}

.table tr.header {
    font-weight: bold;
    cursor: pointer;
    -webkit-user-select: none;
    /* Chrome all / Safari all */
    -moz-user-select: none;
    /* Firefox all */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Likely future */
}

.table tr:not(.header) {
    display: none;
}

.table tr:nth-child(odd) {
    background: #eee;
}

    .table .header td:after {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transition: transform .25s linear;
        -webkit-transition: -webkit-transform .25s linear;
    }


.table .innerTable {
    margin: 0;
}

.table .InfoHeader {
    padding: 0;
    border-top: none;
}

    .table tr.DataHeaderOdd {
        background-color: #414141;
        display: table-row;
    }

    .table tr.DataHeaderEven {
        background-color: #5b5656;
        display: table-row;
    }

    .table tr.DataHeaderOdd td {
        width: 20%;
        border: none;
        line-height: 30px;
    }

    .table tr.DataHeaderEven td {
        width: 20%;
        border: none;
        line-height: 30px;
    }

.table .innerDataHeader td {
    width: 25%;
    border: none;
    font-size: 14px;
    line-height: 25px;
    color: white;
    background-color: #6c7b95;
}

.table .innerData td {
    color: #393e46;
    font-size: 10px;
    line-height: 20px;
}

Here is a screenshot: