Problems with Grid paging after filling it with DropDownList selection

[Adolfo Ibarra Landeo]

Hello team.

I am filling a Grid based on the selection I make of the DropDownList, this is achieved by sending the value of the DropDownList as a parameter of the Query of the Grid and calling its Refresh method. Up to that point, I have no problems, the problem arises when the data arrive from the method in which I obtain the data, since the records arrive but the Grid shows them in import the established page size. My code is the following:

Index.cshtml:

    @Html.EJS().DropDownList("EventsDropDown").Placeholder("Seleccione un evento").Select("EventsDropDownClick").PopupHeight("200px").DataSource(dataManger =>
            dataManger.Url(Url.Action("GetEvents", "Participants", new { Area = "Events" })).Adaptor("ODataV4Adaptor").CrossDomain(true)).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings
            {
                Text = "Name",
                Value = "Id"
            }).Render()

    @Html.EJS().Grid("ParticipantsGrid").ActionBegin("begin").AllowFiltering().AllowExcelExport(true).AllowPdfExport(true).ShowColumnChooser(true).ToolbarClick("toolbarClick").DataSource(dataManager => {
    dataManager.Url(Url.Action("GetParticipants", "Participants", new { Area = "Events" })).RemoveUrl("").UpdateUrl("").CrossDomain(true).Adaptor("WebApiAdaptor"); }).Columns(col =>
    {
        col.Field("Id").HeaderText("ID").IsPrimaryKey(true).Width("120").Add();
        col.Field("Identity").HeaderText("Número").Width("150").Add();
        col.Field("AttendeeName").HeaderText("Nombres").Width("150").Add();
        col.Field("AttendeeLastName").HeaderText("Apellidos").Width("150").Add();
        col.Field("TypeParticipant").AllowEditing(false).HeaderText("Tipo").Width("150").Add();
        col.Field("AttendeePosition").HeaderText("Cargo").Width("150").Add();
        col.Field("AttendeeFaculty").HeaderText("Facultad").Width("150").Add();
        col.Field("PaymentType").AllowEditing(false).HeaderText("Método de pago").Width("150").Add();
        col.Field("Amount").HeaderText("Monto").Format("C2").Width("150").Add();
    }).AllowPaging().AllowSorting().AllowGrouping().AllowReordering().AllowResizing().EditSettings(edit =>
    { edit.AllowDeleting(true).AllowEditing(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).ShowDeleteConfirmDialog(true);
    }).FilterSettings(filter => {
        filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel);
    }).Locale("es").PageSettings(page => page.PageSize(20).PageSizes(true)).Toolbar(new List() { "Edit", "Delete", "Cancel", "Search", "PdfExport", "ExcelExport", "ColumnChooser" }).Render()

Participants.js:

function EventsDropDownClick(args) {
    var grid = document.getElementById("ParticipantsGrid").ej2_instances[0];
    grid.refresh();
};

function toolbarClick(args) {
    var gridObj = document.getElementById("ParticipantsGrid").ej2_instances[0];
    if (args.item.id === 'ParticipantsGrid_pdfexport') {
        gridObj.pdfExport();
    }
    if (args.item.id === 'ParticipantsGrid_excelexport') {
        gridObj.excelExport();
    }
}

function begin(args) {
    var value = document.getElementById('EventsDropDown').ej2_instances[0].itemData.Id || 0;
    if (value != 0) {
        value = value.toString();
    }
    this.properties.query = new ej.data.Query().addParams('eventId', value)
}

Controller:

        [HttpGet]
        [AllowAnonymous]
        //[ValidateJsonAntiForgeryToken]
        public ActionResult GetParticipants()
        {
            if (string.IsNullOrEmpty(Request.QueryString["eventId"])) return Json(new { success = true, Items = new { }, Count = 0 }, JsonRequestBehavior.AllowGet);
            int eventId = Convert.ToInt32(Request.QueryString["eventId"]);
            using (var client = new HttpClient())
            {
                client.BaseAddress = new Uri(_baseUrl);
                client.DefaultRequestHeaders.Clear();
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
                var res = client.GetAsync($"Management/Participants/GetParticipants/{eventId}").Result;
                if (!res.IsSuccessStatusCode) return Json(new { success = false }, JsonRequestBehavior.AllowGet);
                var empResponse = res.Content.ReadAsStringAsync().Result;
                var participants = JsonConvert.DeserializeObject>(empResponse);
                return Json(new { success = true, Items = participants, Count = participants.Count() }, JsonRequestBehavior.AllowGet);
            }
        }

The result is the following (it is fictitious data to test paging). Note that an element of the DropDownList is selected and the table is filled, but the records are all shown in block.:

https://1drv.ms/f/s!AnNazBbyGtROjdhVhdjy5lfUIJ7Rrg

This problem does not arise when I perform the registration of the records from an AJAX, as in this case:

function EventsDropDownClick(args) {
    $.ajax({
        url: window.getPart,
        data: { eventId: args.itemData.Id },
        type: "GET",
        async: true,
        success: function (result) {
            var grid = document.getElementById("ParticipantsGrid").ej2_instances[0];
            grid.dataSource = result.data;
        },
        error: function (result) { alert(result); }
    });
};

What I want to achieve is that I select a value in the DropDownList, its value is sent as a search parameter and the necessary records are returned, which allows me to do the paging and apply all the corresponding filters.

I have also tried to perform the filtering and the other characteristics of the grid on the client side, setting the Offline method of the DataSource to TRUE, but when I made that change and used the UrlAdapter adapter, the request did not reach my controller.

How could I handle this scenario?

By the way, someone put a semicolon at the end of this web of Syncfusion queries, in the footer

[Venkatesh Ayothi Raman]

Hi Adolfo, 

 

 

Thanks for using Syncfusion products. 

 

 

We went through your code example which you have shared for us and found that you are updating the data source after selecting the value from Dropdown list. Her, you are initially bound the remote data source with WebAPiAdaptor. But you dynamically change the array of the filtered data source using Dropdown select event. 

 

In this scenario, Grid will act as local data source since we bound the array of Data in AJAX success function. If we bound the local data source as dynamically then Grid actions such as paging, filtering and Sorting will happen client side only. This is the default behavior of the Grid. 

 

As from your query, we suspect that would you like to filter the Grid data based on Dropdown value. If so, we suggest you to use filterByColumn API instead AJAX Post request to server side. In this filterByColumn method, we can pass the corresponding filter operator, field, and value. In this scenario, the Grid will act as remote data source binding. Please refer to the following code example and Help documentation, 

function EventsDropDownClick(args) {
    var grid = document.getElementById("ParticipantsGrid").ej2_instances[0]; 

    grid.filterByColumn("CustomerID", "equal", dropdownselectedVlaue);
}; 

 

 

HelpDocumentation: https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=es5#filterbycolumn 

 

If we misunderstood your requirement then could you please provide following details? 

1)      Share the Exact scenario. 

2)      Are you filtering the Grid with different data source? 

3)      Details of using AJAX request in your project. 

 

 

Regards, 

Venkatesh Ayothiraman.