Documentation

Legacy Grid (main.ui.grid)

This is a description for now-legacy component main.ui.grid and its parameters.

Description

Component (classes Bitrix\Main\Grid) displays information in a table. It is a system component.

It can be found in the folde /bitrix/components/bitrix/main.ui.grid.

Parameters

ParameterTypeDescription
GRID_IDstringGrid ID.
HEADERSarrayArray with table column titles.

Simple example of array

ROWSarrayArray with table values The key data passes array with cell data. and action Pass the array of actions by using the key actions. in the context menu.

Basic array example

TOTAL_ROWS_COUNTstringNumber of filtered elements in the total table.
SHOW_ROW_CHECKBOXESboolShow string checkboxes for multiple actions.
NAV_OBJECTobjectPagewise navigation object.
AJAX_MODEstringActivates ajax mode.
AJAX_IDstringAjax ID is sourced from filter component.
PAGE_SIZESarrayArray for selecting number of elements on page.
AJAX_OPTION_JUMPstringWhen user completes AJAX transition, jumps to start of component with this option enabled.
SHOW_CHECK_ALL_CHECKBOXESboolShows "Select all".
SHOW_ROW_ACTIONS_MENUboolShows action menu for table items.
SHOW_GRID_SETTINGS_MENUboolShows list settings button.
SHOW_NAVIGATION_PANELboolShows navigation panel.
SHOW_PAGINATIONboolShows page wise navigation button ("Previous", "All", "Next").
SHOW_SELECTED_COUNTERboolShows "Selected items".
SHOW_TOTAL_COUNTERbool Shows "Total items".
SHOW_PAGESIZEboolShows numbers of elements on page.
ACTION_PANELarrayEnables group actions panel (passes array with buttons and action).
SHOW_ACTION_PANELboolPermits showing group action panel The panel is displayed only when it is defined in the parameter ACTION_PANEL. .
ALLOW_COLUMNS_SORTboolParameter permits or prohibits column sorting via dragging (i. e. interchanging column positions using mouse).
ALLOW_COLUMN_RESIZEboolPermits or prohibits changing columns width.
ALLOW_HORIZONTAL_SCROLLboolPermits horizontal scrolling only.
ALLOW_SORTboolPermits sorting.
ALLOW_PIN_HEADERboolPermits pinning table header.
AJAX_OPTION_HISTORYboolBrowser buttons "Forward" and "Back" can be used when user executes AJAX transitions and this option is enabled.
ENABLE_COLLAPSIBLE_ROWSboolEnables collapsing/expanding rows.
ENABLE_FIELDS_SEARCHbool Enables filtering by field name.
HEADERS_SECTIONSarrayArray for field groupings in main.ui.filter as follows: 
array (
 0 =>
 array (
    'id' => 'DEAL',
   'name' => 'My name',
   'default' => true, - include all fields without associations into this section
   'selected' => true, - this section is displayed by default
 ),
 1 =>
 array (
   'id' => 'CONTACT',
   'name' => 'Контакт',
   'selected' => true,
 ),
 2 =>
 array (
   'id' => 'COMPANY',
   'name' => 'Компания',
   'selected' => true,
 ),
)

Starting from version 22.500.0 added option for pop-up hints for columns sections:

[
   'id' => 'PRODUCT',
   'name' => 'Product',
   'hint' => 'Product properties for displaying within the table', // pop-up hint text
   'hintInteractivity' => true, // if true, hint is interactive (you can highlight text, 
   // click on buttons inside the hint); if false, then removing the pointer from the '?' symbol, the hint disappears
   'hintHtml' => false, // if true, the hint text is displayed in the html format
   'selected' => true,
],

Example

<?
$grid_options = new Bitrix\Main\Grid\Options('report_list');
$sort = $grid_options->GetSorting(['sort' => ['ID' => 'DESC'], 'vars' => ['by' => 'by', 'order' => 'order']]);
$nav_params = $grid_options->GetNavParams();

$nav = new Bitrix\Main\UI\PageNavigation('report_list');
$nav->allowAllRecords(true)
    ->setPageSize($nav_params['nPageSize'])
    ->initFromUri();

$APPLICATION->IncludeComponent(
    'bitrix:main.ui.grid',
	'',
	[
	'GRID_ID' => 'report_list', 
    'COLUMNS' => [
		['id' => 'ID', 'name' => 'ID', 'sort' => 'ID', 'default' => true], 
        ['id' => 'DATE', 'name' => 'Date', 'sort' => 'DATE', 'default' => true], 
        ['id' => 'AMOUNT', 'name' => 'Total', 'sort' => 'AMOUNT', 'default' => true], 
        ['id' => 'PAYER_INN', 'name' => 'Payer INN', 'sort' => 'PAYER_INN', 'default' => true], 
        ['id' => 'PAYER_NAME', 'name' => 'Payer', 'sort' => 'PAYER_NAME', 'default' => true], 
        ['id' => 'IS_SPEND', 'name' => 'Operation type', 'sort' => 'IS_SPEND', 'default' => true], 
	], 
    'ROWS' => $list,
    'SHOW_ROW_CHECKBOXES' => true, 
    'NAV_OBJECT' => $nav, 
    'AJAX_MODE' => 'Y', 
    'AJAX_ID' => \CAjax::getComponentID('bitrix:main.ui.grid', '.default', ''), 
    'PAGE_SIZES' => [ 
        ['NAME' => "5", 'VALUE' => '5'], 
        ['NAME' => '10', 'VALUE' => '10'], 
        ['NAME' => '20', 'VALUE' => '20'], 
        ['NAME' => '50', 'VALUE' => '50'], 
        ['NAME' => '100', 'VALUE' => '100'] 
	], 
    'AJAX_OPTION_JUMP'          => 'N', 
    'SHOW_CHECK_ALL_CHECKBOXES' => true, 
    'SHOW_ROW_ACTIONS_MENU'     => true, 
    'SHOW_GRID_SETTINGS_MENU'   => true, 
    'SHOW_NAVIGATION_PANEL'     => true, 
    'SHOW_PAGINATION'           => true, 
    'SHOW_SELECTED_COUNTER'     => true, 
    'SHOW_TOTAL_COUNTER'        => true, 
    'SHOW_PAGESIZE'             => true, 
    'SHOW_ACTION_PANEL'         => true, 
    'ACTION_PANEL'              => [ 
        'GROUPS' => [ 
            'TYPE' => [ 
                'ITEMS' => [ 
                    [ 
                        'ID'    => 'set-type', 
                        'TYPE'  => 'DROPDOWN', 
                        'ITEMS' => [ 
                            ['VALUE' => '', 'NAME' => '- Select -'], 
                            ['VALUE' => 'plus', 'NAME' => 'Debit'], 
                            ['VALUE' => 'minus', 'NAME' => 'Credit'] 
                        ] 
                    ], 
                ], 
            ] 
        ], 
    ], 
    'ALLOW_COLUMNS_SORT'        => true, 
    'ALLOW_COLUMNS_RESIZE'      => true, 
    'ALLOW_HORIZONTAL_SCROLL'   => true, 
    'ALLOW_SORT'                => true, 
    'ALLOW_PIN_HEADER'          => true, 
    'AJAX_OPTION_HISTORY'       => 'N' 
	]
);?>

Adding buttons

To add buttons to ACTION_PANEL a class \Bitrix\Main\Grid\Panel\Snippet can be used allowing to quickly create a standard button or action for grid panel. For example:

// Create class instance:
$snippets = new \Bitrix\Main\Grid\Panel\Snippet();

// By using the suitable method we can get a finished button or action.
// Example for "Delete" button:
$removeButton = $snippets->getRemoveButton();


© «Bitrix24», 2001-2024
Up