Problem filtering from code

[Alex]

Hi,

I wrote an asp.net mvc application with a grid and at the bottom five buttons that gives the user the possibility to filter the data.

The problem is when I press one of the filtering buttons, the grid create a page for each of the element that are returned from the api.

For example if the get function of the api return 4 records, the grid create 4 pages with one record for page.

This is my grid:

$(function () {

        var dataManager = ej.DataManager({

            url: "/api/data",

            adaptor: new ej.WebApiAdaptor()

        });

        $("#Grid").ejGrid({

            allowSearch: true,

            dataSource: dataManager,

            isResponsive: true,

            enableResponsiveRow: true,

            query:query,

            allowScrolling: true,

            allowResizeToFit: true,

            allowPaging: true,

            scrollSettings: { allowVirtualScrolling: true, virtualScrollMode: "continuous", enableTouchScroll: true },

            columns: [

                            {

                                headerText : "Show",

                                commands : [

                                    { type: "details", buttonOptions: { contentType: "imageonly", width: "30", height: "30", prefixIcon: "e-uiLight e-handup", click: "onClick" } }

                                ],

                                textAlign: ej.TextAlign.Center,

                                headerTextAlign : "center",

                                width:45

                            },

               { field: "FieldKey", isPrimaryKey: true, headerText: "FieldKey", visible: false },

                            { field: "Field1", headerText: "Field1" },

               { field: "Field2", headerText: "Field2" },

               { field: "Field3", headerText: "Field3" },

               { field: "Field4", headerText: "Field4" },

               { field: "Field5", headerText: "Field5" }

            ],    

            recordClick: "rowSelected",

        });

And this is the code of one of the buttons:

$("#filAll").click(function () {

        var obj = $("#Grid").data("ejGrid");

        var dataManager = ej.DataManager({

            url: "/api/data",

            adaptor: new ej.WebApiAdaptor()

        });

        var query = ej.Query();

        var execute = dataManager.executeQuery(query)

          .done(function (e) {

              obj.dataSource(e.result)

          });        

    });

Thanks,

Alex

[Prasanna Kumar Viswanathan]

Hi Alex, 

Thanks for contacting Syncfusion support. 

In your code example we found that you have enable virtual scrolling feature in your sample. While enable the virtual scrolling feature, we do not enable the allowPaging API in the sample. In your code example you have enable the allowPaging API which is the root cause of the issue of displaying one record per page.  

The virtual scrolling support allows you to load data that you require (load data based on page size).   

 

We also found that you have not mention the width and height in the scrollSettings API of ejGrid. In virtual scrolling the next page data will load while scrolling. So, we have to mention the width and height in the scrollSettings API to generate the scrollbar in the grid.  

 

Find the code example : 

 

 

$("#Grid").ejGrid({ 

            dataSource: dataManager, 

            allowSearching: true, 

            isResponsive: true, 

            enableResponsiveRow: true, 

            query: query, 

            allowScrolling: true, 

            allowResizeToFit: true, 

            //allowPaging: true, 

            scrollSettings: { allowVirtualScrolling: true, virtualScrollMode: "continuous", enableTouchScroll: true, width : 500, height : 300 }, 

            columns: [ 

                 { 

                     headerText: "Show", 

                     commands: [ 

                         { type: "details", buttonOptions: { contentType: "imageonly", width: "30", height: "30", prefixIcon: "e-uiLight e-handup", click: "onClick" } } 

                     ], 

                     textAlign: ej.TextAlign.Center, 

                     headerTextAlign: "center", 

                     width: 100 

                 }, 

                        -------------------------- 

           ] 

 

Refer to the Help document for the virtual scrolling. 

 

https://help.syncfusion.com/js/grid/scrolling#virtual-scrolling 

 

Regards, 

Prasanna Kumar N.S.V 

 

[Alex]

Thanks Prasanna,

there's a way to set the height to auto or 100% like for the width option?

Because if I set heigh: "100%" or to "auto" the grid cannot get the data.

Regards,

Alex

[Alex]

Hi,

for the height i solved the proble using this:

https://www.syncfusion.com/kb/3508/how-to-render-the-grid-within-the-specified-container-height-and-width

Thanks,

Alex

[Prasanna Kumar Viswanathan]

Hi Alex, 

We are happy to hear that your issue has been resolved. 

Please let us know if you need any further assistance. 

Regards, 

Prasanna Kumar N.S.V