LIDOR SYSTEMS

Advanced User Interface Controls and Components

Articles and Tutorials

In this section you can find a comprehensive set of articles and tutorials on how to use our products more effectively. If you want to write your own article to share your experience with other developers or you have specific feedback on what you would like to be elaborated, feel free to contact our support team by e-mail at support@lidorsystems.com.

21 Feb 2020

Breadcrumb with Toolbar Buttons in One Line

Learn how to place a breadcrumb with toolbar web component in line in Angular, React and Vue. The toolbar has buttons and a separator placed on the right side. Whenever the component resizes, the breadcrumb automatically changes and shows only the last visible items from the current path.

14 Feb 2020

Overview of IntegralUI Toolbar - Web Component

An overview of features included in Toolbar component for Angular, React and Vue. IntegralUI Toolbar is a fully customizable native web component that displays a collection of different editor types in one line. Each editor is fully customizable via CSS..

12 Feb 2020

Overview of IntegralUI DropDownButton - Web Component

An overview of features included in DropDownButton component for Angular, React and Vue. IntegralUI DropDownButton is a fully customizable native web component that represents a button with option to show a dropdown menu. You can change the direction at which the dropdown menu will open: left, right, above or below.

12 Feb 2020

Overview of IntegralUI NumericUpDown - Web Component

An overview of features included in Numeric UpDown component for Angular, React and Vue. IntegralUI NumericUpDown is a fully customizable native angular component that displays a numeric value and allows you to change it within a range of defined minimum and maximum values.

10 Feb 2020

Overview of IntegralUI ColorPicker - Web Component

An overview of features included in ColorPicker component for Angular, React and Vue. IntegralUI ColorPicker is a fully customizable native angular component that allows the user to select a color by using a drop-down panel with color palette and slider.

07 Feb 2020

Overview of IntegralUI AutoComplete - Web Component

An overview of features included in AutoComplete component for Angular, React and Vue. IntegralUI AutoComplete is a fully customizable native web component that represents a text box with a dropdown list where you can choose among suggested options. You can filter the option list by typing into the text box.

30 Jan 2020

Overview of IntegralUI PopOver - Web Component

An overview of features included in PopOver component for Angular, React and Vue. IntegralUI PopOver is a native web component that displays custom HTML content over specified element.

29 Jan 2020

Overview of IntegralUI Dialog - Web Component

An overview of features included in Dialog component for Angular, React and Vue. IntegralUI Dialog is a fully customizable native web component that displays a modal window. When dialog is visible, user interaction with all other elements on the page is suspended, except for the dialog content.

23 Jan 2020

Grid Rows with Custom Toolbar on Mouse Over

An example, show a toolbar when row is hovered in Grid, a web component for Angular, React and Vue. You can choose when toolbar will appear: on mouse over or on row selection.

21 Jan 2020

Grid Columns with Multi Level Headers

Learn how to show multi level headers in Grid columns, a web component for Angular, React and Vue. Each column can display headers in multiple levels with custom content and show header title in multiple lines.

13 Jan 2020

Show Toolbar on Mouse Over in TreeView

Learn how to show a toolbar to each item when hovered or selected in TreeView, a web component for Angular, React and Vue. You can choose when toolbar will appear: on mouse over, on item selection, in both cases or the toolbar will remain hidden.

10 Jan 2020

Overview of IntegralUI Breadcrumb - Web Component

An overview of features included in Breadcrumb component for Angular, React and Vue. IntegralUI Breadcrumb is a fully customizable native web component used for navigation, where each item can have a link that is automatically separated.

10 Jan 2020

Overview of IntegralUI Slider - Web Component

An overview of features included in Slider component for Angular, React and Vue. IntegralUI Slider is a fully customizable native web component that allows changes to a numeric value within a range of defined minimum and maximum values.

08 Jan 2020

Overview of IntegralUI SideBar - Web Component

An overview of features included in SideBar component for Angular, React and Vue. IntegralUI SideBar is a fully customizable native web component that allows you to add a custom content panel that appears by sliding from page side over main content.

26 Nov 2019

Overview of IntegralUI DatePicker for Angular

An overview of features included in DatePicker component for Angular. IntegralUI DatePicker is a fully customizable native angular component that allows the user to select a date by using a drop-down calendar.

26 Nov 2019

Overview of IntegralUI Calendar for Angular

An overview of features included in Calendar component for Angular. IntegralUI Calendar is a fully customizable native angular component that allows you to select a date using a monthly calendar display.

18 Nov 2019

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.

18 Nov 2019

Overview of IntegralUI CheckBox for Angular

An overview of features included in Check Box component for Angular. IntegralUI CheckBox is a fully customizable native angular component that represents a check box.

18 Nov 2019

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.

04 Nov 2019

Overview of IntegralUI ProgressBar 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.

28 Oct 2019

How to Fix Columns on Left or Right Side in Angular Grid

Learn how to fix columns in Angular Grid to left and/or right side using a dropdown button in column header. You can dynamically change the side at which a grid column is fixed by selecting an option from a custom dropdown menu.

21 Oct 2019

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.

14 Oct 2019

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

08 Oct 2019

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).

30 Sep 2019

Angular ListView with Data from a Custom JSON File

Explains how to populate the Angular ListView using custom JSON file as a data source. A demo is available that shows how to map data fields with the ones used by the list view.

27 Feb 2019

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.

27 Feb 2019

Data Binding and Loading from JSON 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.

22 Feb 2019

How to Use the Rating Editor in Grid Cells

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.

19 Feb 2019

How to Edit Numbers in Grid Cell

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.

19 Feb 2019

Apply a TextBox to Grid Cells

An example 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.

13 Feb 2019

Display Multiple Images in Single Grid Cell

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.

13 Feb 2019

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.

05 Feb 2019

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.

05 Feb 2019

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.

28 Jan 2019

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.

23 Jan 2019

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.

23 Jan 2019

Drag and Drop Events in Angular List View

Learn how to handle events fired during item drag and drop in Angular List View component. Information on how to handle events on drag over, drop, drag enter or leave.

22 Jan 2019

ListBox Drag and Drop General Information

Learn about drag and drop operations in ListBox component for Angular. Presents information on how drag and drop items within the same or to other components and how to handle different events.

22 Jan 2019

Drag and Drop Multiple Items in Angular ListBox

An example of drag drop operation where multiple items are moved within Angular ListBox component. You can also move multiple items to other components, like a simple list.

21 Jan 2019

How to Handle Drag and Drop Events in Angular ListBox

Learn how to handle events that occur during item drag and drop in Angular ListBox component. Detailed explanation of supported drag drop events.

21 Jan 2019

Drag and Drop between Angular ListBox and ListView

In this example, you can drag and drop items between ListBox and ListView components for Angular . By selecting one or multiple items and using drag drop, you can reorder items in both components during run-time.

18 Jan 2019

Item Copy with Drag and Drop in Angular ListBox

Learn how to copy an item during drag and drop in Angular ListBox component. You can copy one or more multiple items on drop at target location.

14 Jan 2019

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.

23 Apr 2018

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.

20 Apr 2018

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.

19 Apr 2018

Overview of IntegralUI Rating for Angular

An overview of features included in Rating component for Angular. IntegralUI Rating is a fully customizable native angular component that visualizes ratings.

17 Apr 2018

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.

12 Apr 2018

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.

11 Apr 2018

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.

20 Feb 2018

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.

19 Feb 2018

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.

08 Feb 2018

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.

06 Feb 2018

Angular ContextMenu with Custom Content

An example of a context menu for Angular, where some menu options have custom HTML elements. Using templates, you can add any HTML element or Angular component to each menu item.

24 Jan 2018

Excel Like Editor 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.

23 Jan 2018

Disable a Menu Item in Angular Context Menu

Learn how to disable menu items in ContextMenu for Angular. Each menu item can be disabled based on custom conditions.

18 Jan 2018

Items with Custom CheckBox in Angular ListView

An example of a ListView component for Angular, where each item has a CheckBox. Select items in ListView via a custom checkbox.

17 Jan 2018

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.

17 Nov 2017

Show/Hide Columns in Angular Grid

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

15 Nov 2017

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.

08 Nov 2017

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.

07 Nov 2017

Drag Drop between Custom Angular Components

Learn how to use the IntegralUI DragDrop Service to drag and drop objects between custom Angular components. This service provides functions that you can use to store and retrieve data during drag drop operations between angular components or HTML elements.

30 Oct 2017

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.

27 Oct 2017

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.

23 Oct 2017

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.

20 Oct 2017

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.

19 Oct 2017

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.

18 Oct 2017

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.

13 Oct 2017

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.

12 Oct 2017

Load Thousands of Records in Angular ListView

Shows how to load thousands of records in Angular ListView component. Using virtualization, you can populate the ListView with large data and work in the client.

09 Oct 2017

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.

21 Aug 2017

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.

18 Aug 2017

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.

16 Aug 2017

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.

22 May 2017

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.

19 May 2017

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.

17 May 2017

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.

15 May 2017

Drag Drop Items Between Two TreeViews in Angular

A demo showing 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.

12 May 2017

CheckBox in Header of Angular Accordion

Learn how to add a checkbox to the header of each group in Accordion component for Angular. Whenever checkbox is clicked, the group will become locked and can't no longer expand.

10 May 2017

How to Create Custom Header for Angular Accordion

Learn how to create custom header for groups in Angular Accordion. Group header contains an icon, title in two lines and command buttons on right for editing and deleting of groups during run-time.

08 May 2017

How to Add a Tooltip to Angular Accordion

Learn how to add a tooltip to each group in Accordion component for Angular 2.Example shows usage of Tooltip directive that is attachable to any HTML element or Angular component.

25 Apr 2017

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.

14 Apr 2017

Add Group Dynamically with Context Menu in Angular Accordion

Learn how to add a new group dynamically to Accordion component in Angular 2, using a context menu.

12 Apr 2017

Angular Tabs in Different Colors

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

10 Apr 2017

Selection Options in ListBox for Angular 2

There are four selection options in ListBox for Angular 2. This allows you to select one or multiple items, using mouse and keyboard CTRL or SHIFT keys.

03 Apr 2017

Load Data on Demand in TreeView for Angular 2

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

22 Feb 2017

Overview of IntegralUI TreeGrid for Angular 2

An overview of features included in TreeGrid component for Angular 2. 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.

22 Feb 2017

Overview of IntegralUI Grid for Angular 2

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.

25 Jan 2017

Overview of IntegralUI SplitContainer for Angular 2

An overview of features included in SplitContainer component for Angular 2. IntegralUI SplitContainer consists of two resizable panels separated by a splitter with tabs and command buttons.

25 Jan 2017

Overview of IntegralUI Splitter for Angular 2

An overview of features included in Splitter component for Angular 2. IntegralUI Splitter allows you to resize two blocks of elements during run-time.

25 Oct 2016

Overview of IntegralUI Tooltip for Angular 2

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

24 Oct 2016

Overview of IntegralUI Paginator for Angular 2

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

21 Oct 2016

Overview of IntegralUI SlideBar for Angular 2

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

20 Sep 2016

Overview of IntegralUI ContextMenu for Angular 2

An overview of features included in ContextMenu component for Angular 2. IntegralUI ContextMenu allows you to attach a context menu to any HTML element or Angular component.

20 Sep 2016

Overview of IntegralUI Menu for Angular 2

An overview of features included in Menu component for Angular 2. IntegralUI Menu allows you to create static and dynamic menus for your web pages.

19 Sep 2016

Overview of IntegralUI ListView for Angular 2

An overview of features included in ListView component for Angular 2. IntegralUI ListView displays data in horizontal or vertical layout, and allows reordering during run-time using drag drop operations.

23 Aug 2016

Overview of IntegralUI TreeView for Angular 2

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.

18 Aug 2016

Overview of IntegralUI ListBar for Angular 2

An overview of features included in ListBar component for Angular 2. IntegralUI ListBar represents a list of expandable groups with items, either horizontally or vertically.

15 Aug 2016

Overview of IntegralUI TreeList for Angular 2

An overview of features included in TreeList component for Angular 2. IntegralUI TreeList allows you to navigate through tree hierarchy showing only one list at a time.

25 Jul 2016

Overview of IntegralUI ListBox for Angular 2

An overview of features included in ListBox component for Angular 2. IntegralUI ListBox allows you to present list of custom elements and arrange them dynamically using advanced drag drop operations.

15 Jul 2016

Overview of IntegralUI Range for Angular 2

An overview of features included in Range directive for Angular 2. 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.

14 Jul 2016

Overview of IntegralUI Frame for Angular 2

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

20 Jun 2016

Overview of IntegralUI TabStrip for Angular 2

An overview of features included in TabStrip component for Angular 2. 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.

16 Jun 2016

Overview of IntegralUI ComboBox for Angular 2

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

10 Jun 2016

Overview of IntegralUI GroupBox for Angular 2

An overview of features included in GroupBox component for Angular 2. IntegralUI GroupBox is a native angular component that represents a collapsible panel.

09 Jun 2016

Overview of IntegralUI Accordion for Angular 2

An overview of features included in Accordion component for Angular 2. IntegralUI Accordion is a fully customizable native angular component with advanced features.

26 Apr 2016

Filtering with Search Box in Angular Grid

Learn how to find rows that match specific value in AngularJS Grid. Use a Search Box to enter a custom text value and limit the search only for cells in specific columns.

25 Apr 2016

Load Accordion on Demand from JSON in AngularJS

An example on how to populate the AngularJS Accordion dynamically using a JSON file as a remote data source.

22 Apr 2016

Angular Grid with Custom Cell Templates

An example of AngularJS Grid where custom templates are used to add content in grid cells. Arrange custom HTML elements or other directives in different layouts for each column cells separately.

20 Apr 2016

Angular Grid as ListBox

An example of AngularJS Grid that act as a ListBox. Hide the column header and footer and use templates to add custom HTML content in grid cells.

18 Apr 2016

Custom Item Templates in AngularJS TreeView

Learn how to create custom template and use it to add custom content to each item in TreeView directive for AngularJS.

15 Mar 2016

Dark Colored Angular Context Menu

An example on how to create dark colored Angular Context Menu directive using custom CSS styles. The appearance of the context menu is changed using dark colors for its header, menu items and separators.

11 Mar 2016

How to Animate Visibility of Expand Boxes in AngularJS TreeView

Learn how to show expand boxes in AngularJS TreeView directive only when mouse cursor is over the tree view space, otherwise make them hidden. CSS animations make this process more visually appealing to the user.

10 Mar 2016

Multi Level Grouping in AngularJS Grid

An example on multi level data grouping against one or more columns during run time in AngularJS Grid directive. Changing the group order, will reorganize the grid data.

07 Mar 2016

Server Side Pagination in AngularJS Grid

An example on how to create server side pagination in AngularJS Grid directive. Populate the Grid with new data from a remote server on demand.

15 Jan 2016

Switch Between Tab Sets in AngularJS

Learn how to use a combo box to switch current tabs with another set of tabs in TabStrip directive for AngularJS. Each tab set links to an option in combo box that allows you to toggle between tabs.

14 Jan 2016

Angular Context Menu with CheckBox and Radio Button

Learn how to add a checkbox or radio button to Context Menu directive for AngularJS. Each menu item can display a check mark or radio button along with its label.

11 Jan 2016

Custom Angular Grid Appearance

An example on how to customize the appearance of Angular Grid directive using custom CSS styles. The Grid is changed using dark colors, but any other colors and styles can be applied.

06 Jan 2016

Move Items in Angular TreeView

An example on how to move items to a specific position in TreeView directive for AngularJS. One or multiple items can be moved to a different position within the same tree view.

04 Jan 2016

Change Column Visibility in Angular Grid

An example on how to show or hide columns in Grid directive for AngularJS. Each grid column can become either visible or hidden.

22 Dec 2015

TreeView like Toolbox in AngularJS

Learn how to remove indentation from TreeView in AngularJS and create a tree view that appear like toolbox. Each root item appears as a group header, while its child items are all aligned with zero indentation.

18 Dec 2015

Change Expand Box Appearance in AngularJS TreeView

An example showing how to change the appearance of expand box icon in TreeView directive for AngularJS. Use different icon for expand or collapse state of tree items, also set a locked icon when item is locked.

10 Dec 2015

Custom Tab Header with Close Button in AngularJS

An example on how to add a checkbox and close button to tab header in TabStrip directive for AngularJS. Each tab displays a checkbox on the left followed by the tab title and a close button on the right.

09 Dec 2015

Open Direction in Angular Accordion Directive

Change opening direction in Accordion directive for AngularJS. Learn how to create vertical or horizontal accordions.

08 Dec 2015

Custom Context Menu for Tabs in Angular

Learn how to add a custom context menu to tab header in TabStrip directive for AngularJS. Whenever a tab header is right clicked, show a vertical menu with custom options.

07 Dec 2015

Custom Accordion Header with Buttons in AngularJS

An example on how to create a custom header with buttons in Accordion directive for AngularJS. Each header displays a set of buttons hat when clicked perform a different action.

04 Dec 2015

Dynamically Populate Tabs from JSON in AngularJS

An example on how to load tabs and their content from a JSON file in AngularJS. Tabs are loaded dynamically using a JSON file as a remote data source.

03 Dec 2015

Tabs Orientation in AngularJS TabStrip Directive

Tabs orientation change in TabStrip directive for AngularJS. You can position tabs to appear horizontally on top or bottom side and vertically on left or right side.

02 Dec 2015

Add Context Menu to Angular Accordion

Learn how to add a custom context menu to Accordion Directive for AngularJS. Right Click on accordion header and show a vertical menu with custom options.

01 Dec 2015

How to Add/Remove Tabs in TabStrip for AngularJS

Explains how to create and add or remove tabs from code in AngularJS TabStrip directive. Several different events are fired during these operations, which can be handled in your code.

30 Nov 2015

Add or Remove Groups in Accordion for AngularJS

Learn how to add or remove groups in Accordion for AngularJS using several different methods. Whenever a new group is added or removed a corresponding event is fired.

19 Nov 2015

Angular Grid Columns Fixed on Side

An example on how to pin columns on left or right side in AngularJS Grid directive. Each column can be fixed on either left or right side.

12 Nov 2015

Column with Sorting Menu in Angular Grid

Learn how to add a sorting menu to column header in AngularJS Grid. Using a template, you can sort rows using a drop-down menu for each column.

23 Oct 2015

Add CheckBox to Column Header in AngularJS Grid

Shows how to add a checkbox in column header of AngularJS Grid directive. Display a custom checkbox in grid column using template.

19 Oct 2015

Infinite Scroll in AngularJS Grid

Explains how to create infinite scrolling in AngularJS Grid by loading new data on demand. Practically you can load small data sets on request and update the Grid.

16 Oct 2015

Loading Animation in AngularJS Grid

Display a loading animation in AngularJS Grid before data is loaded. Demonstration shows animations of circular and linear progress bars during data load and update of Grid directive.

15 Oct 2015

Column Templates in AngularJS Grid

Learn how to add custom content in column header and footer in AngularJS Grid using templates. Use the same template for all columns or create a different one for specific columns.

14 Oct 2015

Keyboard Navigation of Rows in AngularJS Grid

Shows how to navigate among rows using up/down arrow keys in AngularJS Tree Grid. Each row can also expand/collapse by using the left/right arrow keys. This demonstration also shows how to navigate among cells using keyboard.

09 Oct 2015

Grid Columns with DropDown Menu in AngularJS

Learn how to add a dropdown menu to column header in AngularJS Grid. Using a template, you can add a drop down menu to each column.

15 Sep 2015

Create a Copy Row and Drag Drop in Grid for AngularJS

Learn how to create a copy row in AngularJS Grid and move it to another Grid using drag drop. Move a duplicate row from one grid to another.

11 Sep 2015

Drag Drop Multiple Rows in AngularJS Grid

An example on how to drag drop multiple rows between two Grids in AngularJS. Select multiple rows and reorder them in the same grid or move them to another grid.

07 Sep 2015

Dynamic Resizing of Grid Columns in AngularJS

A demonstration on changing dynamically the width of AngularJS Grid directive, based on window size. Adjust columns to occupy the whole grid space using percentage values.

04 Sep 2015

Multi Level Context Menu in AngularJS

An example of multi level context menu built using AngularJS. Explains how to create a cascading context menu of multiple layers in AngularJS.

03 Sep 2015

InCell Editing in AngularJS Grid using Custom Editor Template

Learn how to create custom cell editors using templates in AngularJS Grid directive. This sample demonstrates InCell editing, where cell content is edited using custom template.

02 Sep 2015

Dynamically Create Menu from JSON in AngularJS

Shows how to create a menu dynamically from a JSON file in AngularJS. Whenever a menu is clicked or hovered a submenu will open with data from JSON file.

01 Sep 2015

Adding Rows Dynamically in AngularJS Grid

An example showing dynamic creation of new rows in AngularJS Grid directive, whenever an Add button is clicked. Each row will be generated showing a textbox in its cells where you can edit their value.

28 Aug 2015

Multi Level Vertical Menu in AngularJS

An example of multi level vertical menu created in AngularJS, with option to present a side menu in RTL layout.

26 Aug 2015

Custom DropDown Editor in AngularJS Grid

Create custom editor template and apply it to cells in AngularJS Grid as dropdown editor. This sample demonstrates how to edit cells using dropdown list as editor, generated from a template.

31 Jul 2015

AngularJS Grid with Custom Sorting

Learn how to sort rows in AngularJS Grid using built-in sorting or by creating custom sort operations. Whenever a column is clicked, it will sort rows in ascending or descending order.

29 Jul 2015

AngularJS TreeView Items with CheckBox

An example of AngularJS TreeView showing items with checkbox. Check boxes are fully customizable and can have tri-state values.

20 Jul 2015

How to Add CheckBox Column in AngularJS Grid

Learn how to add checkbox column in AngularJS Grid directive. Each cell can display fully customizable two or tri-state checkbox.

17 Jul 2015

How to Highlight Checked Rows in AngularJS Grid

A demonstration on how to highlight checked rows in AngularJS Tree Grid directive. Display a different color to mark checked rows.

16 Jul 2015

Filtering in AngularJS TreeView

An example on how to filter items in AngularJS TreeView using multiple different conditions in multiple AND / OR combinations, with option to create custom filter operations.

15 Jul 2015

Custom Filter Templates in AngularJS TreeGrid

Learn how to create a template that filters the AngularJS TreeGrid content. Each column can have a different filter template, set with multiple conditions combined using AND / OR operators.

14 Jul 2015

Sorting in AngularJS TreeView

Learn how to sort items in AngularJS TreeView using built-in sorting or by creating custom sort operations.

10 Jul 2015

AngularJS TreeGrid with Cascading Checkboxes

Learn how to update values of cascading checkboxes in AngularJS TreeGrid directive. Each row display a tri-state value check box which when clicked, its parent and child rows auto-update its check box value.

24 Apr 2015

Column with Fixed Width in TreeGrid for AngularJS

A demonstration on how to lock column width in TreeGrid directive for AngularJS, and prevent it from resizing.

24 Apr 2015

How to Change Expanding Column in TreeGrid for AngularJS

A demonstration on how to set which column will show cells with expand box in TreeGrid directive for AngularJS.

23 Apr 2015

Bind AngularJS TreeView to an Arbitrary Data Source

Learn how to bind an arbitrary data source to the TreeView for AngularJS. Bind data with custom names from local or remote data source to the TreeView directive.

10 Apr 2015

Column Reorder in TreeGrid for AngularJS

An example showing how to reorder columns in TreeGrid directive for AngularJS, by using drag drop. Various permissions allow you to determine whether column is reorder able.

09 Apr 2015

Drag Drop Between TreeView and TreeGrid AngularJS

A demonstration on drag drop of items from Tree View to TreeGrid and vice versa, in AngularJS. Also shows how to dynamically change the icon of items depending on whether there are children or not.

09 Apr 2015

Drag Drop Events with Custom Conditions in TreeGrid AngularJS

Learn how to set custom conditions in event handlers for drag drop events, TreeGrid for AngularJS.

06 Apr 2015

Export Data from AngularJS TreeGrid to JSON

A demo on how to export data of AngularJS TreeGrid directive to a JSON object. Demonstration displays JSON data in console window which shows all columns, rows and cells from a TreeGrid.

02 Apr 2015

How to Handle Selection Events in TreeGrid for AngularJS

Learn how to handle events that are fired whenever a column or row is selected in TreeGrid directive for AngularJS. Explains how to prevent selection of a row depending on custom conditions.

01 Apr 2015

Data Binding in TreeGrid for AngularJS

Learn how to bind an arbitrary data source to the TreeGrid for AngularJS. Use custom names in data binding between TreeGrid and local or remote data source.

01 Apr 2015

Column Alignment in TreeGrid for AngularJS

A demonstration on how to change alignment of column header, content and footer in TreeGrid directive for AngularJS. Align the content of cells in specified column horizontally: left, center or right.

26 Feb 2015

AngularJS Context Menu to Custom HTML Elements

An example on how to create a custom context menu and assign it to specific HTML element, using ContextMenu directive for AngularJS.

24 Feb 2015

How to Add/Remove Rows and Columns in TreeGrid for AngularJS

Learn how to add or remove rows and columns in TreeGrid for AngularJS using several different methods. Each operation is accompanied with events which can be handled in your code.

18 Feb 2015

Label Editing in TreeView AngularJS

Learn how to edit the text of tree items in AngularJS TreeView directive. Item text can be changed using a label editor which is shown on demand.

16 Feb 2015

How to Display Context Menu in TreeView AngularJS

An example on how to create and add a custom context menu to specific item in AngularJS TreeView directive. Each item can have its own separate context menu with custom action set in your code.

13 Feb 2015

Multiple Selection in AngularJS TreeView

Learn how to select multiple items in AngularJS TreeView directive. Selection can be done by using the mouse clicks or shortcut keys: CTRL and SHIFT key.

11 Oct 2014

.NET SplitContainer with Multiple Panels

An example on how to add multiple tabs in SplitContainer .NET control, and how to place them above or below splitter.

07 Oct 2014

A Horizontal List of Expander .NET Controls with Vertical Header

An example on how to create a list of Expander .NET controls with vertical header which expands their content horizontally from left to right.

03 Oct 2014

Export Tree Data to JSON Object in AngularJS TreeView

Learn how to serialize tree structure from AngularJS TreeView directive to a JSON object. Also explains how to choose which fields are being serialized.

19 Sep 2014

How to Place a Check Box in Header of jQuery Accordion

An example showing an Accordion widget where each header contains a check box and title. Whenever a checkbox is clicked, corresponding group will become enabled or disabled.

16 Sep 2014

jQuery Tabs with Check Box

An example showing how to add a check box in tab header in TabStrip widget for jQuery. Whenever the checkbox changes its value a corresponding tab will become enabled or disabled.

15 Sep 2014

Tri-State Check Boxes in jQuery TreeView

Learn how to add a check box with three state values to each item in TreeView for jQuery. Whenever a check box value is changed, corresponding checkboxes in parent and child also becomes updated.

09 Sep 2014

jQuery Tabs that Act and Look Like Radio Buttons

An example showing how to modify the appearance of tabs in TabStrip widget for jQuery, to look and act like radio buttons.

05 Sep 2014

Handling Events in Menu for jQuery

A demonstration on how to handle multiple events in Menu widget for jQuery, with sample code for menu clicks, open and close events.

03 Sep 2014

Remote Data Binding in Accordion for jQuery

Explains how to remotely bind data to the Accordion widget in jQuery, using a JSON file as a data source. An example on how to populate the Accordion with data on demand by using multiple remote data sources.

01 Sep 2014

How to Start/Stop Animations of Slides in SlideBar for jQuery

An example showing how to start and stop slide animations in SlideBar widget for jQuery.

29 Aug 2014

Handling Events in Accordion for jQuery

A demonstration on how to handle multiple events in Accordion widget for jQuery. Prevent selection and expansion on specific group by handling corresponding event. Handle clicks from right mouse button.

27 Aug 2014

Handling Drag Drop Events in TreeView for AngularJS

Learn how to handle different events during drag drop operation in TreeView for AngularJS. HTML5 drag and drop example with TreeView directive.

25 Aug 2014

Nested Accordions in jQuery and How to Create Them

An example in jQuery showing creation of multiple accordions placed within one another.

22 Aug 2014

How to Handle Events in TreeView for AngularJS

A demonstration of event handling in TreeView for AngularJS. Also shows how to stop an operation from executing by cancelling a specific event.

20 Aug 2014

Remote Data Binding - TabStrip for jQuery

Learn how to use remote data source to bind data to the TabStrip widget for jQuery.

18 Aug 2014

jQuery Accordion Header with Custom Buttons

Learn how to create an accordion in jQuery, where each group header contains multiple custom buttons. Dynamically add new buttons to accordion header.

15 Aug 2014

Expand Items on Mouse Hover or Text Click in TreeView for AngularJS

An example in AngularJS showing how to expand items in TreeView when mouse cursor hovers over item space. Also shows how to expand/collapse an item when its text is clicked.

13 Aug 2014

How to Bind Data to jQuery Menu Using Remote Data Source

Learn how to bind data to the Menu widget in jQuery, using a JSON file as a remote data source.

11 Aug 2014

How to Create Nested Tabs in jQuery

An example in jQuery showing how to create multiple tabs and place them under another tab, an example of nested tabs.

08 Aug 2014

How to Add or Remove Groups in Accordion for jQuery

Explains how to add or remove groups from code in Accordion for jQuery. The use of several built-in methods is demonstrated accompanied with corresponding events.

31 Jul 2014

Menu Item as Separator in jQuery

An example on how to create an item that will act as a separator in Menu for jQuery, using HTML5 or JavaScript code.

28 Jul 2014

How to Dynamically Create New Tabs in jQuery

Learn how to add dynamically new tabs in TabStrip widget for jQuery, using several different methods. Whenever a new tab is added or removed an event is fired which can be handled in your code.

20 Jul 2014

TreeView for AngularJS with Rich Content Items

Learn how to create items with rich content in TreeView for AngularJS using HTML5 elements. Use templates to create a custom layout for all items.

14 Jul 2014

Tabs with Close Button in TabStrip for jQuery

An example showing how to add a close button to each tab header in TabStrip widget for jQuery. Also shows how to remove a tab by clicking its close button.

14 Jul 2014

jQuery Tabs with Multi Line Text

Learn how to create tabs with text in multiple lines in TabStrip jQuery widget. Also shows how to create tab headers with rich content: combine text, images, hyperlinks in different layouts.

30 Jun 2014

Load on Demand in TreeView for AngularJS

An example showing how to populate the TreeView in AngularJS with data on demand using remote data source. Dynamically change the content of TreeView with custom data.

30 Jun 2014

How to Add/Remove Items in TreeView for AngularJS

Learn how to add or remove items in TreeView for AngularJS using several different methods. Each operation is followed by events which can be handled in your code.

30 Jun 2014

Expand/Collapse Items in TreeView for AngularJS

Explains different ways to expand or collapse items in TreeView for AngularJS. Shows how to expand item on hover or by clicking on its text.

27 Jun 2014

How to Search Among Items in TreeView for AngularJS

Learn how to find a specific item in TreeView using its id or text value.

27 Jun 2014

Handling Right Click Event in TreeView for AngularJS

Explains how to handle the right-click event in TreeView for AngularJS. Use this event to create custom action like showing context menus or custom popup windows.

27 Jun 2014

How to Change Scroll Position in TreeView for AngularJS

Learn how to manually change the position of scroll bar in TreeView for AngularJS. Also shows how to determine whether a scrollbar is visible or not.

07 Apr 2014

Inline Expand in Accordion jQuery

An example showing how to display content in single line and expand it horizontally using Accordion jQuery widget.

07 Apr 2014

Accordion jQuery with Headers in Different Colors

Learn how to show headers in different colors in Accordion jQuery widget, using custom CSS styles for each group header.

07 Apr 2014

Horizontal and Vertical Expand in Accordion jQuery

An example of Accordion jQuery widget where headers have text aligned vertically and expands its content horizontally.

01 Apr 2014

Using HTML5 Local Data Storage to Preserve State in TreeView jQuery

Learn how to preserve state of TreeView jQuery widget using HTML5 local data storage.

01 Apr 2014

Data Binding in TreeView jQuery

Learn how to bind data from a local or remote data source to a TreeView jQuery.

24 Mar 2014

How to Open New Tab in TabStrip jQuery

An example showing how to open a new tab in TabStrip, a jQuery widget. Also shows how to prevent tabs from opening.

24 Dec 2013

TabControl with Nested Tabs

An example on how to create TabControl where each tab can contain child tabs shown under its parent tab. Ability to nest tab pages inside other tab pages in TabControl .NET.

05 Nov 2013

Hide or Disable Tab Pages in TabControl .NET

Learn how to hide tab headers of tab pages in TabControl .NET. Also shows how to disable specific tab.

05 Nov 2013

AutoSize Column Width in ListView .NET

Explains how to resize column width automatically to fit its content in ListView .NET. Click on edge of column header to autofit its width or use autosize methods from code.

23 Sep 2013

TreeView with Multi-Color Text in Nodes

An example showing how to display text using multiple colors in single or multiple nodes in TreeView .NET.

23 Sep 2013

Create or Open New Tabs in TabControl

An example showing how to add a new tab button which when clicked will open a new tab in TabControl .NET.

20 Sep 2013

Add Expandable Groups in ListView .NET

An example showing how to create and add groups that can expand and collapse in ListView .NET control.

20 Sep 2013

Multi-Color Tabs in TabControl

Learn how to create tab pages in multiple colors in TabControl .NET, tab appearance like in Microsoft OneNote style.

01 Sep 2013

Load Data on Demand from XML File in TreeView .NET

An example on how to load data on demand and populate the TreeView .NET control using partial or full data serialization from/to XML files

01 Sep 2013

Load/Save Partial Data to XML files in ListView

An example on how to read and write partial data or a subset of items to XML files using built-in serialization techniques in ListView .NET control.

01 Sep 2013

XML Serialization of Custom Color Schemes in TreeListView .NET

An example on how to read or create custom color schemes and write them to XML files using built-in serialization techniques in TreeListView .NET control.

28 Aug 2013

In-Place Text Editing of SubItems in TreeListView

Learn how to use different in place editors to edit the label of subitems in TreeListView .NET control. The article explains the use of LabelEdit and TextControl as in place text editor.

27 Aug 2013

How to Increase Space Between Items in ListBox .NET

Demonstrates how to add space between items in ListBox .NET control using spacing, margin and padding.

16 Aug 2013

Show Ellipsis for Tabs with Longer Text in TabControl

Learn how to limit tab width by showing ellipses at the end of text in longer tabs in TabControl .NET. Also shows tabs in auto sized, compressed and justified display mode.

16 Aug 2013

Splitter with Expand/Collapse Buttons

Learn how to create a splitter with custom expand and collapse buttons and how to change orientation of splitter in SplitContainer .NET control.

16 Aug 2013

Space Between Tabs in TabControl .NET

Shows how to increase space between tab headers in TabControl .NET control using spacing and padding.

14 Aug 2013

Increase Space Between Columns in ListView

An example showing how to increase space between columns in ListView .NET control, and how to adjust the column width to fill remaining area.

14 Aug 2013

Add Image to Column Header

An example showing how to add or display a custom image to column header and align it to the right side before or after header text in ListView .NET control.

14 Aug 2013

Column Alignment in ListView .NET

An example showing how to set horizontal alignment of column text, subitems, header and footer in ListView .NET control. Also presents how to align text for single subitem.

12 Aug 2013

Expand Node on Hover or by Clicking on Node's Text

Demonstrates how to expand or collapse a node while mouse cursor hovers over its space or when node’s text is clicked in TreeView .NET control, WinForms.

12 Aug 2013

Show Different Image on Expand in TreeView

An example on how to show a different image when tree node is expanded or collapsed in TreeView .NET

12 Aug 2013

Click on Hyperlink to Expand Nodes in TreeView .NET

Demonstrates how to expand a node when hyperlink is clicked in TreeView .NET control.

12 Aug 2013

Show Child Nodes Above and Below Parent Node

Demonstrates how to display child nodes in upward direction when parent node expands in TreeView .NET control. Also shows how to expand/collapse all nodes using built-in methods.

30 Jul 2012

How to Add a Close Button to Tabs in TabControl

An example showing how to add a close button to the tabs in TabControl .NET, WinForms.

30 Jan 2012

How to Create Hierarchical Structure of Tab Pages

An example showing how to create a hierarchical structure of tab pages in TabControl .NET, WinForms.

06 May 2011

How to Create Items with Rich Content

An example showing how to create item with rich content using various objects like text, images, hyperlinks and custom controls and arrange them in custom layouts.

30 Apr 2011

How to Add Hyperlinks in TreeView .NET control

An example showing how to create or add a hyperlink to node in TreeView .NET Control.

27 Jan 2010

How to use animated gifs in TreeView .NET control

Provides information on how to start and stop animations of animated gifs in each node of IntegralUI TreeView .NET control.

19 Jan 2010

Custom Drop-Down Filter for Columns in TreeListView .NET

Explains how to create custom filtering in TreeListView control. In this particular example a column contains DateTime values and whenever a column is clicked, a popup window is shown which filters data using only selected DateTime value.

12 Jan 2010

Create custom sort operation in ListView .NET control

Provides information how to create custom sort operation in ListView .NET control. A class from ICompare interface is created which compares DateTime values for specific column and sort items depending on current sort order.

05 Mar 2009

Display Three State Checkboxes in TreeView .NET Control

Gives information on how to create and display tree node with three-state checkbox and how to automatically update the value of check boxes from the trigger node to all child and parent nodes. Also demonstrates how to handle AfterCheck event in IntegralUI TreeView control.

01 Oct 2008

Programmatically editing of tree nodes

Gives information how you can edit node labels during runtime by handling BeforeLabelEdit and AfterLabelEdit events, in IntegralUI TreeListView control.

01 Oct 2008

Columns with Fixed Width in ListView .NET

An example on how to fix column width and how to make some columns locked to the left or right side in ListView .NET control.

02 Jul 2007

ListView with Transparent Background

Learn how to set partial or full transparency to background of columns, items and subitems in ListView .NET control.

02 Jul 2007

ListView Items with Different Color

Learn how to display items in different colors in ListView .NET control. Even/odd rows show in alternate colors.

28 Nov 2005

Layout WinForms using Table

Explains how to use table layout engine to organize and order WinForms in tabular format using Page control.

21 Nov 2005

Create modern look User Interface

Explains the creation of modern looking user interface with Collector controls using color shemes, visual styles and themes.

15 Nov 2005

Performing Drag&Drop Operations

Demonstrates how to use the drag-drop operations with Collector controls. Both design-time and run-time drag-drop operations is supported for Bar, Group and Page controls.

07 Nov 2005

Description of Collector controls

Gives brief information on Collector library which contains three powerful controls with which you can group, arrange, manage and order custom controls that form your application. These controls in hierarchical order are Bar, Group and Page control.