News in version
Buy Try it free
TreeGrid Gantt chart SpreadSheet Examples Documentation Download Development Licensing Prices References Contacts Buy Try it free
TreeGrid SpreadSheet Examples Documentation References
Gantt chart Download Licensing & prices Contacts
TreeGrid Examples Download
Gantt chart Documentation References
SpreadSheet Licensing & prices Contacts
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

Sheets

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

Dragging

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

Calendars

1. Calendars exclude

Resources

1. Resources 2. Availability

1. Filtering rows

Showing only rows that satisfy selected criteria

Source: 01-Filtering_rows.xml
  • TreeGrid provides three independent ways of filtering rows. All of them can be applied at the same time.
    • Basic filters done by <Filter> row. There can be more <Filter> rows in one grid.
      The <Filter> row supports simple filter for every column like in MS Excel.
    • Advanced filters done by Cfg Search... attributes and editable in <Search> row.
      It lets users to write their complex expression to filter by or just string to search in all or specified columns.
      It is described and more demonstrated in next tutorial example 03-Search_and_advanced_filters.html.
    • Custom filters done by API method SetFilter or FilterDateRange / FilterTextRange. There can be set more independent filters identified by name.
      It can be used for example to switch data parts by tabs, combos or radio buttons.

  • Filter permitions


    • A Cfg attribute

      Filtering

      ='0' completely disables filtering in grid.
      It affects all filters (basic, advanced, custom).
    • A Cfg attribute

      Filtered

      ='0' temporary disables filtering in grid.
      This attribute value can be changed by actions FilterOff and FilterOn.
      It affects only basic filter (for search there is similar attribute Searched and actions SearchOff and SearchOn).
    • A row can have set

      CanFilter

      ='0' to restrict filtering (hiding) this rows by any filter.
      In tree it can be set also to '2' to hide the row if all its children are hidden. See next example 02-Filtering_in_tree.html.
      It affects all filters (basic, advanced, custom).
    • A column can have set

      CanFilter

      ='0' to not filter by this column.
      It affects only basic filter (for search there is similar attribute CanSearch).
    • A column can have set

      CanFilter

      ='2' to test all its cell attributes CanFilter, if the cell attribute is set to 0, the row is not filtered by this column.
      It affects only basic filter and custom filter with column parameter set (for search there is no similar setting).

  • Cell value for filtering


    Every cell can have set special value by

    FilterValue

    to use it for filtering instead of the cell value.
    The value can be also dynamically created by JavaScript in API event OnGetFilterValue.
    It affects basic and advanced filters and custom filters set by FilterTextRange / FilterDateRange, but not by SetFilter

  • API events


    Before filtering start it is called OnFilter API event. It can return true to provide own filtering and not the default one.
    After filtering finishes, it is called OnFilterFinish API event.
    For every row it is called OnRowFilter event to let you change the result of the filtering row.
    The grid can be re-filtered after some external change by DoFilter method.
    All these events are called for all filters (basic, advanced, custom).

  • Simple filter (<Filter>)


    Simple filter is done by fixed <Filter> row(s) placed into <Head> or <Foot> section.

    • Filtering strings


      There are four attributes used also for sorting and grouping. To set the option only for filter, set it to <Filter> cell.
      • Column / Filter cell attribute

        CaseSensitive

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

        LocalCompare

        to compare the strings according to browser's locale settings. It has sense especially for case insensitive comparing. By default is off.
      • Column / Filter cell attribute

        WhiteChars

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

        CharCodes

        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.

    • User interface (<Filter> row)


      • The actual or predefined filter values are in cell values of the <Filter> row.
      • The actual or predefined operator is set by cell attribute

        Filter

        . It can be:
        Off: 0 - Off
        Number filter: 1 - Equal, 2 - Not equal, 3 - Less than, 4 - Less than or equal, 5 - Greater than, 6 - Greater than or equal
        String filter: 7 - Begins with, 8 - Does not begin with, 9 - Ends with, 10 - Does not end with, 11 - Contains, 12 - Does not contain
      • Every filter cell shows left icon to popup filter menu to select filter operator.
        The menu can be hidden by cell attribute ShowMenu='0'. For Enum type is the menu hidden by default, it can be shown by ShowMenu='1'.
        The individual menu items (visibility and order) can be set by MenuItems cell attribute.
        The menu can be shown also by calling action ShowFilterMenu.
      • After the filter cell value is edited or changed by a user and the filter operator is 0 (off), the operator can be automatically set to DefaultFilter cell attribute value.
        By default it is 1 for number types and 11 for string types.
      • When a user inputs or selects value set by attribute FilterOff, the filter operator is automatically changed to 0 (off). It is empty string by default.
        For Enum type it can be also value not existing in Enum array to add it to disable the filter.
      • Enum type can filter by the Enum strings or by EnumKeys values when set cell attribute FilterEnumKeys='1', useful especially when it filters different type cells with FilterValue set.
      • To choose more values to filter by, set

        Range

        ='1' for the Filter cell. Especially for Enum type or Button Defaults.
      • All the cell values and operator values can be changed by API method ChangeFilter.

  • Advanced filter (Search)

    done by Cfg Search... attributes and editable in <Search> row.
    It lets users to write their complex expression to filter by or just string to search in all or specified columns.
    It is described and more demonstrated in next tutorial example 03-Search_and_advanced_filters.html.

  • Custom filters


    It is possible to set custom filters by API. These filters are identified by their names and are independent on each other and on the basic and advanced filters.
    In this example are demonstrated in top tabs to choose specific part of the data to display.
    • There are two special API methods FilterDateRange and FilterTextRange to filter rows with values in given column in given range.
    • All other custom filters can be set by API method

      SetFilter

      . It accepts any JavaScript code like in grid Formula to apply it for every iterated row.
    • Calling SetFilter without filter parameter clears the given filter set by any or these three methods.