Questions on UI for Blazor Forum

1 answer

294 views

[Solved] Grid Grouping Problem After Update 6.0.2

Hello,

I'm receiving an exception after I upgraded to version 6.0.2. When I try to load a GroupDescriptor on StateInit of a grid, the page crashes. It seems like if the OnRead method is async and takes too long, it causes something to be null and throws a null argument exception. Here's an example for the error:

fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'DlYqtxkSjOU4QLgOZWeNdQC1Z5gG3bJP4QfPcowK3-w'.
      System.ArgumentNullException: Value cannot be null. (Parameter 'source')
         at System.Linq.ThrowHelper.ThrowArgumentNullException(ExceptionArgument argument)
         at System.Linq.Enumerable.Select[TSource,TResult](IEnumerable`1 source, Func`2 selector)
         at Telerik.Blazor.Components.TelerikGrid`1.SetProcessedGroups(IEnumerable data)
         at Telerik.Blazor.Components.TelerikGrid`1.SetProcessedData(IEnumerable data)
         at Telerik.Blazor.Components.Common.DataBoundComponent`1.ProcessOnReadResult(ReadEventArgs args)
         at Telerik.Blazor.Components.Common.GridBase`1.<>n__0(ReadEventArgs args)
         at Telerik.Blazor.Components.Common.GridBase`1.ProcessOnReadResult(ReadEventArgs args)
         at Telerik.Blazor.Components.Common.DataBoundComponent`1.ProcessOnReadData()
         at Telerik.Blazor.Components.Common.DataBoundComponent`1.StartDataProcessAsync()
         at Telerik.Blazor.Components.Common.DataBoundComponent`1.ProcessDataOnParametersSetAsync()
         at Telerik.Blazor.Components.Common.DataBoundComponent`1.OnParametersSetAsync()
         at Telerik.Blazor.Components.TelerikGrid`1.OnParametersSetAsync()
         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
         at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

This was working fine when I was using version 5.1.1, but broke when I tried to upgrade to 6.0.2. I added a simplified example to reproduce the error I'm experiencing. I'm running the App in "Server" render mode in case that's relevant.

Test code:

_Host.cshtml

...
<component type="typeof(App)" render-mode="Server" />
...

Test.razor

@page "/"
@using Telerik.DataSource
@using Telerik.DataSource.Extensions;

<div class="k-d-flex-col k-justify-content-center">
    
    <TelerikGrid @ref="GridRef" TItem="Employee" Groupable="true" Pageable="true" Height="400px" OnRead="@ReadAsync" OnStateInit="@StateInit">
        <GridAggregates>
            <GridAggregate Field="Team" Aggregate="@GridAggregateType.Count" />
        </GridAggregates>
        <GridColumns>
            <GridColumn Field=@nameof(Employee.Name) Groupable="false" />
            <GridColumn Field=@nameof(Employee.Team) Title="Team" />
            <GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
        </GridColumns>
    </TelerikGrid>

</div>

@code {
    public TelerikGrid<Employee> GridRef { get; set; }

    public async Task ReadAsync(GridReadEventArgs args)
    {
        var data = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 50; i++)
        {
            data.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 5,
                IsOnLeave = i % 2 == 0
            });
            await Task.Delay(50); // simulating DB call
        }

        DataSourceResult result = await data.ToDataSourceResultAsync(args.Request);
        args.Data = result.Data;
        args.Total = result.Total;
        args.AggregateResults = result.AggregateResults;
    }

    public void StateInit(GridStateEventArgs<Employee> args)
    {
        args.GridState.GroupDescriptors = new List<GroupDescriptor>()
        {
            new GroupDescriptor()
            {
                Member = "Team",
                MemberType = typeof(string)
            }
        };
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public bool IsOnLeave { get; set; }
    }
}

Any help would be appreciated.

Grid

answered on 05 Aug 2024

0 answers

243 views

Can't install UI for Blazor package

Hi, I'm trying to install the UI for Blazor package to a project and it wont install. I get the following message:
---------

Severity Code Description Project File Line Suppression State
Error NU1101 Unable to find package Telerik.FontIcons. No packages exist with this id in source(s): C:\Program Files\dotnet\library-packs, Microsoft Visual Studio Offline Packages, Telerik Blzor BlazorApp1 D:\BlazorApp1\BlazorApp1\BlazorApp1.csproj 1

-------

this is my csproj file is

<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>

</Project>

Visual Studio is version is 17.10.5

Telerik UI is 6.0.2

Thanks

General Discussions

asked on 05 Aug 2024

0 answers

106 views

Is Scheduler first column editable?

Hi there,

Is there any way to edit/modify the first column? I mean, I would like to add some button, image, etc to the column. Like i show in the next image. There's any template to recreate this behavior ?

Here's some code from that example.

Thanks in advance.

SchedulerTelerik.razor

@page "/schedulerTelerik"

<div class="container">
    
    <div class="d-flex justify-content-between gap-4">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">Change start date:</span>
            </div>
            <TelerikDateTimePicker @bind-Value="@startDate" Class="form-control" />
        </div>

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">Change end date:</span>
            </div>
            <TelerikDateTimePicker @bind-Value="@endDate" Class="form-control" />
        </div>

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">Change slot duration:</span>
            </div>
            <TelerikNumericTextBox @bind-Value="@slotDuration" Class="form-control" />
        </div>
    </div>

    <br />

    <TelerikScheduler Data="@appointments" @bind-Date="@startDate" @bind-View="@currentView" Height="800px"
                      AllowCreate="true" AllowDelete="true" AllowUpdate="true">
        <SchedulerViews>
            <SchedulerTimelineView StartTime="@startTime" EndTime="@endTime"
                                   SlotDuration="@slotDuration"
                                   SlotDivisions="@slotDivision"
                                   ColumnWidth="@columnWidth" />
        </SchedulerViews>
        <SchedulerResources>
            <SchedulerResource Field="Team" Title="Edit team" Data="@schedulerResources"></SchedulerResource>
        </SchedulerResources>
        <SchedulerSettings>
            <SchedulerGroupSettings Resources="@groupingResources" Orientation="@SchedulerGroupOrientation.Vertical"></SchedulerGroupSettings>
        </SchedulerSettings>
    </TelerikScheduler>

</div>

SchedulerTelerik.razor.cs

using Telerik.Blazor;
using Telerik.FontIcons;

namespace TelerikComponentsTest.Pages
{
    public partial class SchedulerTelerik
    {
        #region Auxiliar classes
        public class SchedulerAppointment
        {
            public Guid Id { get; set; }
            public string Title { get; set; }
            public string Description { get; set; }
            public DateTime Start { get; set; } = DateTime.Now;
            public DateTime End { get; set; } = DateTime.Now.AddHours(4);
            public bool IsAllDay { get; set; }
            public string RecurrenceRule { get; set; }
            public List<DateTime> RecurrenceExceptions { get; set; }
            public Guid? RecurrenceId { get; set; }
            public FontIcon? Icon { get; set; }

            public SchedulerAppointment()
            {
                Id = Guid.NewGuid();
            }
        }
        public class Resource
        {
            public string Text { get; set; }
            public string Value { get; set; }
            public string Color { get; set; }
        }
        #endregion

        #region Dependency injection services
        // the following static classes 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 MockupAppointmentService
        {
            private static List<SchedulerAppointment> _data { get; set; } = new List<SchedulerAppointment>();
            
            public static async Task CreateAppointmentAsync(SchedulerAppointment itemToInsert)
            {
                itemToInsert.Id = Guid.NewGuid();
                _data.Insert(0, itemToInsert);
            }
            public static async Task<List<SchedulerAppointment>> ReadAppointmentAsync() => await Task.FromResult(_data);
            public static async Task UpdateAppointmentAsync(SchedulerAppointment itemToUpdate)
            {
                var index = _data.FindIndex(i => i.Id == itemToUpdate.Id);
                if (index != -1)
                {
                    _data[index] = itemToUpdate;
                }
            }
            public static async Task DeleteAppointmentAsync(SchedulerAppointment itemToDelete)
            {
                if (itemToDelete.RecurrenceId != null)
                {
                    // a recurrence exception was deleted, you may want to update
                    // the rest of the data source - find an item where theItem.Id == itemToDelete.RecurrenceId
                    // and remove the current exception date from the list of its RecurrenceExceptions
                }

                if (!string.IsNullOrEmpty(itemToDelete.RecurrenceRule) && itemToDelete.RecurrenceExceptions?.Count > 0)
                {
                    // a recurring appointment was deleted that had exceptions, you may want to
                    // delete or update any exceptions from the data source - look for
                    // items where theItem.RecurrenceId == itemToDelete.Id
                }

                _data.Remove(itemToDelete);
            }
        }

        public static class MockupResourcesService
        {
            public static List<Resource> _resources { get; set; } = new List<Resource>() {
                new Resource()
                {
                    Text = "Alex",
                    Value = "1",
                    Color = "#99ffcc"
                },
                new Resource()
                {
                    Text = "Bob",
                    Value = "2",
                    Color = "#47d147"
                },
                new Resource()
                {
                    Text = "Charlie",
                    Value = "3",
                    Color = "#336600"
                }
            };
            public static async Task<List<Resource>> GetResourcesAsync() => await Task.FromResult(_resources);
        }
        #endregion

        #region Fields
        private DateTime
            startDate = DateTime.Now.Date,
            endDate = DateTime.Now.Date.AddDays(1).AddHours(10),
            
            startTime= DateTime.Now.Date,
            endTime= DateTime.Now.Date.AddHours(23);

        private int
            slotDuration = 60,
            slotDivision = 1,
            columnWidth = 80;

        private List<Resource> schedulerResources = new List<Resource>();
        private List<SchedulerAppointment> appointments = new();

        private List<string> groupingResources = new List<string> { "Team" };
        private SchedulerView currentView = SchedulerView.Timeline;
        #endregion

        #region private methods
        private void GetSchedulerData() => appointments = new List<SchedulerAppointment>();
        private async Task GetResources() => schedulerResources = await MockupResourcesService.GetResourcesAsync();
        #endregion

        #region Life time cycle
        protected override async Task OnInitializedAsync()
        {
            GetSchedulerData();
            await GetResources();

            await base.OnInitializedAsync();
        }
        #endregion
    }
}

Scheduler

asked on 02 Aug 2024

1 answer

327 views

Converting Radzen Grid To Telerik Grid

I have a grid that I built on Radzen Studio is there any way for me to convert into telerik.

Here is my code

Filename: IqdateIqdates.razor.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.JSInterop;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Radzen;
using Radzen.Blazor;

namespace LastVersion.Client.Pages
{
public partial class IqdateIqdates
{
[Inject]
protected IJSRuntime JSRuntime { get; set; }

[Inject]
protected NavigationManager NavigationManager { get; set; }

[Inject]
protected DialogService DialogService { get; set; }

[Inject]
protected TooltipService TooltipService { get; set; }

[Inject]
protected ContextMenuService ContextMenuService { get; set; }

[Inject]
protected NotificationService NotificationService { get; set; }

[Inject]
public JDEService JDEService { get; set; }

protected IEnumerable<LastVersion.Server.Models.JDE.IqdateIqdate> iqdateIqdates;

protected RadzenDataGrid<LastVersion.Server.Models.JDE.IqdateIqdate> grid0;

protected int count;

protected string search = "";

protected async Task Search(ChangeEventArgs args)
{
search = $"{args.Value}";

await grid0.GoToPage(0);

await grid0.Reload();
}

protected async Task Grid0LoadData(LoadDataArgs args)
{
try
{
var result = await JDEService.GetIqdateIqdates(filter: $@"(contains(ASTDDT,""{search}"") or contains(AERODT,""{search}"") or contains(AYMDDT,""{search}"") or contains(ACYMDT,""{search}"") or contains(AMDCY,""{search}"") or contains(ADMCY,""{search}"") or contains(ACYMD,""{search}"") or contains(AJULAN,""{search}"") or contains(AJULN1,""{search}"") or contains(AJULN2,""{search}"") or contains(DAYNM,""{search}"") or contains(DAYABR,""{search}"") or contains(MTHNM,""{search}"") or contains(MTHABR,""{search}"") or contains(DABBR,""{search}"") or contains(DFULL,""{search}"")) and {(string.IsNullOrEmpty(args.Filter)? "true" : args.Filter)}", orderby: $"{args.OrderBy}", top: args.Top, skip: args.Skip, count:args.Top != null && args.Skip != null);
iqdateIqdates = result.Value.AsODataEnumerable();
count = result.Count;
}
catch (System.Exception ex)
{
NotificationService.Notify(new NotificationMessage(){ Severity = NotificationSeverity.Error, Summary = $"Error", Detail = $"Unable to load IqdateIqdates" });
}
}
protected bool errorVisible;
protected LastVersion.Server.Models.JDE.IqdateIqdate iqdateIqdate;

protected async Task CancelButtonClick(MouseEventArgs args)
{
NavigationManager.NavigateTo("iqdate-iqdates");
}
}
}

Filename: IqdateIqdates.razor

and here is my model file

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Text.Json;
using System.Text.Json.Serialization;

namespace LastVersion.Server.Models.JDE
{
[Table("Iqdate", Schema = "iqdate")]
public partial class IqdateIqdate
{

[NotMapped]
[JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
[JsonPropertyName("@odata.etag")]
public string ETag
{
get;
set;
}

public int? CENTRY { get; set; }

public int? CNTFLG { get; set; }

public int? MONTH { get; set; }

public int? DAY { get; set; }

public int? YEAR { get; set; }

public int? CENTYR { get; set; }

public int? STDDAT { get; set; }

public int? ERODAT { get; set; }

public int? YMDDAT { get; set; }

public int? CYMDAT { get; set; }

public int? MDCYDT { get; set; }

public int? DMCYDT { get; set; }

public int? CYMDDT { get; set; }

public int? JULIAN { get; set; }

public int? JULAN1 { get; set; }

public int? JULAN2 { get; set; }

public int? MTHYR { get; set; }

public int? YRMTH { get; set; }

public int? CNTDAT { get; set; }

public DateTime? USADAT { get; set; }

public string ASTDDT { get; set; }

public string AERODT { get; set; }

public string AYMDDT { get; set; }

public string ACYMDT { get; set; }

public string AMDCY { get; set; }

public string ADMCY { get; set; }

public string ACYMD { get; set; }

public string AJULAN { get; set; }

public string AJULN1 { get; set; }

public string AJULN2 { get; set; }

public string DAYNM { get; set; }

public string DAYABR { get; set; }

public string MTHNM { get; set; }

public string MTHABR { get; set; }

public string DABBR { get; set; }

public string DFULL { get; set; }

[Column("MONTH#")]
public int? MONTH_ { get; set; }
}
}

General Discussions

Grid

answered on 02 Aug 2024

1 answer

221 views

DropDownList not showing options

I am trying to add a dropdown list. But the options for drop down are not rendering. Here is a mockup of what I am trying to do:
Note: I am on trial account at the moment.

@page "/telerik-enum-dropdown"
@using Telerik.Blazor.Components

<div class="form-group">
    <label for="telerikDropDown">Delivery Week</label>
    <TelerikDropDownList Data="@deliveryWeeks"
                         @bind-Value="@selectedDeliveryWeek"
                         Id="telerikDropDown"
                         TextField="Text"
                         ValueField="Value">
    </TelerikDropDownList>
</div>

@code {
    private string selectedDeliveryWeek;
    private List<DropDownItem> deliveryWeeks;

    protected override void OnInitialized()
    {
        deliveryWeeks = Enum.GetValues(typeof(DeliveryWeek))
            .Cast<DeliveryWeek>()
            .Select(dw => new DropDownItem
            {
                Text = dw.ToString(),
                Value = dw.ToString()
            }).ToList();
    }

    public class DropDownItem
    {
        public string Text { get; set; }
        public string Value { get; set; }
    }
    public enum DeliveryWeek
    {
        Week1,
        Week2,
        Week3,
        Week4,
        Week5
    }
}

Renders this. But nothing happens when I click on it. It should show me the options for dropdown.

DropDownList

answered on 31 Jul 2024

1 answer

225 views

EditorTemplate for in-cell TelerikGrid Edit not working properly for TelerikNumericTextBox?

I am trying to increase the number of decimal places that I can type into a cell using the in-cell editor on my TelerikGrid. It defaults to 2. When I try to use an EditorTemplate to pass a TelerikNumericTextBox component with 4 decimal places defined, it doesn't work. Not sure what I'm doing wrong...

See the code snippet below and the example png of what is generated.

<TelerikGrid Data=@SetupData EditMode="@GridEditMode.Incell" Pageable="true" PageSize="15" Height="500px"
             OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnCancel="@OnCancelHandler" ConfirmDelete AutoGenerateColumns Sortable FilterMenuType="FilterMenuType.Menu">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Setup</GridCommandButton>
        <GridSearchBox />
    </GridToolBarTemplate>
    <GridColumns>
        <GridAutoGeneratedColumns ColumnWidth="100px"></GridAutoGeneratedColumns>
        <GridColumn Field="@nameof(WelderSetupsModel.MinHeadGauge)">
           <EditorTemplate>
                @{
                    if(true)
                    {
                        var ctx = context as WelderSetupsModel;
                        <TelerikNumericTextBox @bind-Value="@ctx.MinHeadGauge" Decimals="4" />
                    }
           }
            </EditorTemplate>

        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash"></GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

Grid

NumericTextBox

answered on 30 Jul 2024

1 answer

118 views

Is there a way to access the date of a recurring appointment on clicking in Blazor scheduler?

Hi,

I've been following this example regarding opening a context menu when right clicking an appointment https://github.com/telerik/blazor-ui/blob/master/scheduler/appointment-context-menu/ and I'm wondering if it's possible to access the Date of the specific occurrence that was clicked when using recurring appointments.

For example being able to access Mon, 7/22 when right clicking on it to then assigning it to a private variable on the page and such?

Best Regards,

Marzuk

Scheduler

answered on 29 Jul 2024

1 answer

516 views

Visual Studio Scaffold New Item, for Blazor?

Visual Studio has this Feature.

Create Blazor Web Project
Right click Project, select "Add" and "New Scaffolded Item..."
You get a list of templates, I believe from here GitHub - dotnet/Scaffolding: Code generators to speed up development.

Does Telerik plan on adding any templates for New Scaffolded Item?

I have imagined I chose "EF Core API to Telerik Grid" as a template. I select the DbContext and Entity from a wizard and press Go. Then it will scaffold for me, with wonderfully crafted models and dependency injection repository pattern, service pattern, controller patterns:

Server Side
1. DTO Model or database model
2. Mapping from Entity to DTO
3. Repository Pattern: Entity Repository with CRUD
4. Service to Call Repository
5. Controller to call Service
Client Side
1. View Model
2. Mapping from DTO to View Model
3. HTTP Service to call Controller
Razor Page with Telerik Grid
1. Using View Model to build default columns
2. Default Telerik Editor features
  1. Or a choice between in-line and modal editors
3. Razor.cs calls HTTP Service
4. Razor.cs has all CRUD functions

Why? Because I've done this cookie-cutter, boilerplate type of thing so many times I think it should become a candidate for integration into Visual Studio as "Add New Scaffolded Item".

Does Telerik plan to work on this? Perhaps I could help contribute

General Discussions

Grid

VS Code Extension

answered on 29 Jul 2024

1 answer

154 views

Blazor PivotGrid - reorder PivotGridColumn?

Hi,

I have a PivotGridColumn:

<PivotGridColumns>
    <PivotGridColumn Name="@nameof(PivotIpEncounterDetail.Year)"></PivotGridColumn>
</PivotGridColumns>

And I have the data loaded in for the pivot grid in reverse year order (example 2022, 2021, 2020), but when I go to test the grid the columns are reordered in ascending order. By design, I'm not allowed to add extra complexity of the configurator, as our users will only be shown one specific view with an optional aggregation.

What can I leverage to get the columns in the correct order?

Edited to add details:
Using a Local DataProviderType, 2 PivotGridRows, 1 PivotGridMeasure (Sum).
All the internal guts of the grid itself are fine (numbers are where they should be, etc.),

Just can't seem to reorder the year columns programatically.

PivotGrid

answered on 26 Jul 2024

1 answer

165 views

Telerik UI for Blazor on new empty Blazor WebAssembly Standalone App (.NET 8) using Times New Roman font

Hello,

I am attempting to install the trial version of Telerik UI for Blazor on a brand new .NET 8 Blazor WebAssembly Standalone App project that has not been setup with the sample pages (an empty project). I have followed the WebAssembly setup tutorial in the Telerik UI for Blazor documentation. However, when I run the application the page is using Times New Roman as the font. Does the default theme (kendo-theme-default) use the Times New Roman font? If not, how can I change my application to use the font that is intended to be used with the default theme (kendo-theme-default)? If neither of these options are available, what is the best practice way of setting the font for the entire application?

Thank you!

General Discussions

answered on 25 Jul 2024