Ajax Server Side Grid rendering and passing in parameter queries

[DD]

Hi,

I'm coming from Telerik UI and want to set up the Syncfusion Grid using either MVC or Core but am getting issues in getting it to work.

One of the main issues I have is setting the query parameter dynamically with a value from JS for all operations.

I have a webapi url and want to set the query param (or body) to be a specific value from a JS value.

I currently have the following grid in net core:

<ejs-grid id="gridName"

  allowPaging="true"

  allowSorting="true"

  allowFiltering="true"

  actionBegin="onActionBegin">

<e-grid-pagesettings pageSize="15"></e-grid-pagesettings>

<e-grid-filtersettings type="Menu"></e-grid-filtersettings>

<e-data-manager url="/Api/Grid"

adaptor="UrlAdaptor"></e-data-manager>

<e-grid-columns>

<e-grid-column field="eNumber"

   headerText="Electronic Id"

   width="150"></e-grid-column>

</e-grid-columns>

</ejs-grid>

and the actionBegin function is as follows:

function onActionBegin(args) {

    args.model.query.addParams("ID", 10248);

}

When the grid first loads, the onActionBegin doesn't get hit, and only when I try to do any operations (such as go to the next page) the onActionBegin gets hit - when I expect it to be hit all and every time.

And when it does get hit, I get an error saying model.query does not exist.

The args object is as follows:

1. cancel: false
2. currentPage: 2
3. name: "actionBegin"
4. pageSize: 15
5. previousPage: 1
6. requestType: "paging"
7. type: "actionBegin"

I am copying it directly from this help guide:

https://support.syncfusion.com/kb/article/7178/how-to-pass-additional-parameter-when-using-datamanager-in-aspnet-core-grid

The webApi looks like this:

[HttpPost]

[Route("Grid")]

public async Task<IActionResult> GetRecords(

[FromBody] DataManagerRequest request)

{

I've also tried the following MVC to no avail - this doesn't even allow me to set any changes to the datasource as I can't find any documentation around setting it up:

@(Html.EJS().Grid("gridName")

.DataSource(dataManager =>

dataManager.Url("/Api/Grid")

.Adaptor("UrlAdaptor"))

.AllowPaging()

.PageSettings(page => page.PageSize(15))

.AllowSorting()

.AllowFiltering()

.FilterSettings(filter => filter.Type(FilterType.Menu))

.Columns(col =>

{

col.Field("eNumber")

.HeaderText("Electronic Id")

.Width("150")

.Add();

})

.Render()

)

On Telerik, I was able to do the following:

@(Html.Kendo().Grid<ViewModel>()

    .Name("gridName")

    .Columns(columns =>

    {

columns.Select().Width(60);

columns.Bound(o => o.Date)

.Title("Date")

.Width(120)

.ClientGroupHeaderTemplate("#= date.toString(value, 'dddd dd MMMM yyyy') #")

.ClientTemplate(

@Html.ActionLink("#= date.toString(Date, 'yyyy/MM/dd hh:mm tt') #", "View", "Date",

new { start = "#= date.toString(Date, 'yyyy/MM/dd') #" },

new { @title = "Date" })

.ToHtmlString());

    })

    .ColumnMenu()

    .DataSource(dataSource => dataSource

        .WebApi()

        .PageSize(100)

        .Batch(true)

        .ServerOperation(true)

        .Read(read => read.Url("api/grid")

            .Data("getGridData")) // this gets parameters from JS and want to do something similar in SyncFusion

        .Model(model =>

        {

            model.Id(p => p.Id);

            model.Field(p => p.Date).Editable(false);

        })

        .Sort(sort => sort.Add("Date").Descending())

    )

    .Events(e => e.Change("onGridChange"))

    .Filterable(ftb => ftb.Mode(GridFilterMode.Row)

        .Operators(operators => operators

            .ForString(str => str.Clear()

            .Contains("Contains")

            .DoesNotContain("Does Not Contain")

        )))

    .Groupable()

    .HtmlAttributes(new { style = "height: 100%; min-height: 800px; border: 0;" })

    .Pageable(pageable => pageable

        .Refresh(true)

        .PageSizes(new[] { 100, 150, 200 })

        .ButtonCount(5))

    .PersistSelection()

    .Reorderable(reorder => reorder.Columns(true))

    .Resizable(resize => resize.Columns(true))

    .Scrollable(scrollable => scrollable.Height("auto"))

    .Sortable()

)

Can I get guidance on how I can do the above using SyncFusion Grid or get as close as possible with this?

I'm using v 27.1.48

[Aishwarya Rameshbabu]

Hi,

Greetings from Syncfusion support.

Query 1: One of the main issues I have is setting the query parameter dynamically with a value from JS for all operations. I have a webapi url and want to set the query param (or body) to be a specific value from a JS value.

Based on the provided information and code example, it has been observed that you are utilizing a WebApi service with UrlAdaptor. In the Syncfusion DataManager, WebAPI services are typically managed using the WebApiAdaptor. Therefore, we highly recommend employing the WebApiAdaptor for data operations conducted via a RESTful Web API service. This adaptor offers built-in support for standard CRUD operations (Create, Read, Update, Delete), facilitating easier integration and data management with a Web API service.

Additionally, the helper guide you referenced is the Syncfusion EJ1 Grid code. To meet your requirement of sending query parameters in the Syncfusion EJ2 Grid, we have developed a sample that employs the query property of the grid in combination with the addParams method of the Query class. This method allows for the seamless inclusion of custom parameters in data requests for every grid action, including the initial rendering of the grid. In this sample, we have dynamically changed the query parameter in the actionBegin event of the Grid based on the requestType of the current action. Please refer to the code example, sample, and screenshot provided below for more details.

Index.cshtml

<div>

    <ejs-grid id="grid01" allowPaging="true" allowSorting="true" allowFiltering="true" query="query" actionBegin="onActionBegin">

        <e-grid-pagesettings pageSize="15"></e-grid-pagesettings>

        <e-data-manager url="api/Orders" adaptor="WebApiAdaptor"></e-data-manager>

        <e-grid-columns>

            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>

            <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>

            <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2"width="120"></e-grid-column>

            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>

            <e-grid-column field="EmployeeID" headerText="Employee Id" textAlign="Right" width="100"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

 

</div>

<script>

    // Initial query parameter

    var query = new ej.data.Query().addParams("ID", 10248);

    function onActionBegin(args) {

        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];

        if (args.requestType === 'paging') {

            // Changing the query parameter upon paging

            grid.query = new ej.data.Query().addParams("ejs-grid", true);

        }

    }

</script>

 

Sample: Please find in the attachment.

Screenshots:

On Initial load:

Upon Paging action:

Query 2: When the grid first loads, the onActionBegin doesn't get hit, and only when I try to do any operations (such as go to the next page) the onActionBegin gets hit - when I expect it to be hit all and every time.

The actionBegin event of the Grid is activated exclusively during the execution of Grid actions such as paging, sorting, filtering etc.,. It is not triggered during the initial rendering of the Grid.

The provided code example and sample are developed for the ASP.NET Core platform. A similar implementation can be accomplished in ASP.NET MVC as well. For further information on how to get started with MVC Grid, please refer to the documentation below.

Documentation Link: Getting-started-mvc           

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

Attachment: CoreGridApp_8c14a237.zip

[DD]

Hi Aishwarya,

Thanks for sending through the examples.

How can I tell if a certain example is for EJ1 or EJ2?

I search for guides on how to use SyncFusion and the article I linked earlier came out (https://support.syncfusion.com/kb/article/7178/how-to-pass-additional-parameter-when-using-datamanager-in-aspnet-core-grid) and there's no mention of whether this is EJ1 or EJ2, and the guide is missing the "query=query" tag helper as you've displayed on your example.

A question regarding this example, I have been able to get the data source to work somewhat by doing the following (although on a UrlAdapter):

<ejs-grid id="dataGrid"

  allowPaging="true"

  allowSorting="true"

  allowFiltering="true"

  load="queryParameters"

  dataBound="onGridDataBound">

The "load" tag helper seems to be setting all the parameters for me on every operation and the dataBound used for setting the system to do a "contains" search.

Can you let me know if the above way is a valid way of doing the filtering or if this is a hack and I should move to the example you've provided? (i'm leaning towards using the UrlAdapter after seeing the example you've posted - more on this below)

Also, I've been reading the dataSource guides and differences between UrlAdapter and WebApiAdapter and and it looks like the UrlAdapter seems like it's a better fit than using the WebApiAdapter as the former allows you to perform model binding as opposed to the WebApiAdapter which forces you to create your own binding like so:

            var queryString = Request.Query;

            var data = OrdersDetails.GetAllRecords().ToList();

            int skip = Convert.ToInt32(queryString["$skip"]);

            int take = Convert.ToInt32(queryString["$top"]);

Are there any downsides of using the UrlAdapter when using WebApis apart from the GET and POST method required by them?

What is the point of setting  the "ejs-grid" in the example grid.query = new ej.data.Query().addParams("ejs-grid", true);

I can't see anywhere where the ejs-grid is being set.

Finally, what's causing the operations to be called twice in the example that you've attached here?

If you try to navigate to a page, the Get method gets called twice and I can't see what would be calling the get method twice.

I've been able to get the grid to work as expected (apart from the filtering - searching returns with Request Failed, even though I'm retrieving the correct data) with less work than the above (although it is a POST instead of a GET) so would like to know if I should be moving to your example if my current way is a hack.

Thanks 

[Aishwarya Rameshbabu]

Hi DD,

Query 1: How can I tell if a certain example is for EJ1 or EJ2?

To differentiate between the EJ1 and EJ2 Grids, you can utilize the respective Grid tag helpers. For the EJ1 Grid, the tag helper is '<ej-grid></ej-grid>', whereas for the EJ2 Grid, it is '<ejs-grid></ejs-grid>'. Syncfusion offers comprehensive migration guides and documentation to assist in distinguishing between EJ1 and EJ2. For more detailed information, please refer to the following documentation link

Documentation Link: EJ1-API-Migration

Query 2: The "load" tag helper seems to be setting all the parameters for me on every operation and the dataBound used for setting the system to do a "contains" search. Can you let me know if the above way is a valid way of doing the filtering or if this is a hack and I should move to the example you've provided? (i'm leaning towards using the UrlAdapter after seeing the example you've posted - more on this below).

Based on the above information, we have noted that in your application the parameter settings are being managed via the Grid's load event and the search operations are being executed using the contains operator within the Grid's dataBound event. These methods are not the most appropriate for parameter passing and data filtering within the Grid. For a more efficient approach, consider performing server-side filtering with the specified operators using the Grid's filterSettings property. For further details, please refer to the following documentation on data filtering in Syncfusion Grid.

Documentation Link: Filtering

Query 3: Are there any downsides of using the UrlAdapter when using WebApis apart from the GET and POST method required by them?

UrlAdaptor primarily relies on POST requests for all operations, which doesn't fully aligned with RESTful principles. In contrast, Web APIs typically expect POST for creation, PUT for updates, and DELETE for deletions, in line with RESTful standards. This mismatch can result in less efficient and less interactions with APIs. WebApiAdaptor is generally more suitable for RESTful services, as it aligns with REST principles and better manages standard Web API responses and security features.

Query 4: What is the point of setting the "ejs-grid" in the example grid.query = new ej.data.Query().addParams("ejs-grid", true); I can't see anywhere where the ejs-grid is being set.

To illustrate the transmission of additional parameters within the actionBegin event, we have utilized the aforementioned code snippet. The actionBegin event is triggered whenever grid actions such as sorting and paging are executed. Please refer to the screenshot below, which shows the parameter ejs-grid: true being sent to the server during a paging action.

Query 5: Finally, what's causing the operations to be called twice in the example that you've attached here? If you try to navigate to a page, the Get method gets called twice and I can't see what would be calling the get method twice.

We have modified the Grid query within the actionBegin event of the Grid, resulting in a refresh of the Grid. This modification will trigger an additional server request. This sample has been provided for demonstration purposes. However, if you could share your specific requirements in detail, it would greatly assist us in offering a more tailored solution to meet your needs.

Regards

Aishwarya R