Demos

[admin]

Hi and thanks for trying our Blazor DataGrid,

I prepared a sample which shows how to use the Editing events.

@page "/grid-editing-events"

@using Smart.Blazor.Demos.Data
@using System.Text.Json;
@using System.Text.Json.Serialization;
@inject RandomDataService dataService

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

    app {
        overflow: auto;
    }

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

    /* This is the CSS used in the demo */
    @@media only screen and (max-width: 700px) {
        smart-grid {
            width: 100%;
        }
    }
</style>
<Example Name="Grid">
    <h1>Grid Cells Editing Events</h1>
    <p>
        Click on any cell to begin edit its value. To confirm the changes, press 'Enter' or click on another cell or outside the Grid. To cancel the changes, press 'Escape'.
    </p>

    @if (dataRecords == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <Grid @ref="grid" OnBeginEdit="BeginEditHandler" OnEndEdit="EndEditHandler" DataSource="dataRecords" Editing="@editing">
            <Columns>
                <Column DataField="FirstName" Label="First Name"></Column>
                <Column DataField="LastName" Label="Last Name"></Column>
                <Column DataField="ProductName" Label="Product"></Column>
                <Column DataField="Expired" Label="Expired" DataType="boolean" Template="@checkBoxEditor" Editor="@checkBoxEditor"></Column>
                <Column DataField="Quantity" Label="Quantity" DataType="number" Editor="@numberInputEditor" Align="HorizontalAlignment.Right" CellsAlign="HorizontalAlignment.Right"></Column>
                <Column DataField="Price" Label="Unit Price" DataType="number" Editor="@numberInputEditor" Align="HorizontalAlignment.Right" CellsAlign="HorizontalAlignment.Right" CellsFormat="c2"></Column>
            </Columns>
        </Grid>
    }
</Example>

@code {
    private string checkBoxEditor = "checkBox";
    private string numberInputEditor = "numberInput";
    Grid grid;

    GridEditing editing = new GridEditing()
    {
        Enabled = true,
        Mode = GridEditingMode.Cell
    };

    private List<DataRecord> dataRecords;

    async void EndEditHandler(Event args)
    {
        GridEndEditEventDetail detail = args["Detail"] as GridEndEditEventDetail;

        long rowId = detail.Row;
        string dataField = detail.Column;
        object value = await grid.GetCellValue(rowId, dataField);

        Console.WriteLine(value);
    }

    void BeginEditHandler(Event args)
    {
        GridBeginEditEventDetail detail = args["Detail"] as GridBeginEditEventDetail;
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        dataRecords = dataService.GenerateData(1000);
    }
}

Hope this helps.

Best regards,
Peter Stoev

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

[admin]

Hi Joko,

Please, look at: https://www.htmlelements.com/demos/form/overview/. On submit, the form sends the data as it is a normal HTML Form element.

Best regards,
Peter Stoev

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

[admin]

Hi Joko,

If you have such scenario, you may use the Table instead – https://www.htmlelements.com/demos/table/basic/. It’s purpose is to replace the HTML Table. The DataGrid is for the more advanced and complex scenarios.

Best regards,
Peter Stoev

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

[admin]

Hi Joko,

What do you mean by default style compact? If you mean individual stylesheets for these components then they are already available in source\styles\components. In that folder you will find the individual stylesheets for each UI component.

Best regards,
Peter Stoev

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

[admin]

The property descriptions for all UI components have been improved and updated. For example: https://www.htmlelements.com/docs/combobox-api/#toc-autocomplete_none__auto__inline__manual.

Best regards,
Peter Stoev

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

[admin]

Hi Bryan,

It works with SQL calls, example: https://www.htmlelements.com/demos/grid/server-side-mysql-php/. If you have more complex scenario, you can use the native fetch and bind the grid to the fetch’s result.

Best regards,
Peter Stoev

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

[admin]

Hi Joko,

The Grid does not support such scenario. You can data bind it to Array, JSON, CSV, TSV or XML data.

Best regards,
Peter Stoev

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

[admin]

Hi Joko,

The ListBox displays only Label and has an additional Value field. For more complex scenarios, you can use the Table or Grid component which allow multiple fields and more complex data binding.

Best regards,
Peter Stoev

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

[admin]

No autocomplete: The combobox is editable, and when the popup is triggered, the suggested values it contains are the same regardless of the characters typed in the combobox. For example, the popup suggests a set of recently entered values, and the suggestions do not change as the user types.
List autocomplete with manual selection: When the popup is triggered, it presents suggested values. If the combobox is editable, the suggested values complete or logically correspond to the characters typed in the combobox. The character string the user has typed will become the value of the combobox unless the user selects a value in the popup.
List autocomplete with automatic selection: The combobox is editable, and when the popup is triggered, it presents suggested values that complete or logically correspond to the characters typed in the combobox, and the first suggestion is automatically highlighted as selected. The automatically selected suggestion becomes the value of the combobox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the combobox.
List with inline autocomplete: This is the same as list with automatic selection with one additional feature. The portion of the selected suggestion that has not been typed by the user, a completion string, appears inline after the input cursor in the combobox. The inline completion string is visually highlighted and has a selected state.

Best regards,
Peter Stoev

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

[admin]

Hi,

Could you share details & sample code how the Scheduler is used in your app? How did you import it?

Best regards,
Peter Stoev

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

[admin]

Hi MarkM,

You can probably use ‘rowTap’ instead in this case.

Best regards,
Peter Stoev

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

[admin]

Hi,

If you load an example hosted on your laptop and the image is on your laptop and referred as a relative URL, too, the cardview component will display it.

Best regards,
Peter Stoev

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

[admin]

Hi Matias,

Could you share a Stackblitz sample which reproduces your use-case so our developers will be able to test it?

Best regards,
Peter Stoev

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

[admin]

Hi,

You can look at https://www.htmlelements.com/angular/demos/fileupload/item-template/. That demo shows how to use the ItemTemplate property. You can edit the demo in Stackblitz. The Template is defined in the index.html. Here is how the template is declared in the demo:

<template id="itemTemplate">
  <smart-progress-bar>{{filename}}</smart-progress-bar>
</template>

You can use the filename property as a parameter in the template. The HTML structure of the template can be edited based on your web application requirements.

Best regards,
Peter Stoev

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

[admin]

Hi,

The demo loads images from a local hard drive where the demo is hosted. For that purpose a relative URL is used.

Best regards,
Peter Stoev

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

[Author]

Posts