News in version
TreeGrid Gantt chart SpreadSheet Examples Documentation Download Development Licensing Prices References Contacts Buy Try it free
Live examples
Grids and tree grids

Complex grid - the first one Complex grid - RTL mode Large table with paging Large table without paging Multiline & images - books Positions and spanning Photo album - images PivotTable - 2D grouping Schools - list and ratings File and directory browser Extended JavaScript API Sharing & synchronization 1 000 000 rows, 1 000 cols


Microsoft Excel sheet TreeGrid sheet TreeGrid sheet - RTL mode

Gantt and bar charts

Gantt & Network chart Gantt & Network chart - RTL Simple Gantt chart Big Gantt chart - 1000 rows Gantt chart tree by grouping Resources usage chart Run chart - bar chart Grouping bars - run groups Joined boxes and containers Line chart and XY charts

Live grid tutorials
Basic (rows and columns)

1. Basic grid 2. Rows 3. Columns 4. Default rows, columns 5. Rows manipulation 6. Rows identification

Cells (types, formats, edit)

1. Edits - inputs & multiline 2. Combos & checkboxes 3. Html, links, imgs, buttons 4. Space buttons & tabs 5. Permissions & validation 6. Cell CSS style & color 7. Conditional formatting 8. Custom controls & editing 9. Events & custom dialogs 10. Column & row spanning 11. Dynamic cell spanning

Tree (rows, columns, groups)

1. Row tree 2. Column tree 3. Grouping rows to tree

Sorting rows

1. Sorting rows

Filter and search

1. Filtering rows 2. Filtering in tree 3. Search & advanced filters


1. Dragging rows 2. Dragging between grids 3. Dragging external tag

Paging (rows, tree, columns)

1. Client root paging 2. Client child paging 3. Client column paging 4. All client paging 5. Adding pages dynamically 6. Server root paging 7. Server child paging 8. All server paging

Master and detail

1. Nested detail simple 2. Nested detail tables 3. Master detail simple 4. Master detail tables 5. Master detail more tables 6. Master detail in tree 7. Master detail trees 8. Nested detail nested deep 9. Nested detail server paging

Calculations (cell formulas)

1. Calculated columns 2. Calculated rows 3. Calculation order 4. Calculated rows in tree 5. Calculation order in tree 6. Calculated attributes 7. Editable calculated cells

Live Sheet tutorials
Sheet features

1. Row and column Index 2. Auto size (auto adding pages) 3. Row&column manipulation 4. Cell manipulation 5. Cell style 6. Editable formulas (ids) 7. Editable formulas (indexes) 8. Cell format 9. Outside edit 10. Auto tree

Live Gantt tutorials
Main bar (Gantt chart)

1. Main bar 2. Discrete main bar 3. Main bar plans 4. Summary tasks

Run bar (Bar chart)

1. Run array definition 2. Run JSON definition 3. Run summary definition 4. Run drag 5. Run groups & API 6. Run bar as task 7. Run box as task 8. Network diagram 9. Run join and drag 10. Run external drag 11. 2 fixed levels containers

Flags and points

1. Flags 2. Points

Display, zoom, paging

1. Header & background 2. Zoom 3. Paging 4. Synchronizing more Gantts

Dependencies & scheduling

1. Constraints 2. Dependencies 3. Schedule tasks 4. Critical path


1. Calendars exclude


1. Resources 2. Availability

1. Sorting rows

Sorting rows according to one ore more columns

  • TreeGrid supports sorting rows by one or more columns ascending or descending.
  • Sort definition

    The predefined sort is set by Cfg attribute


    as comma separated list of column names.
    If the column is sorted descending, it is listed with minus prefix, like "-col1".
    There can be set also default column to sort by when there is no predefined sorting or more rows have the same values in all sorting column, it is set Cfg attribute DefaultsSort. It cannot be changed by users.
  • Sort permitions

    • Cfg attribute


      ='0' disables sorting in grid by users. It can be still changed by API.
    • Cfg attribute


      ='0' temporary disables sorting in grid, but permits users to change the sort columns without resorting the grid.
      The Sorted value can be changed by actions SortOff and SortOn.
    • Column can have set its attribute


      ='0' to not let users to sort by this column. It is still possible to do it by API.
    • Row can have set its attribute


      ='0' to not sort its children.
      To not sort the root rows set this attribute to Root tag.
      It affects every sorting, including API.
  • Sort options

    • Row can be fixed on beginning or end of its parent or root by its


      attribute. Set it to positive value to fix the row on beginning and negative value to fix it to the end.
      There can be more fixed rows on both sides, they are sorted according to their SortPos value.
    • For numbers there are two basic sorting types, number and string sort. The number sort is used by default for column types Int, Float and Date.
      You can explicitly choose the number or string sort by column or parent cell attribute


    • By default are strings sorted formatted according to its Type and Format. To sort them by the direct cell value set column or parent cell attribute


      ='1'. It will speed up the sorting.
    • Enum values are sorted by default by the visible string.
      To sort them by key value (EnumKeys) set column or parent cell attribute RawSort='1'.
      To sort them by position inside the Enum/EnumKeys set RawSort='2'.
      To sort them by index set NumberSort='1'. The Enum values must be set by the index in this case.
    • Column / parent cell attribute


      to compare the strings case sensitive. By default is on.
    • Column / parent cell attribute


      to compare the strings according to browser's locale settings. By default is off.
      It is done only for first 1920 Unicode characters. For higher Unicode characters like Chinese, Korean or Japanese you must define CharCodes instead.
    • Column / parent cell attribute


      as list of characters to ignored when comparing. The strings are compared after these values are removed from them.
    • Column / parent cell attribute


      as list of character pairs to replace the first character by the second one in all strings before comparing them. Useful for example to compare strings without punctuation in many languages.
  • Cell value for sorting

    Every cell can have set special value by


    to use it for sorting instead of the cell value.
    It can have also different value for descending sorting set by SortDescValue, useful to preserve row position when sorting by the column.
    The value can be also dynamically created by JavaScript in API event OnGetSortValue.
  • Change sort behavior

    To change sorting behavior use


    API event, here you can return the value to sort by according to your conditions.
    For example to sort selected rows always on top define:
    Grids.OnGetSortValue = function(G,row,col,val,desc,group){ return (row.Selected ? desc : !desc) ? "1_"+val:"0_"+val; }
  • User interface (<Header>)

    Users can change sort settings by clicking to <Header> cell. There can be more headers in grid, the sorting can be individually permitted for them.
    • The header shows sorting icons according to the actual sorting state. The icons can be changed for all columns (if set Header attribute SortIcons='1') or only for active sorting columns (SortIcons='2').
    • The header can have disabled sorting actions and icons by its SortIcons='0'.
    • All the sorting icons can be reversed (up / down) by Cfg attribute ReversedIcons='1'.
    • There are four possible behaviors for clicking to header cell and sorting icons controlled by Cfg attribute


      0 - Simple, no icon - Icons are not visible, first click to header sorts ascending, next descending.
      1 - Simple - Icons are visible, first click to header sorts ascending, next descending.
      2 - Directional, icons only - Only icons can be clicked, top half to sort ascending, bottom half descending.
      3 - Directional - The whole header can be clicked, top half to sort ascending, bottom half descending.
  • Sorting actions

    It is possible to control how the sorting column will be chosen by users. It can be done by assigning sorting actions to header sort events in Actions tag, for example <Actions OnClickSort='SortAsc OR SortDesc'.
    • Events

      There is basic event


      called when set Cfg SortIcons to 0 or 1, called for both directions.
      Or two events




      called when set Cfg SortIcons to 2 or 3, called for the individual direction.
      There are the actions with key or button prefixes or their combinations, Right and Middle for mouse buttons and Shift, Alt and Ctrl for control keys. For example OnShiftRightClickSort or OnCtrlClickSort.
    • Actions

      • SortAsc



        add the clicked column as the first column in sorting. The old columns are shifted to next positions.
        If the column is already the first in sorting, it changes its direction if it has different.
        If the sorting count reaches MaxSort, the last column is removed.
      • SortAscOne



        sort only by this column, all old sorting is removed.
      • SortAscAppend



        add the column to the end of the sorting.
        If the sorting count reaches MaxSort, they do nothing.
        If the column is already present in the sorting and has different direction, they changes it.
      • SortAscAdd



        add the column to the end of the sorting if there was another click to some column header within last two seconds.
        If the sorting count reaches MaxSort, they do nothing.
        If the column is already present in the sorting and has different direction, they changes it.
        If there was no click to column header within two seconds, it sorts by this column and all old sorting is removed.
      • NoSort

        removes the clicked column from sorting.
      • DefaultSort

        clears the sorting and restores Sort attribute that was set when the grid was loaded.
  • Auto sort

    Row can be automatically sorted to right place when user changes the row value in some sorting column. For this behavior set Cfg attribute AutoSort='1'.
  • API

    Before sorting start it is called OnSort API event. It can return true to provide own sorting and not the default one.
    After sorting finishes, it is called OnSortFinish API event.
    The grid can be re-sorted after some external change by SortRows method.
    The individual row can be re-sorted after external change by SortRow method, only if AutoUpdate='1'.
    The sorting can be changed by ChangeSort method.