Rank 1
Iron
Iron
I was working on sort feature exactly similar to the link below, but when I click on the sort on the grid row for the 3rd time(default sort), it's not sorting as well as it won't show the up or down arrow. Is that's how the sort is implemented? I don't see sorted either in the example for default productName(code sandbox link).
What if I need only two time feature that is default "asc" and "des" ONLY?
Kindly let me know what's going on.
As you see in the screenshot I am not able to get "2 Test" at the 3rd time of sort
https://codesandbox.io/s/muddy-shape-dzdfwiconst initialSort = [
{
field: "displayname",
dir: "asc",
},
];
const CustomerAccountPage = () => {
// for sorting
const [sort, setSort] = useState(initialSort);
// console.log(data)
return (
<>
<NewCustomerForm updateData={updateData} />
{data && (
<div>
<div className="font-bold pt-6 pl-20">
<h4>Accounts</h4>
</div>
<div className="pt-4 pl-20">
<Grid
style={{
height: "600px",
border: 0
}}
data={orderBy(data?.getAccounts ?? [], sort)}
sortable={true}
sort={sort}
onSortChange={(e) => {
setSort(e.sort);
}}
>
<GridColumn
field="displayname"
title="Customer"
width="250px"
// cell={MyEditCommandCell}
/>
<GridColumn
field="customerId"
title="Customer ID"
width="250px"
/>
<GridColumn
field="createdAt"
title="Date Created"
width="200px"
/>
<GridColumn field="region" title="Country/Region" width="350px" />
<GridColumn field="apps" title="Apps" width="200px" />
<GridColumn field="vpn" title="VPN" width="200px" />
<GridColumn
title="Action"
width="100px"
cell={MyEditCommandCell}
/>
</Grid>
{openForm && (
<EditCustomerAccount
cancelEdit={handleCancelEdit}
onSubmit={handleSubmit}
item={editItem}
visible={openForm}
/>
)}
</div>
</div>
)}
</>
);
};
export default CustomerAccountPage;2 Answers, 1 is accepted
Hi Sachin,
If I understand correctly, once a column is sorted, you want to limit the further actions to sort asc/desc only. This could be achieved by disabling the unsort option for the sorting as shown in the following example:
<Grid
style={{
height: "300px",
}}
data={data}
sortable={{
allowUnsort: false,
mode: "multiple"
}}Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Iron
Yes, this is what I wanted :)
Thanks a lot!