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:
-
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).