Demos

[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/

[Markov]

Hi,

The demo i sent you shows how to render components inside the table cells. We do not have a specific ready-made example for a button inside a table cell, but you can follow the same approach as in the provided example.

Regards,
Markov

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

[Markov]

Hi,

The smart-table is not like the native table html tag. It has differerent API and functionality. Please, refer to the demos and docs about Smart.Table in order to learn how to use it – https://www.htmlelements.com/docs/table/ and https://www.htmlelements.com/demos/table/overview/

Regards,
Markov

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

[Markov]

Hi,

If you need to disable the editing of a given column, set allowEdit: false to that column.

Best regards,
Markov

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

[Markov]

Hi,

We have a demo which shows how to add custom content in the cells of the Table component. Please, check this https://www.htmlelements.com/demos/table/bootstrap-integration/

Regards,
Markov

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

[Markov]

Hi,

We tested this example and unfortunately, we could not reproduce the reported behavior with the latest version of Smart UI.

Best regards,
Markov

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

[Markov]

Hi,

You can try this:

import React, { useRef, useEffect } from "react";
import { Grid } from "smart-webcomponents-react/grid";
import "smart-webcomponents-react/source/styles/smart.default.css";

function App() {
  const gridRef = useRef(null);

  useEffect(() => {
    const dataAdapter = new window.Smart.DataAdapter({
      virtualDataSourceLength: 1000, // Total number of records (can be updated dynamically)
      virtualDataSource: function (resultCallbackFunction, details) {
        const { pageIndex, pageSize, sortColumns } = details;
        const sort = sortColumns.map(sc => <code>${sc.dataField},${sc.sortOrder}</code>).join(';');

        fetch(<code>/users?page=${pageIndex}&size=${pageSize}&sort=${sort}</code>)
          .then(response => response.json())
          .then(data => {
            resultCallbackFunction({
              dataSource: data.content,
              virtualDataSourceLength: data.totalElements
            });
          });
      },
      dataFields: [
        'id: number',
        'name: string',
        'age: number'
      ]
    });

    gridRef.current.dataSource = dataAdapter;
  }, []);

  return (
    <Grid
      ref={gridRef}
      paging={{ enabled: true, pageSize: 10 }}
      sorting={{ enabled: true }}
      columns={[
        { label: 'ID', dataField: 'id', width: 50 },
        { label: 'Name', dataField: 'name' },
        { label: 'Age', dataField: 'age', width: 80 }
      ]}
    />
  );
}

User.java

import jakarta.persistence.*;

@Entity
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

private String name;
private int age;

public User() {}

public User(String name, int age) {
this.name = name;
this.age = age;
}

// Getters and Setters
public Long getId() { return id; }
public String getName() { return name; }
public int getAge() { return age; }

public void setId(Long id) { this.id = id; }
public void setName(String name) { this.name = name; }
public void setAge(int age) { this.age = age; }
}`

UserRepository.java

import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User, Long> {}

UserController.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.*;
import org.springframework.web.bind.annotation.*;

import java.util.*;

@RestController
@RequestMapping("/users")
@CrossOrigin(origins = "*")
public class UserController {

    @Autowired
    private UserRepository repo;

    @GetMapping
    public Map<String, Object> getUsers(
            @RequestParam int page,
            @RequestParam int size,
            @RequestParam(required = false, defaultValue = "id,asc") String sort
    ) {
        String[] parts = sort.split(",");
        Sort.Direction direction = Sort.Direction.fromString(parts[1]);
        String field = parts[0];

        Pageable pageable = PageRequest.of(page, size, Sort.by(direction, field));
        Page<User> result = repo.findAll(pageable);

        Map<String, Object> response = new HashMap<>();
        response.put("content", result.getContent());
        response.put("totalElements", result.getTotalElements());

        return response;
    }
}

DataSeeder.java

import org.springframework.boot.CommandLineRunner;
import org.springframework.stereotype.Component;
import org.springframework.beans.factory.annotation.Autowired;

@Component
public class DataSeeder implements CommandLineRunner {
    @Autowired
    private UserRepository repo;

    @Override
    public void run(String... args) {
        if (repo.count() == 0) {
            for (int i = 1; i <= 100; i++) {
                repo.save(new User("User " + i, 20 + (i % 10)));
            }
        }
    }
}

DemoApplication.java

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

Hope this helps.

Best regards,
Markov

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

[Author]

Posts