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

Allow Sort not working on Data Grid

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?


<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>



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



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



                        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>




                <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>





4 Replies

VN Vignesh Natarajan Syncfusion Team December 12, 2022 04:47 AM UTC

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.


        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 };              




                return data;







Please let us know if you have any concerns.


Vignesh Natarajan

JO Jose December 19, 2022 08:21 PM UTC

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.

SP Sarveswaran Palani Syncfusion Team December 22, 2022 04:20 AM UTC

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.



SP Sarveswaran Palani Syncfusion Team January 6, 2023 04:02 AM UTC

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


Live Chat Icon For mobile
Up arrow icon