SfGantt - Query sorting in SfDataManager

[Volker]

Hi there,

let's asume I have this in my code:

var GanttQueryData = new Syncfusion.Blazor.Data.Query().Sort("Column1", null);

How can we sort for two or more columns (column1 ASC, column2 DESC, column3 ASC) using Sort()?

The goal is to sort it this way, so that NULLS get sorted to the end of the list, thats possible within SQL:

 

Cheers,
Volker

[Punniyamoorthi Elangovan]

Hi Volker, 

Thank you for contacting Syncfusion support 

We have analyzed your requirement and we can achieve your requirement by passing collection of sorting columns to the data manager PerformSorting method. You can find the below code snippet  

<SfGantt @ref="myGantt" ID="GanttExport"  TValue="Table" HighlightWeekends="true" RowHeight="75" DurationUnit="DurationUnit.Day" 

         Toolbar="@(new List<string>(){ "Add", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll"})"> 

 

    <SfDataManager Adaptor="Adaptors.CustomAdaptor"> 

        <CustomComponent QueryData="@GanttQueryData" SortQuery="@GanttSortQuery"></CustomComponent> 

    </SfDataManager> 

</SfGantt> 

 

@code { 

 

    public List<SortedColumn> GanttSortQuery = new List<SortedColumn>(); 

 

   protected override void OnInitialized() 

    { 

 

        GanttSortQuery.Add(new SortedColumn() { Field = "Name", Direction = SortOrder.Ascending }); 

        GanttSortQuery.Add(new SortedColumn() { Field = "Id", Direction = SortOrder.Ascending }); 

 

    } 

} 

 

@code { 

     

    [Parameter] 

    public List<SortedColumn> SortQuery { get; set; } 

    ganttcheckContext db = new ganttcheckContext(); 

    // Performs data Read operation  

    public override object Read(DataManagerRequest dm, string key = null) 

 

    { 

 

        IEnumerable<Table> DataSource = db.Table; 

 

        if (SortQuery != null && SortQuery.Count > 0) 

        { 

            DataSource = DataOperations.PerformSorting(DataSource, SortQuery); 

        } 

 

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

        return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)Service.Table; 

    } 

We have prepared the sample for your reference, you can find the sample from below link 

Link: https://www.syncfusion.com/downloads/support/forum/158665/ze/Blazor-Gantt-Chart-with-Entity-framework-master-557868659 

Regards, 

Punniyamoorthi 

 

[Volker]

Hi Punniyamoorthi,

elegant and excellent, tested and implemented, it works!

The only thing, that still does not work, is a complex T-SQL sorting term, so that we can inject something like:

"... ORDER BY column1 == null ? 1 : 0, column1 ASC;"

Cheers,
Volker

[Monisha Sivanthilingam]

Hi Volker, 

 

By using Custom adaptor, we can customize the Data Operation based on our requirement. We need to handle the data operation based on the scenario which we need and return the result to display in component. So based on this case, we have fetched the null valued rows in the table, and stored in a variable. And sorted only the not null valued rows from the DataSource using PerformSorting method.  

 

Then, we have combined the sorted Data without null values and unsorted data with null values and displayed to the component. We have also prepared a sample for your reference. Please download the sample form the link below,  

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor-Gantt-Chart-with-Entity-framework-master1448275545  

  

  

public override object Read(DataManagerRequest dm, string key = null)  

{  

    ...  

    if (SortQuery != null && SortQuery.Count > 0)  

    {  

        IEnumerable<Table> nullvalues = DataSource.Where(e => e.Name == null);  

        DataSource = DataOperations.PerformSorting(DataSource.Where(e=> e.Name !=null), SortQuery);  

        DataSource = DataSource.Concat(nullvalues);  

    }  

  

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

    return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)Service.Table;  

}  

  

  

Please contact us if you require any further assistance. 

 

Regards,  

Monisha. 

[Volker]

Ho Monisha,

impressive, really impressive!

Thank you, will use that

Cheers from Graz/Austria,
Volker

[Gopinath Muniraj]

Hi Volker,   

Most welcome.  

Please get back to us if you require any further assistance.  

Regards,  

Gopinath M 

  

[Volker]

Hi Gopinath,

after installing the latest NuGet packages I observe a strange behaviour.

Keep in mind that I use your blazor-component solution to inject query and sort data, as discussed:


Remember this is the GanttManager component, mind the breakpoint on Read


Lets say there is the default index page called "Home", out of the box.
Lets say there is another page "tasks" holding the Syncfusion GANTT component.

Let's say there is a link in NavMenu.razor to this tasks page, so we can simply call it using nav menu.

1. When I call page "tasks" using the nav menu the breakpoint of GanttManager is reached, the Gantt is rendered correctly, everything is fine.
   
2. When I reload page "tasks" by hitting F5 (or type in the url directly into the browser and press enter), the brackpoint of GanttManager component is not reached any longer, the Gantt gets no data, no tasks are rendered.

Any idea how to resolve this?

Cheers,
Volker

[Pooja Priya Krishna Moorthy]

Hi Volker, 

Currently we are validating this. We will update you further details in one business day(March 12, 2021). 

Until then we appreciate your patience. 

Regards, 

Pooja K. 

[Monisha Sivanthilingam]

Hi Volker, 

  

We were able to replicate the issue you reported. We will look further into to identify the cause of the issue and provide you with further details on Monday(15-03-2021). 

  

We appreciate your patience until then. 

  

Regards, 

Monisha. 

[Monisha Sivanthilingam]

Hi Volker, 

 

We checked with the sample we shared to you in the previous update. We noticed that in that sample in the Startup.CS file we had set the services.AddSyncfusionBlazor(true). We set this when we load the custom scripts instead of the nuget resources. However, we have stopped the generation of custom scripts from version v18.3.35. Hence, we removed the true parameter and the sample rendered properly. The following code snippets demonstrate the solution. 

 

Startup.cs 

public void ConfigureServices(IServiceCollection services) 

       { 

            services.AddSyncfusionBlazor(); 

            services.AddRazorPages(); 

            services.AddServerSideBlazor(); 

            services.AddSingleton<WeatherForecastService>(); 

        } 

 

We have also prepared a sample for your reference. 

 

Please ensure that you have the same configurations in your sample. 

 

Please contact us if the issue persists. 

 

Regards, 

Monisha.