How to bind Grid in Ajax call method using ArryList object in asp.net

Karthik K

Hi All ,

How to bind the gridview through ajax call Method using Arraylist Object result. i have implemented it . i am not sure where did mistake. can anyone check correct my mistake.I never bind grid like this .

Sample code :

Ajax call :

dummy grid :

private void BindColumnToGridview()
{
DataTable dt = new DataTable();
dt.Columns.Add("Branch");
dt.Columns.Add("Barcode");
dt.Columns.Add("Name");
dt.Columns.Add("InventoryDesc");
dt.Columns.Add("CategoryName");
dt.Columns.Add("Amount");
dt.Columns.Add("Qty");
dt.Rows.Add();
gvDetails.DataSource = dt;
gvDetails.DataBind();
gvDetails.Rows[0].Visible = false;
}

Note : Arraylist having data , when append time its not loading properly.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tuhin Paul2y ago

Accepted answer

$(document).ready(() => {
    const categoryName: string = 'FERRERO';

    $.ajax({
        type: "POST",
        url: "InteractiveDashboard.aspx/WebGrid1",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ CategoryName: categoryName }),
        dataType: "json",
        success: (data: any) => {
            if (data && data.d && data.d.length > 0) {
                populateTable(data.d);
            } else {
                $("#gvDetails tbody").html("No data available");
            }
        },
        error: (xhr: JQuery.jqXHR, status: string, error: string) => {
            alert("An error occurred while fetching data: " + error);
        }
    });
});

function populateTable(data: any[]): void {
    const $tableBody: JQuery = $("#gvDetails tbody");
    $tableBody.empty();

    data.forEach((item: any) => {
        const row: string = `
            
                ${item.Branch}
                ${item.Barcode}
                ${item.Name}
                ${item.InventoryDesc}
                ${item.CategoryName}
                ${item.Amount}
                ${item.Qty}
            
        `;
        $tableBody.append(row);
    });
}

In this TypeScript version, I've added type annotations for variables and function parameters. This helps catch type-related errors during development, making your code more robust. I've used arrow functions for event handlers to check lexical scoping of this. If you have TypeScript configured in your project, this code will be type-checked during compilation, providing additional safety and better code maintenance.

Tuhin Paul2y ago

$(document).ready(function () {
  var categoryName = 'FERRERO'; // Use lowercase for consistency

  $.ajax({
    type: "GET",
    url: "InteractiveDashboard.aspx/WebGrid1",
    data: { CategoryName: categoryName }, // Send as query parameters
    dataType: "json",
    success: function (data) {
      $("#gvDetails tbody").empty(); // Clear existing rows except headers

      for (var i = 0; i < data.d.length; i++) {
        $("#gvDetails tbody").append(`
          
            ${data.d[i].Branch}
            ${data.d[i].Barcode}
            ${data.d[i].Name}
            ${data.d[i].InventoryDesc}
            ${data.d[i].CategoryName}
            ${data.d[i].Amount}
            ${data.d[i].Qty}
          
        `);
      }
    },
    error: function (jqXHR, textStatus, errorThrown) {
      console.error("Error:", textStatus, errorThrown); // Log the error
      // Optionally display a user-friendly error message here
    }
  });
});

You can use template literals (backticks ``) for cleaner string interpolation instead of string concatenation (+). This improves readability. While the data is being fetched, you can display a loading indicator (e.g., spinner) to provide feedback to the user. Remove it when the data is loaded or in case of an error.

Amit Mohanty2y ago

Once try this: