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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

149686 Dec 5,2019 12:20 PM UTC May 25,2020 08:35 AM UTC Blazor 6
loading
Tags: Grid
Tom
Asked On December 5, 2019 12:20 PM UTC

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

ashimaz
Replied On December 5, 2019 01:34 PM UTC

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

Tom
Replied On 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?

Renjith Singh Rajendran [Syncfusion]
Replied On 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. 


Michael Washington
Replied On 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);
            }
        }

Michael Washington
Replied On May 24, 2020 09:14 PM UTC


I attached the sample project

Attachment: SyncFusionClientPaging_a8b2dc69.zip

Vignesh Natarajan [Syncfusion]
Replied On 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 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon