Questions on UI for Blazor Forum

1 answer

834 views

WPF Binding Converters equivalent in Telerik Blazor?

I have a .NET Framework WPF Silverlight app which I am converting across to .NET Core Blazor WebAssembly. The existing app heavily uses binding converters (that implement System.Windows.Data.IValueConverter) throughout the UI codebase.

The <telerik:Rad* controls make use of these converters. Is there an equivalent to this for the Telerik Blazor controls?

N.B. Some of the converters are used in two-way binding.

Some examples of these existing converters:

Imports System.Windows.Data

Public Class DecimalZeroBlankConverter
    Implements IValueConverter

    Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.Convert
        If value Is Nothing Then
            Return Nothing
        End If

        If value = 0 Then
            Return Nothing
        End If

        Dim dec As Decimal = value

        Return dec.ToString("###,###,##0.00")
    End Function

    Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack
        Throw New NotImplementedException
    End Function
End Class

Imports System.Windows.Data

Public Class PercentageConverter
    Implements IValueConverter

    Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.Convert
        If value Is Nothing Then
            Return 0
        End If

        Return value * 100
    End Function

    Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack
        If value Is Nothing Then
            Return 0
        End If

        If String.IsNullOrEmpty(value) Then
            Return 0
        End If

        Return value / 100
    End Function
End Class

Imports System.Windows.Data

Public Class YesNoVisibilityConverter
    Implements IValueConverter

    Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.Convert
        If value Is Nothing Then
            Return Visibility.Collapsed
        End If

        If value = "Y" Then
            Return Visibility.Visible
        Else
            Return Visibility.Collapsed
        End If
    End Function

    Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack
        Throw New NotImplementedException
    End Function
End Class

Imports System.Windows.Data

Public Class BooleanFontWeightConverter
    Implements IValueConverter

    Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.Convert
        If value Then
            Return FontWeights.Bold
        Else
            Return FontWeights.Normal
        End If
    End Function

    Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack
        Throw New NotImplementedException
    End Function
End Class

General Discussions

answered on 22 Jun 2021

1 answer

392 views

How to do multiple file Blazor Upload with metadata template

Hi all,

How does one do the same type of upload as shown in this kendo dojo, but with Blazor upload component? Is template option available with Blazor Upload like they are with kendo Upload?

Please advise if anyone knows.

Thx...,Bob Baldwin
Fluent Consultants

Upload

answered on 22 Jun 2021

1 answer

1.0K+ views

bind-SelectedItems doesn't work when using OnStateInit event

I have a grid where I am setting the initially selected rows and it works fine until I also use the OnStateInit event to set the initial sorting. Once I do that the selections are not set.

 <TelerikGrid Data="archivePermissions" Height="100%" Width="100%" ScrollMode="GridScrollMode.Scrollable"
                                 Sortable="true" SortMode="SortMode.Single" SelectionMode="GridSelectionMode.Multiple" @bind-SelectedItems="selectedUsers"
                                 FilterMode="GridFilterMode.FilterRow"
                                 OnStateInit="@((GridStateEventArgs<GetArchivePermissionsModel> args) => OnStateInitHandler(args))">
                        <GridColumns>
                            <GridCheckboxColumn SelectAll="true" Width="30px" OnCellRender="@GridHelpers.CenterAlign" />
                            <GridColumn Field="@(nameof(GetArchivePermissionsModel.LastName))" Title="Last Name" />
                            <GridColumn Field="@(nameof(GetArchivePermissionsModel.FirstName))" Title="First Name" />
                            <GridColumn Field="@(nameof(GetArchivePermissionsModel.Role))" Title="Role">
                                <FilterCellTemplate>
                                    <TelerikComboBox Data="roles" Value="@filteredRole" FilterOperator="StringFilterOperator.Contains"
                                                     Width="100%" ValueField="Name" TextField="Name"
                                                     ValueChanged="@(async (string val) =>
                                                                 {
                                                                     filteredRole = val;

                                                                     var filter = context.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor;
                                                                     filter.Value = filteredRole;

                                                                     if (string.IsNullOrEmpty(filteredRole))
                                                                     {
                                                                         await context.ClearFilterAsync();
                                                                     }
                                                                     else
                                                                     {
                                                                         await context.FilterAsync();
                                                                     }
                                                                 })">
                                    </TelerikComboBox>
                                </FilterCellTemplate>
                            </GridColumn>
                        </GridColumns>
                    </TelerikGrid>

    private void GetArchive()
    {
        var dbRoles = SecurityRepository.GetRoles();
        roles = Mapper.Map<IEnumerable<ApplicationRole>, IEnumerable<RoleViewModel>>(dbRoles);

        var dbArchive = DatabaseArchivingRepository.GetArchive(ArchiveId);
        archive = Mapper.Map<Archive, ArchiveViewModel>(dbArchive);
        origName = archive.DisplayName;

        archivePermissions = DatabaseArchivingRepository.GetArchivePermissions(ArchiveId).ToList();

        selectedUsers = archivePermissions.Where(a => a.HasAccess).ToList();
    }

    private void OnStateInitHandler(GridStateEventArgs<GetArchivePermissionsModel> args)
    {
        var state = new GridState<GetArchivePermissionsModel>
        {
            SortDescriptors = new List<SortDescriptor>()
{
                new SortDescriptor("LastName", ListSortDirection.Ascending)
            }
        };

        args.GridState = state;
    }

Grid

answered on 19 Jun 2021

1 answer

1.1K+ views

[Solved] How do I send additional data with File

I have a Blazor server app which I am using to upload photos. I am attempting to use the Window and Upload components to have a modal dialog.

It is unclear to me from the examples WHEN does the Upload component attempt to call the API Controller. Also, I need to specify exactly where to place the uploaded picture. I have a special folder off the root for photos and folders within that to "group" the photos.

How do I pass the "group" to the controller from the Upload component?

Eventually, this app will be used on tablets and phones and I will want to upload from the device storage OR from the camera. I don't see anything related to that.

Upload

Window

answered on 19 Jun 2021

0 answers

644 views

I need a Grid cell template that will make certain cells bold based on a boolean value.

I have the need to display certain grid values bold as to highlight them to the user.

I have created a template like so:

            <GridColumn Field="@(nameof(ManufacturerSettingsInfo.Region1))" Width="80px" Filterable="false" Groupable="false">
                <Template>
                    @{
                        var row = context as ManufacturerSettingsInfo;
                        if (true)
                        {
                            <span style="font-weight:bold;">@(Converter.ConvertToBlankOrFormattedDecimal(row.Region1))</span>
                        } 
                        else
                        {
                            <span>@(Converter.ConvertToBlankOrFormattedDecimal(row.Region1))</span>
                        }
                    }
                </Template>
            </GridColumn>

However the cells with the font-weight bold styling do not show up as bold and look the same as the other cells.

N.B. I am able to change the font-size but I can't seem to change the font-weight.

Do you know how I can achieve this?

UPDATE: This is working as expected, it was an issue with my CSS not using the correct font-family for a bold font face.

Grid

updated question on 18 Jun 2021

4 answers

325 views

[Solved] TileLayout update HeaderText from TelerikCalendar need two StateHasChanged calls

Hi,

in https://docs.telerik.com/blazor-ui/knowledge-base/tilelayout-rendering-contents is written, that StateHasChanged must called to Update the HeaderText. But with a TelerikCalendar in Content the HeaderText is one click to late:

@page "/test"

<TelerikTileLayout>
    <TileLayoutItems>
        <TileLayoutItem HeaderText="@date.ToShortDateString()">
            <Content>
                <TelerikCalendar Value="@date" ValueChanged="@CalendarValueChangedHandler" />
            </Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

@code {

    DateTime date { get; set; } = DateTime.Today;

    public async void CalendarValueChangedHandler(DateTime newDate)
    {
        date = newDate;
        StateHasChanged();
        // await Task.Delay(50).ContinueWith(o => { InvokeAsync(StateHasChanged); });
    }

}

I have to add a second call to StateHasChanged with a minimal Delay of 50 ms.

It works with the line:

await Task.Delay(50).ContinueWith(o => { InvokeAsync(StateHasChanged); });

But this behavior is not normal?

Regards,

Peter

Calendar

TileLayout

updated answer on 18 Jun 2021

1 answer

363 views

Hierarchical grid structure and OnStateChanged

I've got a hierarchical grid structure and I want to use the OnStateChanged event in the (0...N) child grids and do things with the state of the grid that has changed, but it seems impossible because there doesn't appear to be a way to work out which child grid is firing the event.

Within OnStateChangedHandler(GridStateEventArgs<T> args), args doesn't contain a reference back to the grid that's changed.
Obviously the top-level parent grid is easy enough, but I'm completely stumped with the children...

Has anyone succeeded in doing this?

Grid

answered on 17 Jun 2021

1 answer

420 views

[Solved] Grid toolbar components are vertical misaligned

Inside the grid toolbar I have a mix of components: dropdownlist, command buttons and toogle buttons in a toggle button group.
Everything works fine, the problem is that the vertical alignment of the dropdown lists and the toggle button group is different from that of the command buttons (see attached image).
I tried different styles or wrapping everything in a div and setting the styles but have not been successful.
Could you tell me that I should modify in order to get the buttons vertically aligned?

Thanks.

Grid

ToolBar

answered on 17 Jun 2021

1 answer

1.2K+ views

[Solved] Rename file on upload

I'm having a problem changing the filename on upload. The control reports the file was uploaded with the new name, but the controller's file.ContentDisposition looks like this:

form-data; name="file"; filename="Original.png"

Here's my OnSelectHandler:

 private void OnSelectHandler(UploadSelectEventArgs e)
    {
        if (e.Files.Count > 1)
        {
            e.IsCancelled = true;
        }
        foreach (var file in e.Files)
        {
            file.Name = "New.png";
        }
    }