JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Table Blazor Component Table Column with DateTime

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #109874
    BrandonGruber
    Participant

    I am trying to manage the format a DateTime Column as shown below:

    new TableColumn()
    {
    DataField = “TimeStamp”,
    Label = “TimeStamp”,
    DataType = TableColumnDataType.Any,
    Transform = x=>ConvertDateTimeObject(x)
    },

    The code in ConverDateTimeObject apparently runs after the table is already loaded and the table shows “[object Promise]” in the column for all rows. Is there an easier way to format a DateTime column that needs both the date and the time?

    #109884
    ivanpeevski
    Participant

    Hi Brandon,

    You can set a formatting function using JSInterop. Add a callback to the OnReady event. When the TableReady method is fired call a JavaScript function that will correctly set the format. Here is an example:

    @inject IJSRuntime JS

    <Table Id=”my-table” DataSource=”@Clients” Columns=”@tableColumns” OnReady=”TableReady”></Table>

    @code {
    Table table;

    TableColumn[] tableColumns = new TableColumn[]
    {
    new TableColumn()
    {
    Label= “Name”,
    DataField= “Name”,
    },
    new TableColumn()
    {
    Label= “Last Order”,
    DataField= “LastOrder”,
    DataType= TableColumnDataType.Date
    }
    };

    private void TableReady(Table table)
    {
    JS.InvokeVoidAsync(“setDateFormat”, “my-table”, “LastOrder”, “dd/MM/yyyy HH:mm”);
    }

    //….

    }

    Then in your App.razor / Host.cshtml file create the function:

    <script>
    window.setDateFormat = (tableId, dataField, format) => {
    let table = document.querySelector(‘#’ + tableId);
    if (table) {
    table.setColumnProperty(dataField, “formatFunction”, function (settings) {
    const formattedValue = new window.Smart.Utilities.DateTime(settings.value).toString(format);
    settings.value = formattedValue
    });
    }
    }
    </script>

    Best Regards,
    Ivan Peevski
    Smart UI Team
    https://www.htmlelements.com/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.