Column sort not working at all

[Hector]

Hello

Im currently having problems with the sorting option of the Grid, it doesnt work at all.

When I click on a column header, I can see the arrow appearing indicating that it is indeed listening for the click, but the sorting itself is not happening.

Im using the dataManager to fill the grid with my data from a backend URL.

Can you help my get the sorting function to work?

Thanks in advance.

Heres the relevant code:

var gridInstance:any = null;

  class WebApiAdaptorCustom extends WebApiAdaptor {  

    batchRequest(dm, changes, e) {    

      return {

        type: 'PUT',

        url: //My URL

        data: JSON.stringify(changes.changedRecords)

    };

    }

  }

  var remoteData: DataManager = new DataManager({

    url: //My URL

    adaptor: new WebApiAdaptorCustom,

    headers: [ { 'Authorization': 'Bearer ' + AuthToken.get() }]

  });  

  const toolbarOptions: any  = ['Edit','Update', 'Cancel'];

  const editSettings: any    = { allowEditing: true, allowAdding: false, allowDeleting: false,  mode:'Batch'};

  const pageSettings: Object = { pageCount: 10, pageSizes: true};

  const sortingOptions: SortSettingsModel  = {

    columns: [{ field: 'clasifNombre', direction: 'Ascending' }]

};

  useEffect(() => { //On load assign values to foreignKey

    var url = // MY URL        

    const options = {

        headers: {

            'Content-Type': 'application/json',

            'Authorization': 'Bearer ' + AuthToken.get()

        }

    };                  

    Axios.get(url, options).then(response => {                  

        condicionesPago = [];

        condicionesPago.push({ 'condicionPagoId':null, 'descripcion':''});

        response.data.rows.forEach((item, index) => {              

          condicionesPago.push({ 'condicionPagoId':item.id, 'descripcion':item.codigo});

        });          

    })

  }, []);

  return (  

    <ContentWrapper>

      <GridComponent dataSource={remoteData}

                     ref={grid => gridInstance = grid}

                     toolbar={toolbarOptions}

                     gridLines='Both'            

                     editSettings={editSettings}

                     allowSorting={true}

                     sortSettings={sortingOptions}                    

              >              

                <ColumnsDirective>

                  <ColumnDirective field='Id' headerText='id' width='140' isPrimaryKey={true} visible={false} ></ColumnDirective>                      

                  <ColumnDirective field='reglaIntegracionCodigo' headerText={i18n('entities.reglaIntegracion.fields.codigo')} width='50' textAlign='Center' visible={true} allowEditing={false} ></ColumnDirective>

                  <ColumnDirective field='reglaIntegracionDescripcion' headerText={i18n('entities.reglaIntegracion.fields.descripcion')} width='100' textAlign='Center' visible={true} allowEditing={false}></ColumnDirective>

                  <ColumnDirective field='clasifNombre' headerText={i18n('entities.clienteClasifCobro.fields.nombre')} width='50' textAlign='Center' visible={true} allowEditing={false} ></ColumnDirective>

                  <ColumnDirective field='demora' headerText={i18n('entities.reglaIntegracionDet.fields.demora')} width='80' textAlign='Right' visible={true} editType='numericedit' allowEditing={true} ></ColumnDirective>                      

                  <ColumnDirective field='condicionPagoId' headerText={i18n('entities.reglaIntegracionDet.fields.condicionPago')} width='80' allowFiltering={false} editType='dropdownedit'

                                    foreignKeyValue='descripcion' foreignKeyField='condicionPagoId' dataSource={condicionesPago}></ColumnDirective>                                  

                </ColumnsDirective>

                <Inject services={[Page, Toolbar, Edit, Sort,  CommandColumn, ForeignKey]} />

              </GridComponent>

    </ContentWrapper>    

  )

[Rajapandi Ravi]

Hi Hector,

Greetings from Syncfusion support

In WebApiAdaptor, we need to handle the Grid actions such as Filtering, Paging, Sorting in server side by manually. By default, grid sends request to the server for all the grid actions like Paging, Sorting, Filtering, searching etc., in the controller side you can perform this operation with the correspond queries and return the data with Items & Count value pair which will be bound to the grid.

Regards,

Rajapandi R