Telerik Forums
UI for Blazor Forum
0 answers
2 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

Adrian
Top achievements
Rank 1
Iron
Iron
 updated question on 18 Jun 2021
0 answers
2 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;
    }


Bob
Top achievements
Rank 1
 asked on 17 Jun 2021
0 answers
3 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

Bob
Top achievements
Rank 1
 asked on 17 Jun 2021
1 answer
4 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
3 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 1
Iron
 answered on 17 Jun 2021
1 answer
6 views

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

I've also tried modifying the method to be private Task OnSelectHandler which returned Task.CompletedTask, 

Dimo
Telerik team
 updated answer on 17 Jun 2021
1 answer
8 views
How to pass parameter as an object to another page(without using model Popup)?
Dimo
Telerik team
 answered on 17 Jun 2021
2 answers
10 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 1
Iron
 answered on 17 Jun 2021
1 answer
4 views

 

I used the "ShowInEdit" function for two buttons. But press the add button and see all four buttons.

The same problem appears when I use not only my source but also the  sample source of telerik demo.

I will attach my code, sample code of telerik demo, and execution screen.

Please give me some advice on which part there was a mistake.

 

 

=============================== my code ===============================

<div class="form-field-row" style="display:table;height:185px;vertical-align:text-top;">
                    <TelerikGrid Data="@WspanlList" EditMode="@GridEditMode.Inline"
                                 Pageable="false"
                                 FilterMode="@GridFilterMode.None"
                                 Class="no-scroll"
                                 Reorderable="true"
                                 OnUpdate="@WspanlUpdate" OnDelete="@WspanlDelete" OnCreate="@WspanlCreate">
                        <GridToolBar>
                            <GridCommandButton Command="Add" Icon="add">품목 추가</GridCommandButton>
                        </GridToolBar>
                        <GridColumns>
                            <GridColumn Field="@nameof(Wspanl.panl)" Width="135px" OnCellRender="@((e) => e.Class = "center-align")">
                                <HeaderTemplate>
                                    <div style="text-align:center;">품명</div>
                                </HeaderTemplate>
                            </GridColumn>
                            <GridColumn Field="@nameof(Wspanl.spec)" Width="120px">
                                <HeaderTemplate>
                                    <div style="text-align:center;">규격</div>
                                </HeaderTemplate>
                            </GridColumn>
                            <GridColumn Field="@nameof(Wspanl.qtty)" Width="50px">
                                <HeaderTemplate>
                                    <div style="text-align:center;">수량</div>
                                </HeaderTemplate>
                            </GridColumn>
                            <GridColumn Field="@nameof(Wspanl.comment)" Title="비고" Width="100px"></GridColumn>
                            <GridCheckboxColumn SelectAll="false" Title="현재작업" Width="68px" CheckBoxOnlySelection="true"></GridCheckboxColumn>
                            <GridCommandColumn Width="200px">
                                <GridCommandButton Command="Edit" Icon="edit" Class="grid-btn-cmd">수정</GridCommandButton>
                                <GridCommandButton Command="Delete" Icon="delete" Class="grid-btn-cmd">삭제</GridCommandButton>
                                <GridCommandButton Command="Save" Icon="save" Class="grid-btn-cmd" ShowInEdit="true">저장</GridCommandButton>
                                <GridCommandButton Command="Cancel" Icon="cancel" Class="grid-btn-cmd" ShowInEdit="true">취소</GridCommandButton>
                            </GridCommandColumn>
                        </GridColumns>
                    </TelerikGrid>
                </div>

 

=============================== telerik sample code ===============================

@* This sample showcases custom command handling for:
    - the built-in Save command that prevents it based on some condition (Name contains "3")
    - a custom command for a row
*@

@page "/TestGrid"

@CustomCommandResult

<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline" OnUpdate="@MyUpdateHandler"
             Pageable="true" PageSize="15" Height="500px">
    <GridToolBar>
        <GridCommandButton Command="Add" Icon="add">Add Item</GridCommandButton>
    </GridToolBar>
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="Employee ID" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Employee Name" />
        <GridColumn Field=@nameof(SampleData.HireDate) Title="Hire Date" />
        <GridCommandColumn>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true" OnClick="@CustomSaveClick">Update</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
            <GridCommandButton Command="MyOwnCommand" Icon="information" ShowInEdit="false" OnClick="@MyCustomCommandHandler">My Command</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }

    List<SampleData> GridData { get; set; }

    // sample custom commands handling

    async Task CustomSaveClick(GridCommandEventArgs e)
    {
        SampleData theUpdatedItem = e.Item as SampleData;
        // any custom logic
        if (theUpdatedItem.Name.Contains("3"))
        {
            // prevent the operation based on a condition. Will prevent the OnUpdate event from firing
            CustomCommandResult = new MarkupString(CustomCommandResult + "<br />Update Click fired. Custom logic prevent it from continuing.");
            e.IsCancelled = true;
        }
    }

    MarkupString CustomCommandResult;
    async Task MyCustomCommandHandler(GridCommandEventArgs args)
    {
        CustomCommandResult = new MarkupString(CustomCommandResult + string.Format("<br />Custom command triggered for item {0}", (args.Item as SampleData).ID));

        Console.WriteLine("The Custom command fired. Please wait for the long operation to finish");

    }

    // sample CRUD operations

    private async Task MyUpdateHandler(GridCommandEventArgs args)
    {
        SampleData theUpdatedItem = args.Item as SampleData;

        // perform actual data source operations here through your service
        await MyService.Update(theUpdatedItem);

        // update the local view-model data with the service data
        await GetGridData();
    }

    async Task GetGridData()
    {
        GridData = await MyService.Read();
    }

    protected override async Task OnInitializedAsync()
    {
        await GetGridData();
    }

    // the following static class mimics an actual data service that handles the actual data source
    // replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
    public static class MyService
    {
        private static List<SampleData> _data { get; set; } = new List<SampleData>();

        public static async Task<List<SampleData>> Read()
        {
            if (_data.Count < 1)
            {
                for (int i = 1; i < 50; i++)
                {
                    _data.Add(new SampleData()
                    {
                        ID = i,
                        Name = "name " + i,
                        HireDate = DateTime.Now.AddDays(-i)
                    });
                }
            }

            return await Task.FromResult(_data);
        }

        public static async Task Update(SampleData itemToUpdate)
        {
            var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
            if (index != -1)
            {
                _data[index] = itemToUpdate;
            }
        }
    }
}
송정훈
Top achievements
Rank 1
Iron
 answered on 16 Jun 2021
1 answer
7 views

How can I set the title on the Popup window that appears when we use GridEditMode.Popup?

For editing existing data, the title is "Edit".

For adding new data the title is "Add New Record".

Also, the alignment of validation messages seems a bit wonky:

Marin Bratanov
Telerik team
 answered on 15 Jun 2021