We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. Problem filtering from code

Problem filtering from code

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

4 Replies
PK Prasanna Kumar Viswanathan Syncfusion Team October 26, 2016 06:37 AM UTC

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. 
 
 
Regards, 
Prasanna Kumar N.S.V 
 


AL Alex October 26, 2016 02:26 PM UTC

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

AL Alex October 27, 2016 06:56 AM UTC

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

PK Prasanna Kumar Viswanathan Syncfusion Team October 27, 2016 07:14 AM UTC

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 


Loader.
Up arrow icon