Logos and positioning.

Default Grid logo placement, Pro logo removal, and custom branding.

Quick overview

Review the default Syidax logo placement and use Pro entitlement to remove it or replace it with your service logo.

Try it yourself

Inspect default placement
In the preview below, verify that the logo occupies a dedicated bottom-right area without overlapping cells.
Compare logo modes
Compare Default logo, Remove, and Custom logo beneath the preview. Custom logos accept PNG, JPEG, or WebP files.
Restore initial settings
Reset restores the default logo. Verify it in both light and dark themes.

Expected results

The preview and brandLogo code update to match the selected logo setting.

There is no position setting. Removal and replacement require Pro entitlement; selected files are used only in this browser preview.

Useful terms

brandLogo: A setting specifying the default logo, none, or an image data URL.
data URL: A format embedding image data in a string.

Using this feature in your product requires the Pro runtime and a valid license.

Default logo and placement

The default Syidax symbol and wordmark appear in a dedicated bottom-right area. They do not overlap cells, pagination, or the status bar, or obstruct pointer and keyboard interaction.

Grid logo placement is fixed. No position property is provided. brandLogo can be omitted or set to an empty string to show the default logo, with colors adjusted automatically to the theme.

Preview and source code

Logo

Loading preview.

Complete code for the current settings

<sy-grid id="orders"></sy-grid>
<script type="module">
import '@syidax/advanced/css/grid';
import { defineCustomElement } from '@syidax/advanced/components/sy-grid.js';
defineCustomElement();
await customElements.whenDefined('sy-grid');
const grid = document.querySelector('#orders');
Object.assign(grid, {
  height: 280,
  theme: "alpine",
  locale: "en",
  brandLogo: "",
  getRowId: row=>row.id,
  defaultColDef: { "sortable": true, "resizable": true },
  columnDefs: [{ "field": "product", "headerName": "Products", "width": 200 }, { "field": "quantity", "headerName": "Quantity", "width": 120, "editable": true, "editor": "number" }],
  rowData: [{ "id": "A-001", "product": "Atlas Sensor", "quantity": 24 }, { "id": "A-002", "product": "Beacon Lite", "quantity": 36 }, { "id": "A-003", "product": "Cipher Pro", "quantity": 18 }]
});
</script>

Pro customization PRO

grid.branding entitlement lets you set brand-logo="none" to remove the logo, or pass an image data URL to brandLogo to replace it. Without valid entitlement, the default logo remains and the licenseFeatureRefused event is emitted.

// Use after registering the Pro package and grid.branding entitlement.
grid.brandLogo = 'none';

// Restore the default logo
grid.brandLogo = '';

// Convert a local file to a data URL for a custom logo
function setLogo(grid, file) {
  if (!['image/png', 'image/jpeg', 'image/webp'].includes(file.type) || file.size > 100 * 1024) {
    throw new Error('Choose a PNG, JPEG, or WebP file up to 100 KB.');
  }
  const reader = new FileReader();
  reader.addEventListener('load', () => { grid.brandLogo = String(reader.result); });
  reader.readAsDataURL(file);
}

Use PNG, JPEG, or WebP images up to 100 KB. SVG and external image URLs are unsupported. Selected files are used only in this browser's preview and code. How to register a Pro license