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.
Unfortunately, activation email could not send to your email. Please try again.

Problem filtering from code

Thread ID:

Created:

Updated:

Platform:

Replies:

127080 Oct 25,2016 02:42 AM Oct 27,2016 03:14 AM JavaScript 4
loading
Tags: ejGrid
Alex
Asked On October 25, 2016 02:42 AM

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 [Syncfusion]
Replied On October 26, 2016 02:37 AM

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 
 


Alex
Replied On October 26, 2016 10:26 AM

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
Replied On October 27, 2016 02:56 AM

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 [Syncfusion]
Replied On October 27, 2016 03:14 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;