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

Sort/Filter not working for Blazor App ejsgrid using ejsdatamanager and Entity Framework to bind data with WebApiAdaptor

Hi SyncFusion,

I am trying to enable sorting/filtering on a grid of data. My grid code looks like this:

@using App.Models
@using Syncfusion.EJ2.Blazor.Data
@using Syncfusion.EJ2.Blazor.Grids

<EjsGrid TValue="@Files" AllowSorting="true" AllowMultiSorting="true" AllowFiltering="true" AllowGrouping="true" Height="650" Width="auto">
     <EjsDataManager Url="api/Files" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager>
     <GridColumns>
          <GridColumn Field="FileId" HeaderText="FileId" TextAlign="TextAlign.Right" AllowSorting="true"></GridColumn>
          <GridColumn Field="FileName" HeaderText="FileName" TextAlign="TextAlign.Right" AllowSorting="true"></GridColumn>
          <GridColumn Field="DateImported" HeaderText="DateImported" Format="yMd" Type="ColumnType.Date" AllowSorting="true"></GridColumn>     
     </GridColumns>
</EjsGrid>

Which calls the following controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using App.Models;
using App.Shared.DataAccess;
using Microsoft.Extensions.Primitives;

namespace App.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class FilesController : ControllerBase
    {
        //Copied from https://ej2.syncfusion.com/blazor/documentation/grid/data-binding/ tutorial
        FileAccessLayer db = new FileAccessLayer();
        [HttpGet]
        public object Get()
        {

            IQueryable<Files> data = db.DbGet().AsQueryable();
            var count = data.Count();
            var queryString = Request.Query;
            if (queryString.Keys.Contains("$inlinecount"))
            {
                StringValues Skip;
                StringValues Take;
                int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0;
                int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count();
                return new { Items = data.Skip(skip).Take(top), Count = count };
            }
            else
            {
                return data;
            }
        }
    }
}

Which in turn asks for the following methods from FileAccessLayer:

public class FileAccessLayer
{
    DataTableContext db = new DataTableContext();
    public DbSet<Files> DbGet()
    {
        try
        {
            return db.Files;
        }
        catch
        {
            throw;
        }
    }
}

Which in turn calls a standard entity framework scaffolded context and model, called DataTableContext and Files.

The issue I am having is that the data will display fine in the table, but will not sort or filter with the sort and filter toggles. Can you please show me how to enable these features, I have had a good trawl through the forums but none of the solutions existing already seem to be directly useful. 

Thank you very much
Tom

6 Replies

AS ashimaz December 5, 2019 01:34 PM UTC

Please check below link.
https://www.syncfusion.com/forums/145612/dataoperations


TO Tom December 5, 2019 03:52 PM UTC

Just to be totally clear on what I was supposed to understand from the link you posted: What I want to do is actually already identified as a bug/future feature/improvement for the grid component, as is currently not possible without a fairly verbose workaround?


RS Renjith Singh Rajendran Syncfusion Team December 6, 2019 09:39 AM UTC

Hi Tom/ashimaz, 

Thanks for contacting Syncfusion support. 

Query : But the sorting and searching does not work. 
When using the WebAPI services, you need to handle these actions(search/filter/sort/paging actions) at server side by using the “Request.Query” you get from the request, just like the paging which you have handled in your shared code example. Please handle the filter/sorting  at server side, based on the “Request.Query” you get from the request. 

 
        [HttpGet] 
        public object Get() 
        { 
            IQueryable<Projekte> data = db.GetAllProjektes().AsQueryable(); 
            var count = data.Count(); 
            var queryString = Request.Query;                  //Based on this request query, handle the search/sort action. 
            string sort = queryString["$orderby"];   //get the sorting query here      
            string filter = queryString["$filter"];   //get the filter query here      
            ... 
       } 
 

And also, we already had plan to implement handling data operations in our Syncfusion EjsDataManager’s WebApiAdaptor. We have considered this as a feature “Add improvements to WebApiAdaptor”. We have logged a feature task for the same and added to our feature request list. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts. 
  
At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision and technological feasibility. We have planned to implement this feature in our upcoming Volume 4, 2019 release 
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 



MW Michael Washington May 24, 2020 08:51 PM UTC

This works for sorting..

@page "/"
@using SyncFusionClientPaging.Shared

    <SfGrid @ref="DefaultGrid" TValue="WeatherForecastItem" 
            AllowPaging="true" AllowSorting="true" Height="200">
        <SfDataManager Url="WeatherForecast" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
        <GridPageSettings PageSize="5"></GridPageSettings>
        <GridColumns>
            <GridColumn Field=@nameof(WeatherForecastItem.TemperatureC) 
                        HeaderText="TemperatureC" Width="75"></GridColumn>
            <GridColumn Field=@nameof(WeatherForecastItem.TemperatureF) 
                        HeaderText="TemperatureF" Width="75"></GridColumn>
            <GridColumn Field=@nameof(WeatherForecastItem.Date) 
                        HeaderText="Date" Format="d" Type="ColumnType.Date" Width="130"></GridColumn>
            <GridColumn Field=@nameof(WeatherForecastItem.Summary) 
                        HeaderText="Summary" Width="120"></GridColumn>
        </GridColumns>
    </SfGrid>

@code{
    private SfGrid<WeatherForecastItem> DefaultGrid;
}

using SyncFusionClientPaging.Shared;
using System;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Primitives;

namespace SyncFusionClientPaging.Server.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class WeatherForecastController : ControllerBase
    {
        private static readonly string[] Summaries = new[]
        {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };

        [HttpGet]
        public object Get()
        {
            // Create the random data
            var rng = new Random();
            var items = Enumerable.Range(1, 2000).Select(index => new WeatherForecastItem
            {
                Date = DateTime.Now.AddDays(index),
                TemperatureC = rng.Next(-20, 55),
                Summary = Summaries[rng.Next(Summaries.Length)]
            })
            .ToList();

            // Filter the data
            var count = items.Count();
            var queryString = Request.Query;
            if (queryString.Keys.Contains("$inlinecount"))
            {
                StringValues Skip;
                StringValues Take;
                StringValues OrderBy;

                int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0;
                int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : items.Count();
                string orderby = (queryString.TryGetValue("$orderby", out OrderBy)) ? OrderBy.ToString() : "Date";

                // Handle OrderBy direction
                if (orderby.EndsWith(" desc"))
                {
                    items = items.OrderByDescending(s => s.GetType().GetProperty(orderby.Replace(" desc", ""))
                    .GetValue(s)).ToList();
                }
                else
                {
                    items = items.OrderBy(s => s.GetType().GetProperty(orderby)
                    .GetValue(s)).ToList();
                }

                // Return result
                return new { Items = items.Skip(skip).Take(top), Count = count };
            }
            else
            {
                // No filter was passed
                // return first 10 items
                return items.Take(10);
            }
        }


MW Michael Washington May 24, 2020 09:14 PM UTC


I attached the sample project

Attachment: SyncFusionClientPaging_a8b2dc69.zip


VN Vignesh Natarajan Syncfusion Team May 25, 2020 08:35 AM UTC

Hi Michael,  

Thanks for the update and sample.  

Similar way you can handle the filtering action in API controller using the $filter query from querystring.  

Kindly get back to us if you need any further assistance from us. 

Regards, 
Vignesh Natarajan 


Loader.
Live Chat Icon For mobile
Up arrow icon