Demos

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

[Markov]

Hi Peter,

What you’re experiencing is controlled by the property: editing.addNewRow.autoCreate
When this property is true, the grid automatically adds a new empty row (dimmed) when the user scrolls down past the last row using the grid’s scrollbar or keyboard arrows. If you want to turn off this behavior, you should set it to false. This will stop the grid from adding new rows automatically on scrolling past the bottom.

Best Regards,
Markov

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

[Markov]

Hi,

The daterangeinput uses Intl.DateTimeFormat for dates formatting. More details on: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat. The dateFormat property of the DateRangeInput can be set to an object like {day: “number”, month: “number”, year: “number”}. For available list of properties, please check the tutorial from the link which was provided here.

Best regards,
Markov

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

[Markov]

Hi Dark Beccio,

The property overrides the default behavior and allows you to put a custom one. It is like replacing a list of rules with a blank one.

Best regards,
Markov

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

[Author]

Posts