No Data available in table

To ensure that the “No Data available” message is removed when a record is added to the table, you can add a check to remove any existing placeholder row before inserting the new row. Here’s how you can modify your JavaScript code to achieve this:

1. Add a placeholder row with the “No Data available” message when the table is initially created.
2. Remove the placeholder row when a new row is added.

Here’s the updated code:

C# Code

StringBuilder htmlTable = new StringBuilder();
htmlTable.Append("");
htmlTable.Append("");
htmlTable.Append("");
htmlTable.Append("");
htmlTable.Append("");
htmlTable.Append("
Sr.
Document
File Name
Action
No Data available
");
PlaceHolderTable0.Controls.Add(new Literal { Text = htmlTable.ToString() });

 

JavaScript Code

 

document.getElementById('addRowBtn').addEventListener('click', function () {
    // Get the table body
    var tableBody = document.getElementById('tbldata').getElementsByTagName('tbody')[0];

    // Remove the "No Data available" row if it exists
    var noDataRow = document.getElementById('noDataRow');
    if (noDataRow) {
        tableBody.removeChild(noDataRow);
    }

    // Get the values from the dropdown and file upload
    var documentValue = document.getElementById('<%= ddlDocument.ClientID %>').value;
    var documentText = document.getElementById('<%= ddlDocument.ClientID %>').options[document.getElementById('<%= ddlDocument.ClientID %>').selectedIndex].text;
    var fileUpload = document.getElementById('<%= FileUploadIdentityProof.ClientID %>');
    var fileName = fileUpload.value.split('\\').pop();

    // Create a new row
    var newRow = tableBody.insertRow();

    // Insert cells and set their content
    var cell1 = newRow.insertCell(0);
    var cell2 = newRow.insertCell(1);
    var cell3 = newRow.insertCell(2);
    var cell4 = newRow.insertCell(3);

    cell1.innerHTML = tableBody.rows.length; // Sr. No.
    cell2.innerHTML = documentText; // Document
    cell3.innerHTML = fileName; // File Name
    cell4.innerHTML = 'Delete'; // Action

    // Clear the file upload control
    fileUpload.value = '';
});

 

This code will ensure that the “No Data available” message is removed as soon as a new row is added to the table. If you have any further questions or need additional help, feel free to ask

Thanks

Try the below code once.

StringBuilder htmlTable = new StringBuilder();
htmlTable.Append("");
htmlTable.Append("");
htmlTable.Append("");
// Add placeholder row
htmlTable.Append("");
htmlTable.Append("");
htmlTable.Append("
Sr.
Document
File Name
Action
No Data available
");
PlaceHolderTable0.Controls.Add(new Literal { Text = htmlTable.ToString() });

document.getElementById('addRowBtn').addEventListener('click', function () {
    // Get the table body
    var tableBody = document.getElementById('tbldata').getElementsByTagName('tbody')[0];

    // Check if the "No Data available" row exists and remove it
    var noDataRow = document.getElementById('noDataRow');
    if (noDataRow) {
        tableBody.removeChild(noDataRow);
    }

    // Get the values from the dropdown and file upload
    var documentValue = document.getElementById('<%= ddlDocument.ClientID %>').value;
    var documentText = document.getElementById('<%= ddlDocument.ClientID %>').options[document.getElementById('<%= ddlDocument.ClientID %>').selectedIndex].text;
    var fileUpload = document.getElementById('<%= FileUploadIdentityProof.ClientID %>');
    var fileName = fileUpload.value.split('\\').pop();

    // Create a new row
    var newRow = tableBody.insertRow();

    // Insert cells and set their content
    var cell1 = newRow.insertCell(0);
    var cell2 = newRow.insertCell(1);
    var cell3 = newRow.insertCell(2);
    var cell4 = newRow.insertCell(3);

    cell1.innerHTML = tableBody.rows.length; // Sr. No.
    cell2.innerHTML = documentText; // Document
    cell3.innerHTML = fileName; // File Name
    cell4.innerHTML = 'Delete'; // Action

    // Clear the file upload control
    fileUpload.value = '';
});