JS API

Получение экземпляра грида

import {Type} from 'main.core';

const grid: BX.Main.grid = BX.Main.gridManager.getById('MY_GRID_ID')?.instance;
if (Type.isObject(grid))
{
	// use API here
}

Основные методы

Работа с коллекцией строк

import {Type} from 'main.core';

const grid: BX.Main.grid = BX.Main.gridManager.getById('MY_GRID_ID')?.instance;
if (Type.isObject(grid))
{
	// Обертка над коллекцией строк 
	const rowsCollectionWrapper: BX.Grid.Rows = grid.getRows();
	
	// Список всех строк, включая шапку и подвал
	const rowsList: Array = rowsCollectionWrapper.getRows();

	// Строки тела таблицы
	const bodyRowsList: Array = rowsCollectionWrapper.getBodyChild();

	// Выбранные строки 
	const selectedRowsList: Array = rowsCollectionWrapper.getSelected();
	
	// Идентификаторы выбранных строк 
	const selectedRowsIdsList: Array = rowsCollectionWrapper.getSelectedIds();

	// Получение экземпляра строки по ID
	const row: Array = rowsCollectionWrapper.getById('myRowId');

	// Получение экземпяра строки по ссылке на ноду
	const row2: Array = rowsCollectionWrapper.get(rowNode);
	
	// Выбрать все строки
	void rowsCollectionWrapper.selectAll();

	// Отменить выбор всех строк
	void rowsCollectionWrapper.unselectAll();

	// Включить инлайн-редактирование
	void rowsCollectionWrapper.editSelected();

	// Отключить инлайн-редактирование
	void rowsCollectionWrapper.editSelectedCancel();
}

Добавление и обновление строк, показ заглушки (Без перезагрузки)

import {Type} from 'main.core';

const grid: BX.Main.grid = BX.Main.gridManager.getById('MY_GRID_ID')?.instance;
if (Type.isObject(grid))
{
	// Обертка 
	const gridRealtime: BX.Grid.Realtime = grid.getRealtime();
	
	// Добавление новой строки 
	gridRealtime.addRow({
	id: 10,
	insertBefore: 3,
	columns: {
		colId1: 'Column 1 content',
		colId2: 'Column 2 content',
		colId3: 'Column 3 content',
	},
	actions: [
		{id: 1, text: 'My Action', onclick: 'callMyAction()'},
		],
	});

	// Доступные параметры новой строки
	type AddRowOptions = {
		id: number | string,
		actions?: Array<{[key: string]: any}>,
		columns?: {[key: string]: any},
		append?: true,
		prepend?: true,
		insertBefore?: number | string,
		insertAfter?: number | string,
		animation?: boolean,
		cellActions?: Array<{
			'class': Array<$Value | $Value>,
			events?: {[eventName: string]: (BaseEvent) => void},
			attributes?: {[key: string]: any},
		}>,
	};

    // Добавление строки со счетчиками 
	gridRealtime.addRow({
		...,
		counters: {
			columnId: {
				type: BX.Grid.Counters.Type.LEFT_ALIGNED,
				color: BX.Grid.Counters.Color.DANGER,
				value: 77,
				events: {
					click: console.log,
				},
				'class': 'my-custom-counter-class',
			},
		},
	});
	
	// Добавление/обновление счетчиков в существующей строке 
	const row: BX.Grid.Row = grid.getRows().getById(rowId);
	row.setCounters({
		columnId: {
			type: BX.Grid.Counters.Type.LEFT_ALIGNED,
			color: BX.Grid.Counters.Color.DANGER,
			value: 77,
		},
	});
	
	// Заглушка по умолчанию (Нет данных)
	gridRealtime.showStub();

	// Заглушка по дефолтному шаблону заголовок + описание
	gridRealtime.showStub({
		content: {
			title: 'Текст заглушки',
			description: 'Описание',
		}
	});

	// Кастомная заглушка 
	gridRealtime.showStub({
		content: '<div ...>...</div>', // string | HTML | Element
	});
}