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

Excel like filter using UrlAdaptor

Hello,

I'm using Next.js as a framework and I want to use the Excel like filter using the UrlAdaptor.

But when I try to filter, nothing happens, and I don't know how to fix it.

I will add the grid component + the request of the data.


Have a nice day!


Attachment: Grid_1faf909.7z

3 Replies

RR Rajapandi Ravi Syncfusion Team March 30, 2023 02:10 PM UTC

Hi Harald,


Greetings from Syncfusion support


From your query we could see that you are not handled the filter query at server-side and it was the cause of the problem. When we perform any Grid actions like Searching, Paging, Sorting, Filtering, Exporting, Grouping, Searching, etc., in URL adaptor we send correspond actions details to the server (url method used in the DataManager). You can get these by using DataManagerRequest class in your server method. Here, you can perform your SQL operation with your data based on the Grid actions queries and return correspond data in object format with result and count value to the Grid. Find the below code example and documentation for your reference.


[HomeController.cs]

 

    public ActionResult UrlDatasource([FromBody]DataManagerRequest dm)

    {

        IQueryable<Orders> DataSource = db.Orders; // bind the SQL Data from your data-base

        QueryableOperation operation = new QueryableOperation();

        if (dm.Where != null)

        {

            DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Condition); // perform Filtering

        }

        if (dm.Search != null)

        {

            DataSource = operation.PerformSearching(DataSource, dm.Search); // perform Searching

        }

        int count = DataSource.Cast<object>().Count();

        if (dm.Sorted != null)

        {

            DataSource = operation.PerformSorting(DataSource, dm.Sorted); // perform Sorting

        }

        if (dm.Skip != 0)

        {

            DataSource = operation.PerformSkip(DataSource, dm.Skip); // perform Paging

        }

        if (dm.Take != 0)

        {

            DataSource = operation.PerformTake(DataSource, dm.Take); // perform Paging

        }

      IQueryable groupedData = null;

      if (dm.Group != null)

      {

        groupedData = operation.PerformGrouping<Orders>(DataSource, dm); // perform Grouping

      }

      return dm.RequiresCounts ? Json(new { result = (groupedData == null) ? DataSource : groupedData , groupDs = groupedData, count = count }) : Json(DataSource); // return the result and count object based on RequiresCounts property

    }

 


Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/remote-data#handling-on-demand-grid-actions


Regards,

Rajapandi R



HS Harald Stapfer April 3, 2023 08:01 AM UTC

Hello  Rajapandi,

I would need the answer as JavaScript (React) code as the website is based on NextJs.

Here is the response I get from Supabase:

{

  result: [

    {

      id: 8,

      forename: 'test',

      surname: 'test',

      mobilephone: 'test',

      email: 'test',

      shortname: 'test',

      department: 'test',

      location: 'test',

      guid: '',

      role: 1,

      userRoles: [Object]

    },

    {

      id: 2,

      forename: 'Niklas',

      surname: 'Baumgartner',

      mobilephone: '+43 676 844833239',

      email: 'niklas.baumgartner@caeexpert.group',

      shortname: 'nba',

      department: 'Softwareentwicklung',

      location: 'Scheibbs',

      guid: 'a0574b31-7433-4e28-b1e3-716549bc4426',

      role: 1,

      userRoles: [Object]

    },

    {

      id: 1,

      forename: 'Conrad',

      surname: 'Langmann',

      mobilephone: '+43 676 844833246',

      email: 'conrad.langmann@caeexpert.group',

      shortname: 'cla',

      department: 'Softwareentwicklung',

      location: 'Scheibbs',

      guid: 'aa2ffc90-666b-4cef-9c52-bcbcc026700b',

      role: 1,

      userRoles: [Object]

    }

  ],

  count: 3

}

Have a nice day!



RR Rajapandi Ravi Syncfusion Team April 11, 2023 01:36 PM UTC

Harald,


In your query you have mentioned that “I would need the answer as JavaScript (React)”, so if you like to create a application in pure React way, please refer the below documentation for more information.


React: https://ej2.syncfusion.com/react/documentation/grid/getting-started


If you like to use the JavaScript way, please refer the below documentation for more information.


JavaScript: https://ej2.syncfusion.com/javascript/documentation/grid/getting-started/


Loader.
Live Chat Icon For mobile
Up arrow icon