Hi,

Is it possible to apply custom sort logic to a Data Grid Column which is applied when clicking on the Column header? As an example, we have a Date column with nullable values. We would like nulls to be considered highest i.e.

• ascending: lowest date value -> highest date value -> null date values
• descending: null date values -> highest date value -> lowest date value

In the default sort nulls are considered lowest.

Hi, In my application I have a sorting by both Column header click and by column menu. React

I am able to sort multiple columns only by column header click. Events triggerred in these headers click properly maintains their sort state variable, preserving the whole previous user inputs

But at the same time, I am not able to sort multi columns via column menu option. The event.sort for these events trigger only the current sort applied but not maintaining the previous inputs of it... The Grid refreshes everytime the new column menu input sort is provided 

So, I need maintain a state combining both the sorting forms.

Any solutions to have a common state or to prevent the tefresh ?

And one more add on, I have given sortable.mode = multiple and sortable.allowUnsort = true.... How do we get to know the field name when unsort is applied, the event.sort simply returns an array and no info on the field name

Hi,

I am trying to implement a custom pager which I am able to implement on the lines of your given in your documentation https://www.telerik.com/kendo-react-ui/components/grid/paging/. Please refer to Custom Pager section.

However when I make the grid sortable, the sort icons (up and down arrows) do not appear in the column header. Please look  at the link  https://stackblitz.com/edit/react-7fthgv-hcysax?file=app%2Fmain.tsx which demonstrates the problem. I have set the property sortable to true here both for the Grid and the GridColumn.

I am not sure why the sort icons are not appearing. 

I am using kendo data grid version 5.9.0. If you need any other info please let me know. Any help would be appreciated.

Thanks

Janaki

Hello,

I am trying to sort the date with sort feature inside the grid. But looks like it's not sorting for me based on the time also it's taking as a string.

If you let me how to perform sort on date column then that would be great!

I have added the screenshot and code snippet for the reference

const generateDate = () => {
  const currDate = new Date();
  const formatDateUS = currDate.toLocaleDateString("en-US");
  console.log(formatDateUS);
  return formatDateUS;
};

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

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