Sort DropDown Control

The sort dropdown control is used to sort HTML elements by the specified CSS selector using the HTML SELECT element. It is possible to sort text and numerical content.

<select data-grid-control="sort">
<option data-type="initial" selected>Sort by</option>
<option data-path=".title" data-direction="asc" data-type="text">Sort by title asc</option>
<option data-path=".title" data-direction="desc" data-type="text">Sort by title desc</option>
<option data-path=".price" data-direction="asc" data-type="number">Sort by price asc</option>
<option data-path=".price" data-direction="desc" data-type="number">Sort by price desc</option>
</select>

Select data attributes

Data Attribute

Value

Description

Required

data-grid-control

sort

This attribute defines the control type.

Required

data-id

any alphanumeric string

This attribute may be used in the deep-link,

local storage, or complex filter logic.

Optional

Option elements data attributes

Data Attribute

Value

Description

Required

data-path

any CSS selector

It defines the path to the item that should be sorted.

Optional

data-direction

asc, desc

Sort direction

Optional

data-type

text, number, initial

Sort type

Optional

data-skip

[^a-zA-Z0-9]+

Defines a regex of characters that should be skipped.

Optional

selected

The selected option

Optional

The selected option should be marked with the selected attribute.

Sort Types

Sort Type

Description

text

Sort by text content.

number

Sort by numeric content.

initial

Sort by initial document order.

Added in DataGrid v1.0.2