Static ReadonlySortedThe event that is dispatched when the grid is resorted because the user clicked on a sort control.
ProtectedaddAdds elements that have a specific attribute which value is a selector pointing to one or several elements; the target element(s). The elements are grouped per target element pointed to.
A separate target list is used, so that multiple aTargetToSourceMap instances can be used that use the same target but point to different type of sources.
The allows for a single event handler. The event handlers should handle all the different types of sources pointing to the same target.
The attribute that contains the selector. The sources are the elements containing this attribute. The targets are the elements pointed to by the selector value of the attribute.
Target elements are added to this list. If the target is already in the list, it will not be added again.
A map that contains the source elements grouped per target element.
Optional event to listen for at the target element(s). It will be set only once at each target.
A handler that is called with the target element that triggered the event.
Event group to use. If empty, the event listener just gets added to the target.
ProtectedgetGets the target element(s).
Element to get the target element(s) from.
Either one of the predefined values or a selector.
list of elements (can be empty)
Initializes the helper. This will call the scan method once the DOM has been loaded.
Resorts a grid using current selected control and sort direction. If the grid is not managed by this helper; nothing happens. This call will not fire a SortedEvent event.
Grid to resort.
Scans the current dom, update the dom and install listeners where necessary.
This method must support being called multiple times.
ProtectedshowShows an element by update the classes or display style. See the description of the UFHtmlHelper for details.
This class adds sorting capability to some container.
Add
data-uf-grid-sortingto a container element to add sorting of children support. The class assumes the children are organized in some sort of grid structure.A container using sorting has two groups of children:
Add
data-uf-sort-ascendinganddata-uf-sort-descendingattributes to the container to specify one or more css classes to add to the control element that has been selected to sort the data on. When one of the attributes is missing, no css classes will be set.Add
data-uf-storage-idto the container element to store the selected controller choice in the local storage and use it when the page with the container is shown again. The value of this attribute is used as key to store the data with.Add
data-uf-sort-controlto child elements that are the control elements. The values ofdata-uf-sort-ascendinganddata-uf-sort-descendingwill be added to or removed from css classes of this element (even if there is a separate clickable child element). The value of this attribute can be one of the following:none- to not sort the childrentext- to sort the children as textnumber- to sort the children as numbersdate- to sort the children as datesAdd
data-uf-sort-buttonto a child element of a control element to specify the element that can be clicked upon to sort the children. This attribute is optional, when missing the header element itself will be used as clickable element.Add
data-uf-sort-keyto specify an id for a control element. This attribute is optional, when missing the relative sibling index of the control element will be used. With relative indexes, the first control element has index 0, the second control element 1, etc. The key is used to link the data elements to the correct control element.The control elements can have sibling elements in between that do not use any of the attributes. These will be ignored, they are also not used when determining the relative sibling index.
The class supports two different ways of sorting the children:
To use containers, add
data-uf-item-containerto each container. The containers should not have other elements in between them. The class will reorder the containers in the parent.To use siblings, either set
data-uf-group-sizewith the container element or adddata-uf-item-groupto the sibling elements. If both attributes are missing, the number of siblings per group will be based on the number of controls.With
data-uf-group-sizethe children of the grid element (that are not usingdata-uf-grid-control,data-uf-item-containeranddata-uf-item-group) are split into groups using the value ofdata-uf-group-size. It is also possible to place the child elements in a separate container (that is a child element of the grid). Adddata-uf-grid-bodyto the container element that contains the children.With
data-uf-item-groupthe value of the attribute determines which group the siblings belong to. Each group should use a unique value. When usingdata-uf-item-groupmake sure the sibling elements do not have any other elements in between them. When reordering only the elements usingdata-uf-item-groupare reordered.Add
data-uf-sort-keyto a sortable element to link it to one of the controls. When missing the relative sibling index of the element will be used. Withdata-uf-item-groupthe index is relative to the first element with a certain group value.By default, the class uses the
innerTextfrom the element to determine the value for. Adddata-uf-sort-valueto provide an alternative value to use when sorting.When the elements are resorted because of a click on one of the controls, the class will dispatch an event
"sorted"(SortedEvent) at the container element.When elements are resorted (either the container elements or the grouped elements), the elements are reinserted at the first element inside the parent. Elements can have different parents; the elements with the same parent will be reordered within that parent starting at the position of the first element. This allows for data to be grouped and be sorted within their group.