Allow Sort not working on Data Grid

[Jose]

When I set the 'AllowSorting' property to true, the control does not work. All it will do is essentially refresh the data grid. I noticed that when I reordered my list of objects in the service layer in a random order. Clicking the column header simply reorders the list of data that is displayed on the datagrid. Could this be because my data is loaded via controller and service layers and not the front-end?

code:

<div class="content-wrapper">

    <div class="row" style="margin-right: 0.2em; margin-top: 1em;">

        <h4 style="margin-top: 0.2em; font-weight:bold">BPCodes</h4>

        <SfGrid @ref="grid" TValue="BPCodeDTO" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" AllowSorting="true" AllowSelection="true">

            <GridEvents TValue="BPCodeDTO" OnActionBegin="@ActionBegin" OnActionComplete="@ActionComplete" OnActionFailure="@ActionFailure"></GridEvents>

            <SfDataManager Url="https://localhost:7120/BPCode" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>

            <GridPageSettings PageSize="8"></GridPageSettings>

            <GridSortSettings>

                <GridSortColumns>

                    <GridSortColumn Field=@nameof(BPCodeDTO.Level) Direction="SortDirection.Descending"></GridSortColumn>

                </GridSortColumns>

            </GridSortSettings>

            <GridEditSettings NewRowPosition="NewRowPosition.Bottom" AllowAdding="true" AllowDeleting="true" AllowEditing="true">

                <Validator>

                    @{

                        ValidatorTemplateContext txt = context as ValidatorTemplateContext;

                    }

                    <Validator context="@txt"></Validator>

                    <ValidationMessage For="@(() => (txt.Data as BPCodeDTO).RangeTo)"></ValidationMessage>

                    <ValidationMessage For="@(() => (txt.Data as BPCodeDTO).RangeFrom)"></ValidationMessage>

                </Validator>

            </GridEditSettings>

            <GridColumns>

                <GridColumn Field=@nameof(BPCodeDTO.Id) HeaderText="ID" TextAlign="TextAlign.Left" Width="120" Visible="false" IsPrimaryKey="true" AllowEditing="false"></GridColumn>

                <GridColumn Field=@nameof(BPCodeDTO.Level) HeaderText="Level" Width="140" AllowEditing="false" AllowAdding="false" AllowSorting="true" EditorSettings="@LevelEditParams"></GridColumn>

                <GridColumn Field=@nameof(BPCodeDTO.RangeFrom) HeaderText="RangeFrom" TextAlign="TextAlign.Left" Width="120" EditType="EditType.NumericEdit" AllowEditing="true"></GridColumn>

                <GridColumn Field=@nameof(BPCodeDTO.RangeTo) HeaderText="RangeTo" TextAlign="TextAlign.Left" Width="120" EditType="EditType.NumericEdit"></GridColumn>

                <GridColumn Field=@nameof(BPCodeDTO.Code) HeaderText="BP Code" TextAlign="TextAlign.Left" ValidationRules="@(new ValidationRules{ Required= true })" Width="120" EditType="EditType.DefaultEdit"></GridColumn>

                <GridColumn Field=@nameof(BPCodeDTO.Amount) HeaderText="Amount" TextAlign="TextAlign.Left" Width="120" EditType="EditType.NumericEdit" Format="c2"></GridColumn>

                <GridColumn Field=@nameof(BPCodeDTO.Consumer) HeaderText="Consumer" Width="140" TextAlign="TextAlign.Center" DisplayAsCheckBox="true" DefaultValue="false" EditType="EditType.BooleanEdit" Type="ColumnType.Boolean"></GridColumn>

                <GridColumn Field=@nameof(BPCodeDTO.Business) HeaderText="Business" Width="140" TextAlign="TextAlign.Center" DisplayAsCheckBox="true" DefaultValue="false" EditType="EditType.BooleanEdit" Type="ColumnType.Boolean"></GridColumn>

            </GridColumns>

        </SfGrid>

    </div>

</div>

[Vignesh Natarajan]

Hi Jose,

Greetings from Syncfusion.

You want to perform sorting operations in the Grid component while using WebApiAdaptor as a datasource using DataManager. While using the WebAPI adaptor, we will send only the queries for current operation (like filtering, sorting, paging, etc.) to the WebAPI controller, based on the passed query you need to handle these actions in API controller and return the executed result to display in Grid.

You can get the filter queries in $orderby from the controller in Request.Query. Based on this query string, you need to handle the data operations(sorting) at the controller side.

Find the below code snippets and sample for your reference.

[HttpGet]

        public async Task<object> Get(int? code)

        {

            . . .

            var queryString = Request.Query;

            string sort = queryString["$orderby"];   //sorting     

            string filter = queryString["$filter"];     //

            string auto = queryString["$inlineCount"];

            if (filter != null) // to handle filter opertaion

            {

               //you need to handle filtering on your own based on queryString

                . . .

            }

            if (sort != null) //Sorting

           {

              //you need to handle sorting on your own based on queryString

 

            }

            . . .

            if (queryString.Keys.Contains("$inlinecount"))

            {

                . . .

                 return new { Items = data.Skip(skip).Take(top), Count = count };              

            }

            else

            {

                return data;

            }

        }

Reference:

https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor

https://www.syncfusion.com/forums/168543/search-filter-and-sort-in-blazor-wasm-hosted-using-ef-core

https://www.syncfusion.com/forums/163275/grid-with-ef-core-not-filtering

Please let us know if you have any concerns.

Regards,

Vignesh Natarajan

[Jose]

Will the same work for the 'AllowDragAndDrop' property? I enabled this property in the same control in the question above, however, the row I drag is not dropped to whatever destination I dragged it to.

[Sarveswaran Palani]

Hi Jose,

Greetings from Syncfusion support. 

We are currently Validating the reported query at our end, and we will update the further details shortly. Until then we appreciate your patience.

Regards,

Sarvesh

[Sarveswaran Palani]

Hi Jose,

From your query, we suggest you to use the RowDropped event to resolve the reported issue at our end. You can customise your requirement by using DropIndex and FromIndex from the args value of this event. Kindly refer the attached link for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/events#rowdropped

Regards,
Sarvesh