Products

[admin]

Hi Rafa,

We confirm that there is an issue even in the current version(the version used in stackblitz is 9.2.22, the current one is 14). The issue which we have with filtering row in combination with server side model data binding is that the filtering row is not displayed. We will resolve this in the next release of the Grid component.

Best regards,
Peter Stoev

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

[admin]

Hi Cher Toggy,

With large data sets, we advice using load on demand either through scroll or paging. With load on demand with virtual scroll or paging, the initial load is the same as like loading 100 records – fast. Example with 100,000 records and virtual scroll with sort and filter enabled – https://www.htmlelements.com/demos/grid/virtual-scroll-sorting-filtering/. Similar example, but this time with Paging – https://www.htmlelements.com/demos/grid/virtual-paging-sorting-filtering/

Best regards,
Peter Stoev

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

[admin]

Hi,

Please, look at https://www.htmlelements.com/docs/window-css/. Scroll to the bottom of the page, where we have an example. I will also copy it here to show you how to apply CSS variables

<style>
        #window{
            --smart-window-header-background: #547284;
            --smart-window-background: #f5fafd;
            --smart-window-header-color: #f5fafd;
        }
</style>

Best regards,
Peter Stoev

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

[admin]

Hi Angel,

We followed the Excel-like behavior and Tab key does not enter a cell into edit mode. Instead it confirms the edit and moves the selection to the cell on the right and you can then start typing or press F2. Similar is the behavior of the Enter key, which confirms the edit and moves the selection to the cell below.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[admin]

Hi Rafa,

Thank you writing. It is currently not possible to re-create a form. After a form is created, you can set its value like form.value = some json object.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[admin]

Hi,

That is part of the Material styling. You can customize this by CSS – var(–smart-button-text-transform); CSS variable should be set to ”;
For the window, the var(–smart-window-footer-button-width) CSS variable controls the width of the buttons displayed in the Window’s footer.

Best regards,
Peter Stoev

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

[admin]

Hi,

It is currently not possible to export the grand total to Excel. We will create a feature request item for that functionality.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[admin]

Hi Javi,

You can use the –smart-scheduler-timeline-cell-height CSS variable to customize the cells height in Scheduler.

.smart-scheduler {
    --smart-scheduler-timeline-cell-height:30px;
}

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[admin]

Hi,

A built-in input in percentage is having that behavior, because the actual number is already a decimal. For example: the data value is 0.2 = 20%. In the Grid you will see and edit 20%, but when you get the value of the cell, it will be 0.2.

To achieve what you need, you can do the following:

  {
                    label: 'City2', dataType: 'number', cellsFormat: 'n2', editor: {
                        template: 'numberInput',
                        numberFormat: {
                            style: 'decimal',
                            minimumFractionDigits: 2
                        }
                    }, formatFunction(settings) {
                        settings.value = settings.value + '%';
                    }, dataField: 'City2', width: 120
                },

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[admin]

Hi,

– The cancelLabel and confirmLabel properties determine the texts of button labels.
– The window’s width and height are set in CSS

Best regards,
Peter Stoev

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

[admin]

Hi Cher Toggy,

This is a bug in the DataGrid. We added a work item about it. Workaround unfortunately is not available as in order to resolve this, we will need to modify the Grid’s code for handling date filtering in the filtering panel.

Thank you for the feedback!

Best regards,
Peter Stoev

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

[admin]

Hi Cher Toggy,

The format button is displayed only when you have Numeric columns in the Grid.

Best regards,
Peter Stoev

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

[admin]

Hi oliver.aldrian,

You do not need Grid.Rows. You need Grid.DataSource. In the current version 14 Grid.Rows = Grid.DataSource.

Best regards,
Peter Stoev

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

[admin]

Hi Oliver,

The property is called SummaryRow and each column has Summary property.

Example how to use it:

@page "/grid"

@using Smart.Blazor.Demos.Data
@inject WeatherForecastService ForecastService

<Example Name="Grid">
	<h1>Weather forecast</h1>

	<p>This component demonstrates fetching data from a service.</p>

	@if (forecasts == null)
	{
		<p><em>Loading...</em></p>
	}
	else
	{
		<Grid OnReady="GridReady" SummaryRow="summary" Sorting="@sorting" Appearance="@appearance" Selection="@selection" Style="width: 80%;">
			<Columns>
				<Column DataField="Date" Label="Date"></Column>
				<Column DataField="TemperatureC" Label="TemperatureC"></Column>
				<Column DataField="TemperatureF" Label="TemperatureF"></Column>
				<Column Summary="@columnSummary" DataField="Summary" Label="Summary"></Column>
			</Columns>
			<Rows>
				@foreach (var forecast in forecasts)
				{
					<Row>
						<Cell Content="@forecast.Date.ToShortDateString()"></Cell>
						<Cell Content="@forecast.TemperatureC"></Cell>
						<Cell Content="@forecast.TemperatureF"></Cell>
						<Cell Content="@forecast.Summary"></Cell>
					</Row>
				}
			</Rows>
		</Grid>
	}
</Example>

@code {
    string[] columnSummary = new string[] { "count" };

	GridSummaryRow summary = new GridSummaryRow() { Visible = true };
    GridSorting sorting = new GridSorting() { Enabled = true };
    GridAppearance appearance = new GridAppearance() { AlternationCount = 2 };
    GridSelection selection = new GridSelection()
    {
        Enabled = true,
        Mode = GridSelectionMode.Many,
        CheckBoxes = new GridSelectionCheckBoxes()
        {
            Enabled = true
        }
    };

    void GridReady(Grid grid)
    {
        var rows = grid.Rows;
        grid.SelectRows(new int[] { 0, 1, 2 });
    }
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

Best regards,
Peter Stoev

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

[admin]

Hi Oliver,

SelectRows expects an array of Row ids. The method’s description is Selects multiple rows by their ids. It will not work with row objects i.e. passing List will not work, passing the IDs in a List would be ok.

Example how to use SelectRows

@page "/grid"

@using Smart.Blazor.Demos.Data
@inject WeatherForecastService ForecastService

<Example Name="Grid">
	<h1>Weather forecast</h1>

	<p>This component demonstrates fetching data from a service.</p>

	@if (forecasts == null)
	{
		<p><em>Loading...</em></p>
	}
	else
	{
		<Grid OnReady="GridReady" SummaryRow="summary" Sorting="@sorting" Appearance="@appearance" Selection="@selection" Style="width: 80%;">
			<Columns>
				<Column DataField="Date" Label="Date"></Column>
				<Column DataField="TemperatureC" Label="TemperatureC"></Column>
				<Column DataField="TemperatureF" Label="TemperatureF"></Column>
				<Column Summary="@columnSummary" DataField="Summary" Label="Summary"></Column>
			</Columns>
			<Rows>
				@foreach (var forecast in forecasts)
				{
					<Row>
						<Cell Content="@forecast.Date.ToShortDateString()"></Cell>
						<Cell Content="@forecast.TemperatureC"></Cell>
						<Cell Content="@forecast.TemperatureF"></Cell>
						<Cell Content="@forecast.Summary"></Cell>
					</Row>
				}
			</Rows>
		</Grid>
	}
</Example>

@code {
    string[] columnSummary = new string[] { "count" };

	GridSummaryRow summary = new GridSummaryRow() { Visible = true };
    GridSorting sorting = new GridSorting() { Enabled = true };
    GridAppearance appearance = new GridAppearance() { AlternationCount = 2 };
    GridSelection selection = new GridSelection()
    {
        Enabled = true,
        Mode = GridSelectionMode.Many,
        CheckBoxes = new GridSelectionCheckBoxes()
        {
            Enabled = true
        }
    };

    void GridReady(Grid grid)
    {
        var rows = grid.Rows;
        grid.SelectRows(new int[] { 0, 1, 2 });
    }
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

Best regards,
Peter Stoev

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

[Author]

Posts