Telerik Forums
UI for Blazor Forum
1 answer
642 views

I'm sure I'm just being stupid.. but.. I can't figure out how to add a title/tooltip to a button.... a <GridCommandButton> to be specific.

 

+6

Hristian Stefanov
Telerik team
 answered on 22 Jun 2021
1 answer
1.1K+ views

It currently says 'select files...' 

If I change the 'Multiple' property to false how do I change the label to 'select file...' for instance?

Many thanks

 

Rob

Hristian Stefanov
Telerik team
 answered on 22 Jun 2021
1 answer
786 views

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

Svetoslav Dimitrov
Telerik team
 answered on 22 Jun 2021
1 answer
320 views

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

Dimo
Telerik team
 answered on 22 Jun 2021
1 answer
965 views

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;
    }


Marin Bratanov
Telerik team
 answered on 19 Jun 2021
1 answer
1.0K+ views

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.

Marin Bratanov
Telerik team
 answered on 19 Jun 2021
0 answers
600 views

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.

Adrian
Top achievements
Rank 1
Iron
Veteran
Iron
 updated question on 18 Jun 2021
4 answers
279 views

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

 

Peter
Top achievements
Rank 2
Iron
Iron
Veteran
 updated answer on 18 Jun 2021
1 answer
326 views

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?

Marin Bratanov
Telerik team
 answered on 17 Jun 2021
1 answer
367 views
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.
Blazorist
Top achievements
Rank 2
Bronze
Iron
Iron
 answered on 17 Jun 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Andrey
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Andrey
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?