LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Articles

In links below you can find available articles on different components, displayed in alphabetical order per each component.

Accordion


Button


  • Overview of IntegralUI Button for Angular

    An overview of features included in Button component for Angular. IntegralUI Button is a fully customizable native angular component that represents a button and can appear in pressed or normal state.

CheckBox


ComboBox


  • Overview of IntegralUI ComboBox for Angular

    An overview of features included in ComboBox component for Angular. IntegralUI ComboBox is a fully customizable native angular component with advanced features like: animations, dropdown list settings, events etc.

ContextMenu


Frame


  • Overview of IntegralUI Frame for Angular

    An overview of features included in Frame directive for Angular. IntegralUI Frame allows you to resize any HTML element on demand dynamically during run-time.

Grid


  • Angular Grid with Rows in Alternate Colors

    Learn how to display even/odd rows in alternate colors in Angular Grid component. You can create custom CSS classes for each state of a row: normal, hovered, selected and disabled.

  • Auto Size Columns to Fit Angular Grid Width

    This demo shows columns where they occupy the width of Angular Grid component in whole. Whenever column width changes, other columns automatically change their size to fill the available grid space. Each column can auto size within its minimum and maximum width set.

  • Add DropDown Button to Column Header in Angular Grid

    Learn how to add a dropdown button to column header in Angular Grid component. Each header displays a dropdown button on right side that when clicked shows a list of common options.

  • Custom CheckBox in Angular Grid Cells

    Learn how to create a column where each cell has a custom check box in Angular Grid component. You can customize the appearance of check box column using only CSS.

  • Custom Sorting in Angular Grid

    Learn how to create a custom sort operation and apply it to specific column in Angular Grid component. Whenever a column is clicked, all rows are sorted in either ascending or descending order.

  • Drag Drop between Grid and TreeGrid in Angular

    This demo shows drag drop of rows from Grid to the TreeGrid components in Angular 2, and vice versa. You can set whether rows are draggable on general level for both components.

  • Drag Drop Multiple Rows in Angular Grid

    An example of drag drop operation where multiple rows are moved or copied within the Angular Grid component. You can select multiple rows from checkbox column or by clicking on rows while holding CTRL or SHIFT key, then you can drag and drop them at different position.

  • Edit Cell Label with Text Editor in Angular Grid

    An example of Grid component for Angular, where you can edit the label of grid cells using a built-in text editor. Whenever a cell is clicked, a textbox will popup where you can enter a new string and change the cell label.

  • Edit Cells with Boolean Values using CheckBox Editor in Angular Grid

    Learn how to use the built-in checkbox editor for cells in Angular Grid component. You can edit cells with boolean values using a custom checkbox that can display two or three state values.

  • Edit Cells with Date Picker in Angular Grid

    An example with angular Grid where you can edit cells using a DatePicker. Learn how to enable the built-in date editor for all cells in specific column. In addition, see how to customize the date editor with custom CSS styles.

  • Edit Cells with DropDown List in Angular Grid

    An example of Angular Grid where you can edit cells using a dropdown list as editor. You can change the appearance of the dropdown editor using custom CSS styles.

  • Edit Cell with Numeric Values in Angular Grid

    An example of Angular Grid, where you can edit numbers in grid cells using a built-in numeric up-down editor. Whenever editor is enabled, you can enter new numeric values using a keyboard or change the current number with up down buttons using a mouse or with touch.

  • Edit Cell with Rating Editor in Angular Grid

    Learn how to use the built-in Rating editor in cells of Grid for Angular. Editor is fully customizable, you can use your own images for rating values, all done through CSS.

  • How to Add a Set of Images to Cells in Angular Grid

    Learn how to add one or more images to cells in Angular Grid component. You can place one or multiple images in a single cell from a local or remote source.

  • Overview of IntegralUI Grid for Angular

    An overview of features included in Grid component for Angular 2. IntegralUI Grid is optimized to work with thousands of rows on client side. Supports drag drop operations, multi selection and it is fully customizable.

  • Show/Hide Columns in Angular Grid

    A demo on show or hide columns in Angular Grid component via context menu. Each column can be visible or hidden, depending on custom conditions set in your code.

  • Show/Hide Column Header and Footer in Angular Grid

    An example of how to show or hide column header and footer in Angular Grid. You can hide either column header, footer or both.

GroupBox


ListBar


ListBox


ListScroller


  • Overview of IntegralUI ListScroller for Angular

    An overview of features included in ListScroller component for Angular. IntegralUI ListScroller is a fully customizable native angular component that displays a scrollable item list in horizontal or vertical layout.

ListView


Menu


Paginator


  • Overview of IntegralUI Paginator for Angular

    An overview of features included in Paginator component for Angular. IntegralUI Paginator is a fully customizable native angular component that allows you to add pagination to each page in your application.

ProgressBar


  • Overview of IntegralUI CheckBox for Angular

    An overview of features included in ProgressBar component for Angular. IntegralUI ProgressBar is a fully customizable native angular component that shows the current progress or activity of a process. The progress bar can appear horizontally or vertically.

RadioButton


  • Overview of IntegralUI RadioButton for Angular

    An overview of features included in Radio Button component for Angular. IntegralUI RadioButton is a fully customizable native angular component that represents a radio button, which replaces the standard HTML input element.

Range


  • Overview of IntegralUI Range for Angular

    An overview of features included in Range directive for Angular. IntegralUI Range allows you set limits in which an element can resize during run-time, whenever a parent, page or window size changes. You can anchor elements to different sides of parent element: top, right, bottom, left or none.

Rating


SlideBar


  • Overview of IntegralUI SlideBar for Angular

    An overview of features included in SlideBar component for Angular. IntegralUI SlideBar is a fully customizable native angular component that allows you to animate slides created using images or custom content.

SplitContainer


Splitter


  • Overview of IntegralUI Splitter for Angular

    An overview of features included in Splitter component for Angular. IntegralUI Splitter represents a movable bar that can resize elements during run-time.

  • Vertical Splitter in Angular

    Provides information on how to add a vertical splitter between elements in Angular. Example shows two block elements divided vertically by a resizable splitter.

TabStrip


  • Angular Tabs in Different Colors

    An example of TabStrip component for Angular, showing tabs in different colors. Learn how to use custom CSS styles to create multi colored tabs.

  • Different Scroll Modes in Angular TabStrip

    Presents a demo, different ways to scroll tabs in IntegralUI TabStrip component for Angular. Both scroll buttons are placed on the right side (inbound) or they are separated on left and right side with tabs in between (outbound).

  • Overview of Drag and Drop in Angular TabStrip

    Learn about drag and drop operations in TabStrip component for Angular. Presents information on how you can reorder tabs during run time, including how to handle different events.

  • Overview of IntegralUI TabStrip for Angular

    An overview of features included in TabStrip component for Angular. IntegralUI TabStrip is a fully customizable native angular component that allows you to add tabs with custom content. You can create tabs in different shapes and place them in following orientations: top, right, bottom or left.

Tooltip


  • Overview of IntegralUI Tooltip for Angular

    An overview of features included in Tooltip directive for Angular. IntegralUI Tooltip allows you to add tooltip to any HTML element on demand dynamically during run-time.

TreeGrid


  • Add and Edit Rows Dynamically in Angular TreeGrid

    Learn how to add new rows on demand in Angular TreeGrid component. Each cell in a row is editable using an inline cell editor.

  • Copy Row in Angular TreeGrid

    Learn how to create a deep copy of rows in Angular TreeGrid component. A row that is cloned will have the same data as original object by a different identifier. This prevents creation of duplicates in the Grid.

  • DropDown List in Tree Grid Cells for Angular

    Learn how to create a custom dropdown list with checkboxes and add it to the cells in Tree Grid component for Angular. Using a dropdown editor you can change the value of each cell individually.

  • Excel Like Editing in Angular TreeGrid

    An example of a TreeGrid component for Angular, where you can edit grid cells in similar way like in Excel application. Using arrow and other keys, you can navigate among cells and quickly change their text.

  • Highlight Rows in Angular Tree Grid using CheckBox Column

    An example of Angular Tree Grid where you can highlight a row by clicking a checkbox in first column cells. Using column header or parent row checkbox, you can highlight multiple rows at once.

  • How to Add a Progress Bar to Cells in Angular Grid

    Learn how to add a progress bar to cells in Angular Grid component. You can set a specific column to show a progress bar in each cell and change the way it appears using custom CSS styles.

  • How to Add Rating Component to Grid Cells in Angular

    Learn how to create a Grid column where each cell has a rating component, in Angular. Rating component is represented by stars or bricks and allows you to change the rating value in each cell on the fly.

  • Load from Custom Data Source in Angular Grid

    Learn how to bind data fields from a custom data source to data fields in use by Angular Grid component. As an example, data is loaded from a JSON file where each object uses custom field names.

  • Overview of IntegralUI TreeGrid for Angular

    An overview of features included in TreeGrid component for Angular. IntegralUI TreeGrid displays hierarchical data structures in multiple columns. It has built-in virtualization that allows you to work with thousands of rows on client side. Supports drag drop operations, multi selection and it's fully customizable.

  • Scroll To Specific Row in Angular TreeGrid

    Make specific row visible in Angular TreeGrid by scrolling to it. If the row is deep within the tree hierarchy, all parent rows will expand in the process and the row will appear in center of current view.

  • Show Buttons on Row Hover in Angular Grid

    Learn how to display a custom button bar whenever a row is hovered in Angular Grid component. You can add any custom sets of buttons or other content in a template, that will appear on row hovering.

  • Show Scrollbars on Mouse Over in Angular Tree Grid

    An example of Angular Tree Grid where scrollbar is shown only when mouse hovers over the grid space, otherwise the scrollbar remains hidden.

TreeList


TreeView


  • Add Item Dynamically in Angular TreeView

    Learn how to create new items dynamically within the UI of the Angular TreeView. Each item can have command buttons that adds new child items and creates the tree structure on the fly.

  • Auto Expand on Drag Over in Angular TreeView

    This demo shows how to enable auto expand option in Angular TreeView. When this option is active, whenever an item is dragged over some target item it will automatically expand the item after a minor delay.

  • Change Indent in Angular TreeView

    This demo shows how to change the indent value between parent and child items in Angular TreeView. To remove the indentation, set the indent value to 0 and the TreeView will appear as flat expandable list.

  • Context Menu with Edit Options for Angular TreeView

    Angular TreeView and Context Menu with edit options example. You can edit, cut copy or paste items using a custom context menu.

  • Angular TreeView Drag and Drop Events

    A detailed information with examples about handling drag and drop events in TreeView for Angular. You can handle drag drop on enter, over, drop and leave.

  • Drag Drop Items Between Two TreeViews in Angular

    This demo shows how to drag drop items from one TreeView to another in Angular 2.You can set whether items can be dragged or dropped on general level for both tree views.

  • How to Add CheckBox to Items in Angular TreeView

    Learn how to add a check box to each item in Angular TreeView component. Whenever an item or its checkbox is clicked, values of checkboxes in parent and child items are also updated. This is called cascading changes to checkbox values.

  • How to Hide Unrelated Parent Items in Angular TreeView

    An example of Angular TreeView component in compact view, showing only closely related items. Visible tree hierarchy shows only the selected item, its children and parents, while hiding all other unrelated items.

  • Items with ComboBox in Angular TreeView

    Learn how to add a CombBox to each item in Angular TreeView component. Whenever item is clicked, the underlined text is replaced by a combo box where you can choose another value.

  • Load Data in Angular TreeView from a Custom JSON File

    A demo, explains how to populate the Angular TreeView using JSON file as a data source. You will learn how to bind the custom data fields with the ones used by the tree view.

  • Load Data on Demand in TreeView for Angular

    Learn how to load data on demand in TreeView component for Angular. The example shows loading animation when new data is loaded from a remote JSON file into the specified item.

  • Overview of IntegralUI TreeView for Angular

    An overview of features included in TreeView component for Angular 2. IntegralUI TreeView displays data in a tree hierarchy and allows reordering during run-time using drag drop operations.

  • Scroll To Specific Item in Angular TreeView

    This demo shows how to scroll to specific item in Angular TreeView. The item will appear in center of current view. An easy way to scroll to selected item.

  • Select Multiple Items in Angular TreeView

    An example that shows different selection options in TreeView component for Angular. To select multiple items use CTRL or SHIFT keys. In addition, you can prevent selection using events.

  • Prevent Expand/Collapse of Items in Angular TreeView

    Learn how to lock items in Angular TreeView and prevent them from expanding or collapsing. Each item displays a command button on right side which determines whether the item is locked or not.

Each article provides detailed information about the topic and a demo app that you can edit it on StackBlitz.