Syncfusion asp.net grid didn’t show data

I am developing a small application in Syncfusion ASP.NET Core using the Grid control. My goal is to display data in the grid using the following setup:

<ejs-grid id="SourcingGrid" dataSource="@Url.Action("GetSourcingData", "Home")" allowPaging="true" toolbar="@(new List<string> { "Add", "Edit", "Delete", "Update", "Cancel" })">
    <e-grid-editSettings allowAdding="true" allowEditing="true" allowDeleting="true"></e-grid-editSettings>
    <e-grid-columns>
        <e-grid-column field="Sourcing_Fullname" headerText="Full Name" width="150" textAlign="Left"></e-grid-column>
        <e-grid-column field="Sourcing_Address" headerText="Address" width="150" textAlign="Left"></e-grid-column>
        <e-grid-column field="Sourcing_Mobile_no" headerText="Mobile No" width="120" textAlign="Left"></e-grid-column>
        <e-grid-column field="Sourcing_Email" headerText="Email" width="150" textAlign="Left"></e-grid-column>
        <e-grid-column field="Status" headerText="Status" width="80" textAlign="Center" type="boolean"></e-grid-column>
        <e-grid-column field="Blacklisted" headerText="Blacklisted" width="100" textAlign="Center" type="boolean"></e-grid-column>
        <e-grid-column field="Remarks" headerText="Remarks" width="150" textAlign="Left"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

In my controller, I have the following action method:

public IActionResult GetSourcingData()
{
    var sourcingData = _sourcingDAL.GetAllSourcingAsync();
    return Json(sourcingData);
}

And in my data access layer, I have this asynchronous method:

public async Task<IEnumerable<Sourcing>> GetAllSourcingAsync()
{
    var sourcings = new List<Sourcing>();
    using (var connectionManager = new DatabaseConnectionManager(_connectionString))
    {
        using (var con = connectionManager.GetConnection())
        {
            using (var cmd = new SqlCommand("SP_SOURCING_DETAIL", con))
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.Add("@PROC", SqlDbType.Int).Value = 0;

                // Open connection if it's not already open
                if (con.State != ConnectionState.Open)
                {
                    await con.OpenAsync();
                }

                using var rdr = await cmd.ExecuteReaderAsync();
                while (await rdr.ReadAsync())
                {
                    sourcings.Add(new Sourcing
                    {
                        Sourcing_Id = Convert.ToInt32(rdr["Sourcing_Id"]),
                        Sourcing_Fullname = rdr["Sourcing_Fullname"].ToString(),
                        Sourcing_Address = rdr["Sourcing_Address"].ToString(),
                        Sourcing_Mobile_no = rdr["Sourcing_Mobile_no"].ToString(),
                        Sourcing_Contact_no = rdr["Sourcing_Contact_no"].ToString(),
                        Sourcing_Email = rdr["Sourcing_Email"].ToString(),
                        Status = rdr["Status"] != DBNull.Value && Convert.ToBoolean(rdr["Status"]),
                        Remarks = rdr["Remarks"] != DBNull.Value ? rdr["Remarks"].ToString() : string.Empty,
                        Blacklisted = rdr["Blacklisted"] != DBNull.Value && Convert.ToBoolean(rdr["Blacklisted"])
                    });
                }
            }
        }
    }
    return sourcings;
}

However, when I run the project, neither the data nor the grid is displayed.

Issues Encountered:

  1. When inspecting requests in Developer Tools, I see an error message:

    Uncaught SyntaxError: Invalid regular expression flags

    This points to a problem with the following line:

    "dataSource": /Home/GetSourcingData,

Could anyone help me identify the issue and suggest possible fixes? Thank you!

What I’ve Tried:

  • Checked the URL in the browser to ensure it resolves correctly.

  • Verified that the GetSourcingData method is being called (it isn’t).

  • Made sure all necessary libraries for Syncfusion and ASP.NET Core are included.

I expected the following:

  • When the page loads, the GetSourcingData method should be invoked, retrieving the data from the database.

  • The data should be returned as JSON, which the Syncfusion Grid would then use to populate the grid with rows displaying the sourced data.

  • The grid should render correctly on the page, allowing for interaction (like paging, editing, and deleting).