The grid did not display on the page

[Kishor Shrestha]

Hi,

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!

[Vikram Sundararajan]

Hi Kishor Shrestha,

Greetings from Syncfusion support,

We understand that you are facing an problem for grid and data source not displayed. We have created a sample based on the provided details. Please refer the attached sample for more information,

Sample: 19425-Sample

We recommend using the provided sample as a reference to resolve the issue. Also please refer to the Syncfusion ASP.NET Core Grid documentation for more reference,

Documentation:

1. https://ej2.syncfusion.com/aspnetcore/documentation/grid/getting-started-core
2. https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/local-data

Please get back us if you need further assistance.

Regards,

Vikram S

Attachment: 194925Sample_e744a6eb.zip

[Kishor Shrestha]

Hi, 

thanks for the suggestions.  I updated the project with CRUD operations but haven't succeeded. Could you please check and correct my code, or do you have a real example for grid CRUD operations? 

Thank you.

Attachment: SyncfusionRazorPagesADOApp_cba1d8b6.zip

[Rajapandi Ravi]

Kishor,

Based on the information provided, it seems you are using a DataManager with UrlAdaptor and facing issues with CRUD operations in the Grid. Since we could not run your shared application on our end, we created a .NET 8 Core Razor page application as per your requirements. In this setup, we rendered the Grid with DataManager’s UrlAdaptor and successfully handled the CRUD actions, which functioned as expected.

As you are using a Razor page with UrlAdaptor, please follow the steps outlined in the KB article linked below.

KB: https://support.syncfusion.com/kb/article/10443/how-to-render-grid-in-asp-net-core-razor-page

All CRUD operations in the Grid are managed through the DataManager, which provides an option to handle all CRUD-related data on the server side. The UG documentation link below explains how to access CRUD action details on the server side using UrlAdaptor. Please refer the below documentation for more information.

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/persisting-data-in-server

For your convenience we have attached a sample below to demonstrate the setup we used. Please refer the below code example and sample for more information.

Index.cshtml

 

    <ejs-grid id="Grid" allowPaging="true" allowSorting="true"

              load="onLoad" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })">

        <e-data-manager adaptor="UrlAdaptor"

                        url="/Index?handler=DataSource"

                        updateUrl="/Index?handler=Update"

                        insertUrl="/Index?handler=Insert"

                        removeUrl="/Index?handler=Delete"

                        crossDomain="true">

        </e-data-manager>

        <e-grid-editSettings allowEditing="true" allowAdding="true" allowDeleting="true" mode="Normal"></e-grid-editSettings>

        <e-grid-columns>

            .  .  .   .  .  .  .  .  .  .

            .  .  .   .  .  .  .  .  .  .

            .  .  .   .  .  .  .  .  .  .

        </e-grid-columns>

    </ejs-grid>

</div>

<script>

    // Grid’s load event handler

    function onLoad() {

//add the verification token to the Grid data source’s header property in its load event

        this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];

    }

</script>

 

Index.cshtml.cs

 

// bind dataSource with server-side operations

public JsonResult OnPostDataSource([FromBody] DataManagerRequest dm)   

{

    if (order.Count == 0)

        BindDataSource();

    IEnumerable<Orders> data = order;

    DataOperations operation = new DataOperations();

    if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

    {

        data = operation.PerformSorting(data, dm.Sorted);

    }

    if (dm.Where != null && dm.Where.Count > 0) //Filtering

    {

        data = operation.PerformFiltering(data, dm.Where, dm.Where[0].Operator);

    }

    if (dm.Search != null && dm.Search.Count > 0) //Searching

    {

        data = operation.PerformSearching(data, dm.Search);

    }

    int count = data.Cast<Orders>().Count();

    if (dm.Skip != 0)

    {

        data = operation.PerformSkip(data, dm.Skip);

    }

    if (dm.Take != 0)

    {

        data = operation.PerformTake(data, dm.Take);

    }

    //return the result using the below format

    return dm.RequiresCounts ? new JsonResult(new { result = data, count = count }) : new JsonResult(data);

}

 

//here you can perform insert operation on the server-side.

public JsonResult OnPostInsert([FromBody] CRUDModel<Orders> value)   

{

    order.Insert(0, value.Value);

    return new JsonResult(value);

}

 

//here you can perform update operation on the server-side.

public JsonResult OnPostUpdate([FromBody] CRUDModel<Orders> myObject)

{

    var ord = myObject;

    Orders val = order.Where(or => or.OrderID == ord.Value.OrderID).FirstOrDefault();

    if (val != null)

    {

        val.OrderID = ord.Value.OrderID;

        val.EmployeeID = ord.Value.EmployeeID;

        val.CustomerID = ord.Value.CustomerID;

        val.Freight = ord.Value.Freight;

        val.OrderDate = ord.Value.OrderDate;

        val.ShipCity = ord.Value.ShipCity;

    }

    return new JsonResult(ord.Value);

 

}

 

//here you can perform delete operation on the server-side.

public JsonResult OnPostDelete([FromBody] CRUDModel<Orders> value)

{

    int key;

    if (int.TryParse(value.Key.ToString(), out key))

    {

        order.Remove(order.Where(or => or.OrderID == key).FirstOrDefault());

    }

    return new JsonResult(value);

}

 

Sample and Video Demo: Check the attachment.

Please get back to us if you need further assistance.

Attachment: 194925_f0320417.zip