Products

[Markov]

Hi,

Please, take a look at this Table documentation: https://www.htmlelements.com/docs/table/ It shows how to create a new react app with the Table component.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Sure, follow https://www.htmlelements.com/docs/gantt/ to get started. Then, connect to a REST API using Angular’s HttpClient

import { HttpClient } from '@angular/common/http';

tasks: any[] = [];

constructor(private http: HttpClient) {}

ngOnInit(): void {
  this.http.get<any[]>('https://your-api.com/gantt-data').subscribe(data => {
    this.tasks = data;
  });
}

hope this helps.

Regards,
Markov

Smart UI team
https://www.htmlelements.com/

[Markov]

Hi,

To customize the event rendering, please check this https://www.htmlelements.com/demos/scheduler/custom-event-render/

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Server-side rendering (SSR) is not supported for Smart Editor in React because it depends on browser-only APIs like window and document. However, the smart-webcomponents-react Editor component includes “use client” internally, which ensures it renders only on the client side. This means you can safely use Smart Editor in React SSR frameworks (like Next.js) without SSR issues, as it automatically disables server-side rendering for you

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Sure, you can dynamically add, remove and update tasks on demand. Please, take a look at this demo: https://www.htmlelements.com/demos/gantt/methods/

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Sure, you can customize the rendering. Please, take a look at https://www.htmlelements.com/angular/demos/kanban/kanban-custom-tasks-styling/

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Please, take a look at https://www.htmlelements.com/vue/demos/kanban/export/.

Hope this helps

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Smart UI allows defining each column’s width explicitly. You can mix:

%-based widths (relative to grid width)
auto (for content-based sizing)
Leave width undefined → grid will auto-distribute

Since you don’t know the total number of dynamic columns, use logic in JavaScript/TypeScript to calculate the remaining width and apply it evenly to the dynamic columns.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

The column id is the ‘dataField’ property which you set to the columns.

Best Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Invoke the getSelectedRowIndexes method.

const grid = document.querySelector(‘smart-grid’);
const result = grid.getSelectedRowIndexes();

Best Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

When you go to: https://www.htmlelements.com/forums/ There is a search input above the forums. You can use it.

[Markov]

Hi Duong,

Please, find below a full Blazor demo for this:

@page "/grid-basic"
@inject IJSRuntime JS

<style>
	body,
	html,
	app {
	height: 100%;
	}

	app {
	overflow: auto;
	}

	.content {
	height: calc(100% - 70px);
	}

	/* This is the CSS used in the demo */
	smart-grid {
	height: auto;
	width: 100%;
	}
</style>

<Grid Id="myGrid" DataSource="@Data" @ref="gridRef">
    <Columns>
        <Column Label="First Name" DataField="firstName" />
        <Column Label="Last Name" DataField="lastName" />
        <Column Label="Product" DataField="productName" Width="200" />
        <Column Label="Quantity" DataField="quantity" Width="100" />
        <Column Label="Unit Price" DataField="price" Width="100" CellsFormat="c2" />
        <Column Label="Total" DataField="total" CellsFormat="c2" />
    </Columns>
</Grid>

@code {
    public class CustomCellSettings
    {
        public object Value { get; set; }
    }
    private Grid gridRef;

    // Sample data
    private IEnumerable<object> Data = new List<object>
    {
        new { firstName = "John", lastName = "Doe", productName = "Phone", quantity = 3, price = 199.99, total = 599.97 },
        new { firstName = "Jane", lastName = "Smith", productName = "Laptop", quantity = 5, price = 999.99, total = 4999.95 },
        new { firstName = "Alice", lastName = "Brown", productName = "Tablet", quantity = 7, price = 299.99, total = 2099.93 }
    };

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("setGridCellCssRules", "myGrid");
        }
    }
}

and

    <style>
        .cell-class-1 {
            background-color: #fff3cd; /* Yellow-ish for value == 5 */
            font-weight: bold;
        }

        .cell-class-2 {
            background-color: #f8d7da; /* Light red for value < 5 */
        }

        .cell-class-3 {
            background-color: #d4edda; /* Light green for value > 5 */
        }
        smart-grid {
            --smart-check-box-default-size: 14px;
        }

            smart-grid .smart-input-overlay-on {
                display: none;
            }
    </style>
<script>
        window.setGridCellCssRules = function (gridId) {
            const grid = document.getElementById(gridId);

            if (!grid) return;

            grid.whenRendered(() => {
                 const quantityColumn = grid.columns.find(c => c.dataField === 'quantity');

                if (quantityColumn) {
                    quantityColumn.cellsCSSRules = {
                        'cell-class-1': function (settings) {
                            return settings.value === 5;
                        },
                        'cell-class-2': function (settings) {
                            return settings.value < 5;
                        },
                        'cell-class-3': function (settings) {
                            return settings.value > 5;
                        }
                    };
                }

                grid.refresh();
            })
        };
    </script>

[Markov]

Hi,

The localization and language settings are applied to the whole scheduler component. Please, refer to https://www.htmlelements.com/react/demos/scheduler/localization/ which shows how to localize the Scheduler component.

Best regards,
Markov

[Markov]

Hi,

Please, refer to https://www.htmlelements.com/docs/blazor-grid/ which shows how to conditionally format the Grid cells in blazor. The description and example are in the Format grid section.

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

If you experience a strange behavior, please share an online example which we can try and test with.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts