Questions on UI for Blazor Forum

0 answers

54 views

Hi, I'm trying to create a new project using the telerik blazor project template. When I click the Create button, VS hangs and nothing is created.
Using:

DOTNET 8

Microsoft Visual Studio Community 2022 (64-bit) - Current
Version 17.10.5

Telerik Blazor 6.1.0

Thanks

General Discussions

asked on 05 Aug 2024

1 answer

212 views

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

131 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

66 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

189 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

118 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

120 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

71 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

331 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

65 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