Error on Excel Like Filtering

Question

Hi,we are using the excel like filtering. Always when the potential values should be loaded, i get an exception.We are using a Grid with custom Adaptor The Adaptor inherits from DataAdaptor. The rest functionality of the grid works like a charm..

Unknown · Answer

I investigated a few more hours.. It's only happening on full reload of that page. If i just navigate to a page with that component, everything is working as expected...

Rahul Narayanasamy · Answer

Hi Nils, Greetings from Syncfusion. We have validated your query with the provided information and checked the reported problem by creating a sample based on your requirement. We could not reproduce the reported problem. Find the below code snippets and sample for your reference. . . . @code{ public string[] MenuItems = new string[] { "ColumnChooser", "Filter" }; . . . } Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample1178454789 If you are still facing the same problem, then could you please share the below information. It will be helpful to validate and provide a better solution. Full Grid code snippets. Syncfusion Blazor NuGet version details. Reproduce the reported problem in the provided sample. Regards, Rahul

Unknown · Answer

Hi,i found out, what is causing the issue. If i add the with an empty Created Method (or any method) the grid export (and e.g. Filtering) is not working anymore.I now removed the event and used another one (to modify the columns) and everything is working.

Rahul Narayanasamy · Answer

Hi Nils, 

Thanks for sharing the details.  

We are able to reproduce the reported problem at our end we have considered it as a bug and logged defect report for the same “Issue with Excel filtering while binding Created event with CustomAdaptor as a Component”. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our next Bi-Weekly release which is expected to be rolled out on or before May 30, 2020.  
   
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.   
   
Feedback: https://www.syncfusion.com/feedback/13744  
  
Until then we appreciate your patience. 
 
Regards, 
Rahul

Unknown · Answer

Hi,

because of the reported bug, i cannot use the created event. If i use now for applying a persisted column state (from database) the databound handler, the columns start "jumping" around, because the column state is applied after initial load.

Is there any way to reapply a column order (which was stored in a database) without using the created handler and preventing the jumping of the columns when reapplying the state?

Rahul Narayanasamy · Answer

Hi Nils, 

Thanks for the update. 

Could you please share the below details, it will be helpful to validate and possibility to find the alternative  solution. 


How you are applying the column order in that event?
Share the details about what operations you have done in that event?
Codes used in that event?

Regards, 
Rahul

Unknown · Answer

Sure.i attached the files. The relevant one is HQGrid.razor.There is the method "LoadGridOrder".If i use databound events and apply the order of the columns with the ReorderColumns Api, the problem is the jumping of the columns..Thank youNilsAttachment: Archive_2d5c8f23.zip

Rahul Narayanasamy · Answer

Hi Nils, 

Thanks for sharing the details. 

We have validated your query with the provided details and we suggest you to use OnLoad event of the Grid to resolve the reported problem. Find the below documentation for your reference. 

Reference: 
https://blazor.syncfusion.com/documentation/datagrid/events/?no-cache=1#onload 

Please get back to us if you have any concerns or it does not resolve the problem. 

Regards, 
Rahul

Unknown · Answer

Hi Rahul,i tried - but the new column order is not applied. In the oncreated event the order is applied, but after that the grid is broken..

Unknown · Answer

I tried also one of your examples and tried to just reorder one column. The column is actually reordered, but the header stays at the old location and header and column content is matching not anymore..

@page "/development/nils/sfgrid"

<SfGrid DataSource="@Employees" @ref="@_grid" TValue="EmployeeData" Height="315">
 <GridEvents TValue="EmployeeData" OnLoad="LoadGridOrder"></GridEvents>
    <GridColumns>
        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="EmployeeID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field="Name.FirstName" HeaderText="First Name" Width="150"></GridColumn>
        <GridColumn Field="Name.LastName" HeaderText="Last Name"Width="130"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

@code{

    private SfGrid<EmployeeData> _grid;
    public List<EmployeeData> Employees { get; set; }

    protected override void OnInitialized()
    {
    Employees = Enumerable.Range(1, 9).Select(x => new EmployeeData()
    {
        EmployeeID = x,
        Name = new EmployeeName() {
            FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)],
            LastName =(new string[] { "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan" })[new Random().Next(5)]
        },
        Title = (new string[] { "Sales Representative", "Vice President, Sales", "Sales Manager",
                                              "Inside Sales Coordinator" })[new Random().Next(4)],
    }).ToList();
    }

    private async Task LoadGridOrder() {
         @* if (!_initalStateLoaded)
        { *@

           
            var oldColumns = _grid.Columns as List<GridColumn>;
                @* _grid.gethe *@
            @* var newCols = new List<GridColumn>(); *@

            @* newCols.AddRange(oldColumns); *@
     
            var colInGrid = oldColumns.FirstOrDefault(a => a.Field == "EmployeeID");
            if (colInGrid != null)
            {
                oldColumns.Remove(colInGrid);
                oldColumns.Add(colInGrid);
            }

            await _grid.RefreshHeader();
             _grid.Refresh(); 
            await _grid.RefreshColumns();

            @* _grid.RefreshColumns(); *@
            @* _grid.ReorderColumnByTargetIndex("EmployeeID",3); *@
                
            @* GridColumn commandColumn = newCols.FirstOrDefault(a=> a.Commands.NotNullOrEmpty());
           // delete column should always be at the end
            if (commandColumn != null) {
                var deleteColumn = commandColumn.Commands.FirstOrDefault(a=> a.Title =="delete");
                if (deleteColumn != null){
                    commandColumn.Commands.Remove(deleteColumn);
                    commandColumn.Commands.Add(deleteColumn);
                    }
            } *@

            // we need to add all missing columns to the end, otherwise the grid breaks
            @* var dif = oldColumns.Except(newCols); *@
            @* newCols.AddRange(dif); *@

            @* _cols = newCols; *@
        @* } *@
    }

    private List<GridColumn> _cols;

    public class EmployeeData
    {
        public int? EmployeeID { get; set; }
        public EmployeeName Name { get; set; }
        public string Title { get; set; }
    }

    public class EmployeeName
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

Unknown · Answer

Any update on this? Unfortunatly this blocks us from releasing..

Rahul Narayanasamy · Answer

Hi Nils, Sorry for the delay in get back to you. We have validated your query with the provided information. You want to reorder the Grid columns at initial render using OnLoad event. You can reorder the particular Grid columns using ReorderColumns or ReorderColumnByIndex methods of the Grid. Find the below code snippets and sample for your reference. private async Task LoadGridOrder() { Use any of the below methods //await _grid.ReorderColumns("EmployeeID", "Title"); - using ReorderColumns(Defines the origin field name, Defines the destination field name.) await _grid.ReorderColumnByIndex(0, 2); - using ReorderColumnByIndex ReorderColumnByIndex(Defines the origin field index, Defines the destination field index ) } Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample187070005 Based on your code snippets, we suspect that you want to restore the Grid settings while rendering the Grid. Could you please confirm that whether did you want to restore the Grid state(FilterSettings, SortSettings etc)? Regards, Rahul

Unknown · Answer

Yes, i do. And it's all working fine besides the the reordering. When i use the reorder columns functions, the grid is reordered after rendering. So the columns jump around on initial load of the grid. We have grid with 20-30 columns, and the behavior is weird for the user. The other way i implemented it works great without flickering BUT needs the created event, is not working in the OnLoad Event..

 private async Task LoadGridOrder() {
         if (!_initalStateLoaded)
        {

            var gridState = GridStateData;
            @* HQGridState? gridSate = null; *@

            var oldColumns = Grid.Columns as List<GridColumn>;
            var newCols = new List<GridColumn>();

            // Re-add just all the columns 
            if (gridState == null)
            {
                newCols.AddRange(oldColumns);
            }
            else
            {
                var colsFromState = gridState.Columns;
               
                foreach (var colInState in colsFromState)
                {
                    var colInGrid = oldColumns.FirstOrDefault(a => a.Field == colInState.Field);
                    if (colInGrid != null)
                    {
                        if (!newCols.Contains(colInGrid))
                          newCols.Add(colInGrid);
                    }
                }
            }

            GridColumn commandColumn = newCols.FirstOrDefault(a=> a.Commands.NotNullOrEmpty());
           // delete column should always be at the end
            if (commandColumn != null) {
                var deleteColumn = commandColumn.Commands.FirstOrDefault(a=> a.Title =="delete");
                if (deleteColumn != null){
                    commandColumn.Commands.Remove(deleteColumn);
                    commandColumn.Commands.Add(deleteColumn);
                    }
            }

            // we need to add all missing columns to the end, otherwise the grid breaks
            var dif = oldColumns.Except(newCols);
            newCols.AddRange(dif);

            _cols = newCols;
        }
    }

Unknown · Answer

The column jumping is also visible already in your created example.

Unknown · Answer

I created a screen recording to show the behavior.Attachment: Screen_Recording_20200512_at_18.30.12.mp4_6accb3ca.zip

Rahul Narayanasamy · Answer

Hi Nils,

Thanks for sharing the details.

We have validated the reported problem with the provided information. We can able to reproduce the reported problem at our end. You want to reorder the columns before grid rendering. We suggest you to bind the Grid columns using Columns property. By using this way, the Grid columns are reordered before its rendering. Find the below code snippets and sample for your reference.

<SfGrid @ref="_grid" DataSource="@Employees" Columns="@Cols" Height="315" AllowReordering="true">

</SfGrid>

@code{

private SfGrid<EmployeeData> _grid { get; set; }

public List<GridColumn> Cols = new List<GridColumn>();

public List<EmployeeData> Employees { get; set; }

protected override void OnInitialized()

{

#pragma warning disable BL0005

Cols = new List<GridColumn>() {

new GridColumn() { Field = "Title" },

new GridColumn() { Field = "Name.LastName" },

new GridColumn() { Field = "Name.FirstName" },

new GridColumn() { Field = "EmployeeID" }

}; - here you can define the Columns order as based on your wish.

#pragma warning restore BL0005

Employees = Enumerable.Range(1, 9).Select(x => new EmployeeData()

{

EmployeeID = x,

Name = new EmployeeName()

{

FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)],

LastName = (new string[] { "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan" })[new Random().Next(5)]

},

Title = (new string[] { "Sales Representative", "Vice President, Sales", "Sales Manager",

"Inside Sales Coordinator" })[new Random().Next(4)],

}).ToList();

}

. . .

}

Here, we have prepared a simple sample for your reference. Find the sample in below link.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppCols1115161646

Please get back to us if you need further assistance.

Regards,

Rahul

Unknown · Answer

Hi,i tried that -> but i also have complex template columns, is that also possible with this approach?

Unknown · Answer

Hi Rahul,can you give me an update on this?

Rahul Narayanasamy · Answer

Hi Nils, Thanks for the update. Sorry for the delay in get back to you. We have validated your query and you want to render the template columns while binding the columns using Columns property. Here, we have bind template columns while using Columns property. By using this way, you can render template columns in Grid(while bind using Columns property). Find the below code snippets and sample for your reference. @code{ private SfGrid _grid { get; set; } public List Cols = new List(); SfButton button; public List Employees { get; set; } //define the template column here RenderFragment