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.
Hi There,
We are trying to set up Custom Sort based on Server Side call but not able to reflect this sorting on Client side
Our code is follows:
import { JATOToastContainer } from '@jato/ui-component-library'
import {
ActionEventArgs,
ColumnDirective,
ColumnsDirective,
Edit,
EditSettingsModel,
Grid,
GridComponent,
Inject,
Page,
PageSettingsModel,
RowDataBoundEventArgs,
RowDeselectEventArgs,
RowSelectEventArgs,
Selection,
SelectionSettingsModel,
Sort,
SortSettingsModel,
} from '@syncfusion/ej2-react-grids'
import { vehicleGridPageSize, vehicleSelectionLimit } from 'config'
import { selectedFilters } from 'features/filters/selectedFiltersSlice'
import {
addMpVehicle,
mpVehicles,
removeMpVehicle,
} from 'features/mpvehicles/mpVehiclesSlice'
import { FilterNameType } from 'models/Filters/FilterNameType'
import { ISelectedFilterOption } from 'models/Filters/FilterOption'
import { MpVehicle } from 'models/VehicleSelection/MpVehicle'
import { MpVehiclesResponse } from 'models/VehicleSelection/MpVehiclesResponse'
import React, { useEffect } from 'react'
import { useAppDispatch, useAppSelector } from 'store/hook'
import { StyledVehicleGrid } from './VehicleGrid.styles'
export interface IVehicleGridProps {
MpVehiclesResponse: MpVehiclesResponse
onPageChangeEvent: (ev: ActionEventArgs) => void
onSortChangeEvent: (ev: ActionEventArgs) => void
}
export const VehicleGrid: React.FC<IVehicleGridProps> = (
props: IVehicleGridProps
) => {
let gridInstance: Grid | null
const dispatch = useAppDispatch()
const mpVehicleData: MpVehicle[] = useAppSelector(mpVehicles)
const selectedFiltersData: ISelectedFilterOption[] = useAppSelector(
selectedFilters
)
const gridData = props.MpVehiclesResponse.vehicles
const pageSettings: PageSettingsModel = {
pageSize: vehicleGridPageSize,
currentPage: 1,
totalRecordsCount: props.MpVehiclesResponse.count,
}
const sortingOptions: SortSettingsModel = {
columns: [{ field: 'make', direction: 'Ascending' }],
}
const editOptions: EditSettingsModel = {
allowEditing: false,
allowAdding: false,
allowDeleting: false,
mode: 'Normal',
}
const selectionSettings: SelectionSettingsModel = {
checkboxMode: 'Default',
checkboxOnly: true,
persistSelection: true,
}
const rowSelected = (row: RowSelectEventArgs): void => {
if (row.isInteracted) {
const mpVehicleData = row.data as MpVehicle
if (row.rowIndexes?.length === vehicleSelectionLimit) {
if (gridInstance) gridInstance.refresh()
}
dispatch(addMpVehicle(mpVehicleData))
}
}
const rowDeselected = (row: RowDeselectEventArgs): void => {
if (row.isInteracted) {
if (gridInstance) {
const selectedRows = gridInstance.getSelectedRows().length
if (selectedRows === vehicleSelectionLimit - 1) gridInstance.refresh()
}
dispatch(removeMpVehicle(row.data as MpVehicle))
}
}
const actionBegin = (args: ActionEventArgs): void => {
if (args.requestType === 'paging') {
args.cancel = true
props.onPageChangeEvent(args)
} else if (args.requestType === 'sorting') {
// args.cancel = true
props.onSortChangeEvent(args)
}
}
const dataBound = (): void => {
if (gridInstance) {
gridInstance.pageSettings.currentPage = 1
gridInstance.pageSettings.pageSize = vehicleGridPageSize
if (selectedFiltersData.length > 0) {
for (let i = 0; i < selectedFiltersData.length; i++) {
if (selectedFiltersData[i].filterName === FilterNameType.PageSkip) {
const skip = parseInt(selectedFiltersData[i].value)
gridInstance.pageSettings.currentPage = skip / 20 + 1
}
}
}
gridInstance.pageSettings.totalRecordsCount =
props.MpVehiclesResponse.count
let rowIndex = -1
const rowIndexes: number[] = []
const selectedVehicleIds = mpVehicleData.map(
(vehicle: MpVehicle) => vehicle.uniqueIdentity
)
gridInstance.currentViewData.forEach((row: any, index) => {
if (selectedVehicleIds.includes(row.uniqueIdentity)) {
rowIndex = index
rowIndexes.push(rowIndex)
}
})
gridInstance.selectRows(rowIndexes)
}
}
const rowDataBound = (args: RowDataBoundEventArgs): void => {
const vehicleData: any = args.data
const selectedVehicleIds = mpVehicleData.map(
(vehicle: MpVehicle) => vehicle.uniqueIdentity
)
if (
selectedVehicleIds.length === vehicleSelectionLimit &&
!selectedVehicleIds.includes(vehicleData.uniqueIdentity)
) {
args.row
?.getElementsByClassName('e-gridchkbox')[0]
.classList.add('disablecheckbox')
args.row
?.getElementsByClassName('e-checkbox-wrapper')[0]
.classList.add('disablecheckbox')
}
}
useEffect(() => {
if (gridInstance) {
gridInstance.sortSettings = {
columns: [{ field: 'make', direction: 'Ascending' }],
}
if (selectedFiltersData.length > 0) {
for (let i = 0; i < selectedFiltersData.length; i++) {
if (selectedFiltersData[i].filterName === FilterNameType.OrderBy) {
gridInstance.sortSettings = {
columns: [],
}
const sortOrderData = selectedFiltersData[i].displayValue.split('|')
const direction =
sortOrderData[1] === 'Ascending' ? 'Ascending' : 'Descending'
const sortSettings: SortSettingsModel = {
columns: [
{
field: sortOrderData[0],
direction: direction,
},
],
}
gridInstance.sortSettings = sortSettings
//gridInstance.setProperties({ sortSettings: sortSettings })
}
}
}
}
})
return (
<StyledVehicleGrid>
<div className="ej-grid-header">
<p>
List of vehicles
<span
id="multiVehicleResult"
style={{ padding: '2px' }}
className="ng-star-inserted"
>
Result :{props.MpVehiclesResponse.count} vehicles
</span>
</p>
</div>
<GridComponent
id="grid"
ref={(g) => (gridInstance = g)}
dataSource={gridData}
loadingIndicator={{ indicatorType: 'Shimmer' }}
allowPaging={true}
allowSorting={true}
allowSelection={true}
allowGrouping={true}
editSettings={editOptions}
selectionSettings={selectionSettings}
pageSettings={pageSettings}
// sortSettings={sortingOptions}
rowSelected={rowSelected}
rowDeselected={rowDeselected}
actionBegin={actionBegin}
rowDataBound={rowDataBound}
dataBound={dataBound}
>
<ColumnsDirective>
<ColumnDirective type="checkbox" width="50" />
<ColumnDirective
field="vehicleId"
isPrimaryKey={true}
width="100"
textAlign="Left"
visible={false}
/>
<ColumnDirective field="uniqueIdentity" width="100" visible={false} />
<ColumnDirective
field="make"
headerText="Make"
width="100"
textAlign="Left"
/>
<ColumnDirective
field="model"
headerText="Model"
width="100"
textAlign="Left"
/>
<ColumnDirective
field="versionName"
headerText="Version"
width="200"
textAlign="Left"
/>
<ColumnDirective
field="bodyTypeDisplayValue"
headerText="Body Style"
width="100"
textAlign="Left"
/>
<ColumnDirective
field="fuelTypeDisplayValue"
headerText="Fuel type"
width="100"
textAlign="Left"
/>
<ColumnDirective
field="litres"
headerText="Engine Litres"
width="100"
textAlign="Left"
/>
<ColumnDirective
field="drivenWheelsDisplayValue"
headerText="Driven Wheels"
width="100"
textAlign="Left"
/>
<ColumnDirective
field="priceDisplayValue"
headerText="Price"
width="100"
/>
</ColumnsDirective>
<Inject services={[Sort, Page, Selection, Edit]} />
</GridComponent>
<JATOToastContainer
autoClose={2000}
closeOnClick={true}
draggable={true}
hideProgressBar={true}
newestOnTop={true}
pauseOnFocusLoss={false}
pauseOnHover={true}
position="top-center"
style={{ width: 'auto' }}
/>
</StyledVehicleGrid>
)
}
Get this error
