Questions on UI for Blazor Forum

1 answer

72 views

Pie chart labels: can they be configured to overlay the chart itself

I want to show a series of pie charts but with the series labels on top of each section like so:

I haven't found anything that suggests the labels can be anywhere except attached by lines. Is this possible?

Charts

answered on 17 Dec 2024

1 answer

348 views

How do I use a DropDown list for a TelerikForm item?

Hi, sorry if this is a basic question, but I cannot for the life of me figure out how to get this to work. I can have a DropDown list and a form separately, but when I try to put the DropDown into the form itself, I get a "Object of type 'Telerik.Blazor.Components.FormItem' does not have a property matching the name 'ChildContent'" error.

Here's a sample snippet of what I'm trying to do:

 <TelerikForm Model="@Input"
             Columns="3"
             ColumnSpacing="50px"
             OnValidSubmit="@HandleValidSubmit"
             OnInvalidSubmit="@HandleInvalidSubmit">
    <FormValidation>
        <DataAnnotationsValidator />
    </FormValidation>
    <FormItems>

<FormItem Field="@nameof(Model.Attribute)"></FormItem>
<FormItem Field="@nameof(Model.Attribute2)">
    <TelerikDropDownList Data="@myDdlData"
                         TextField="MyTextField"
                         ValueField="MyValueField"
                         @bind-Value="Model.Attribute3">
    </TelerikDropDownList>
</FormItem>
<FormItem Field="@nameof(Model.Attribute4)"></FormItem>

            </FormItems>
        </TelerikForm>

Sorry for the bad indentation, not sure how else to paste it properly.

DropDownList

Form

answered on 16 Dec 2024

0 answers

38 views

Autocomplete inside or outside TelerikForm

Hi all, I would like to implement an autocomplete with server side search but I'm having problems.If I don't insert it in a telerik form, it works (leaving aside small visual and selection bugs).This is the code:

<TelerikAutoComplete Data="@VeicoloAutoCompleteData"
                     Value="@VeicoloAutoCompleteValue"
                     ValueChanged="@( (string newValue) => OnVeicoloAutoCompleteValueChanged(newValue) )"
                     OnChange="@OnChangeVeicoloAutoComplete"
                     ValueField="@( nameof(DropDownModel.Text) )"
                     MinLength="3"
                     DebounceDelay="150">
    <ItemTemplate>
        <strong>@context.Text</strong>
    </ItemTemplate>
</TelerikAutoComplete>

What I want to achieve is that after inserting 3 characters, the call to the server starts and returns the values that contain the inserted text

private List<DropDownModel> VeicoloAutoCompleteData { get; set; } = new();

    private string VeicoloAutoCompleteValue { get; set; }

    private async Task OnVeicoloAutoCompleteValueChanged(string newValue)
    {
        if (newValue.Length < 3)
        {
            VeicoloAutoCompleteValue = newValue;
            return;
        }
        var request = new DataSourceRequest()
        {
            Skip = 0,
            Filters = new List<IFilterDescriptor>(),
            Sorts = new List<SortDescriptor>(),
            Aggregates = new List<AggregateDescriptor>(),
            Groups = new List<GroupDescriptor>()
        };
        request.Page = 1;
        request.PageSize = 10;
        var fs1 = new FilterDescriptorCollection();
        fs1.Add(new FilterDescriptor("Targa", FilterOperator.Contains, newValue));
        request.Filters = new List<IFilterDescriptor>()
        {
            new CompositeFilterDescriptor()
            {
                FilterDescriptors = fs1,
                LogicalOperator = FilterCompositionLogicalOperator.Or,
            }
        };

        var veicoli = await _veicoloService.GetAll(request);
        VeicoloAutoCompleteValue = newValue;
        VeicoloAutoCompleteData = veicoli.ToDropDownModel();
    }

    private DropDownModel? userChoiceVeicolo;
    private async void OnChangeVeicoloAutoComplete(object theUserChoice)
    {
        if (userChoiceVeicolo is not null && userChoiceVeicolo.Text.Equals((string)theUserChoice, StringComparison.InvariantCultureIgnoreCase))
        {
            return;
        }
        var choice = VeicoloAutoCompleteData.FirstOrDefault(x => x.Text.Equals((string)theUserChoice, StringComparison.InvariantCultureIgnoreCase));
        userChoiceVeicolo = choice;
        if(userChoiceVeicolo is not null)
            _veicolo = await _veicoloService.GetById(userChoiceVeicolo.Value);
    }

Is this code correct? I read that there are bugs on the double activation of the onchange and I found this solution, which is a bit buggy anyway.

If I insert this input in a form tag instead I can't make it work because it asks me for a valueExpression. But I don't know what to put.

Basically I would like to save either the choice in a separate variable (as above but inside a form)
Or save the choice in a subobject of the model I'm working on.

How should I do it?
Thanks for the help

AutoComplete

asked on 16 Dec 2024

1 answer

72 views

Autofit column in a nested grid

I'm trying to figure out how to autofit a column in a nested grid.

In the Detail Template of a grid (Grid A), there is a another grid (Grid B). This nested grid (Grid B) has a column that shows the selections from a MultiSelect component. This could be a single value or multiple values. I know that there are methods that resize a column based on the column id or resize multiple columns, but these methods require a grid object reference. Since this nested grid (Grid B) is templated and therefore has multiple instances, I can't directly get a reference to it.

Also, it seems that all the relevant Grid event handlers only have arguments return references to the data bound to the grid, but not a reference to the grid object.

Is there a way to get a reference to a specific grid instance in a Detail Template or is there another way to auto size a specific column in a nested grid?

Thanks

Grid

answered on 13 Dec 2024

1 answer

120 views

Tips to migrate from WinForms

I am looking into the feasibility of migrating an old WinForms application that uses the Telerik WinForms Grid control to web.
The Blazor Grid Control seems to have all the functionality I need.

The application uses (typed) DataSets as data sources (on a SQL database we don't want to change), but there is a substantial amount of logic coded into the screens itself which will have to be duplicated to the web pages (or extracted and placed in business components).

The goal is to make it work first - make it pretty later. I want to do a Pilot where I migrate a couple of (complex) WinForm screens (of the application) into a Web version using as much of the old code as possible. One of the obvious problems is state management of the user interaction on a screen. I should also say that I do have some experience with web technology, I am quite new to Blazor (although the experiments I did so far seems to point into the direction that the basic stuff is not complicated to get to work).

Any tips, hints or suggestions would be very welcome. Have you experience doing this type of thing? Let me know how you did it and what problems you had to solve. Thanks!

General Discussions

Grid

answered on 13 Dec 2024

1 answer

62 views

Change grid column index in OnStateInit not working

Hi, my code use OnStateInit to change the column order, settings the GridColumnState.Index property.

Now i found it not work anymore (i can't found the cause).

This is a simplified version who reply the issue: grid is created with Col1 and Col2, in OnStateInit i revert the index of the columns so i assume who grid will render with Col2 and Col1 (inverted order) but seem not working.

https://blazorrepl.telerik.com/QeFwbnFd19xPAId547

What's wrong?

Thanks

Grid

answered on 13 Dec 2024

1 answer

105 views

DialogFactory with custom content

I urgently need an awaitable dialog with custom content.
I am working with a DataGrid, and in the on-save event, 
I need to validate some data. In certain cases, 
I must display a dialog that allows the user to decide whether to save or cancel the update, 
based on data retrieved from the API.
Is it possible to "hack" the DialogFactory to achieve this?
Radzen can do it? https://blazor.radzen.com/dialog?theme=material3

Dialog

answered on 12 Dec 2024

0 answers

67 views

Issue with appointment size and position in TelerikScheduler when changing time division

Hi, I need the SchedulerResourceGroupHeaderTemplate to have a certain size to fit a long description of the appointment and some buttons for actions. I am using the TelerikScheduler component to represent when a person should take one or several medications, but when I change the time division from 12h to 8h or lower the position of the event/appointment gets completely out of position.

Why does it position itself in this way? Am I using the component incorrectly?

Im using telerikSchedulerRef to refresh the UI, when time division changes

telerikSchedulerRef?.Rebind();

and OnItemRenderHandler to add a css class for resizing the appointment control (.k-event)

private void OnItemRenderHandler(SchedulerItemRenderEventArgs e) => e.Class += " customAppointment";

Thanks in advance

 <TelerikScheduler Data="@ViewModel.Appointments" @bind-Date="@filterStartDateTime" View="SchedulerView.Timeline" @ref="telerikSchedulerRef" OnItemRender="@OnItemRenderHandler">
     <SchedulerToolBar>
         <SchedulerToolBarCustomTool>

             <div class="mr-2">
                 <TelerikButton OnClick="()=>SetTimeDivisionMode(TimeDivision.Day)" Size="sm">24h</TelerikButton>
                 <TelerikButton OnClick="()=>SetTimeDivisionMode(TimeDivision.HalfDay)" Size="sm">12h</TelerikButton>
                 <TelerikButton OnClick="()=>SetTimeDivisionMode(TimeDivision.EightHours)" Size="sm">8h</TelerikButton>
                 <TelerikButton OnClick="()=>SetTimeDivisionMode(TimeDivision.Hourly)" Size="sm">1h</TelerikButton>
                 <TelerikButton OnClick="()=>SetTimeDivisionMode(TimeDivision.HalfHour)" Size="sm">30m</TelerikButton>
                 <TelerikButton OnClick="()=>SetTimeDivisionMode(TimeDivision.TenMinutes)" Size="sm">10m</TelerikButton>
                 <TelerikButton OnClick="()=>SetTimeDivisionMode(TimeDivision.FiveMinutes)" Size="sm" Class="mr-3">5m</TelerikButton>
             </div>
			 
         </SchedulerToolBarCustomTool>

         <SchedulerToolBarCustomTool>
             <div class="time-filters">
                 <TelerikDateTimePicker Title="@Localizer["AppStrings.StartDate"]" @bind-Value="@filterStartDateTime" Format="dd/MM/yyyy HH:mm" Width="160px"></TelerikDateTimePicker>
                 <TelerikFontIcon Icon="@FontIcon.ArrowRight" Size="md" />
                 <TelerikDateTimePicker Title="@Localizer["AppStrings.Enddate"]" @bind-Value="@filterEndDateTime" Format="dd/MM/yyyy HH:mm" Width="160px"></TelerikDateTimePicker>
             </div>
         </SchedulerToolBarCustomTool>
     </SchedulerToolBar>

     <SchedulerResources>
         <SchedulerResource Field="@nameof(Appointment.LineId)" TextField="Text" ValueField="Value" Data="@ViewModel.Resources"></SchedulerResource>
     </SchedulerResources>

     <SchedulerSettings>
         <SchedulerGroupSettings Resources="@GroupingResources" Orientation="@SchedulerGroupOrientation.Vertical"></SchedulerGroupSettings>
     </SchedulerSettings>

     <SchedulerViews>
         <SchedulerTimelineView StartTime="@filterStartDateTime" EndTime="@filterEndDateTime" SlotDivisions="@slotDivisions" SlotDuration="@slotDuration">

             <SchedulerResourceGroupHeaderTemplate>

                 <div class="appointment_container" style="min-height:130px;">
                     <div class="appoint-left">

                         <TelerikButton Icon="@FontIcon.FileAdd" Size="sm" />

                     </div>

                     <div class="appoint-center">
                         <div class="appointment_desc" title="@context.Text">
                             @context.Text
                         </div>

                         <div class="appointment_size">
                            Total: @context.Size ml/24h
                         </div>
                     </div>

                     <div class="appoint-right">
                         <TelerikButton Icon="@FontIcon.Envelop" Size="sm" Class="appoint-envelop" />
                         <span style="font-style:italic">
                             @context.Route
                         </span>
                     </div>

                 </div>

             </SchedulerResourceGroupHeaderTemplate>

             <ItemTemplate>
                 @{
                     <div class="d-flex justify-content-between">
                         <TelerikDropDownButton Icon="@FontIcon.Checkbox">
                             <DropDownButtonItems>
                                 <DropDownButtonItem Icon="@FontIcon.Check"> Check</DropDownButtonItem>
                                 <DropDownButtonItem Icon="@FontIcon.Pause">Pause</DropDownButtonItem>
                                 <DropDownButtonItem Icon="@FontIcon.MinusCircle">Stop</DropDownButtonItem>
                                 <DropDownButtonItem Icon="@FontIcon.Cart">Add to cart</DropDownButtonItem>
                             </DropDownButtonItems>
                         </TelerikDropDownButton>

                         <span>Test description</span>
                     </div>
                 }
             </ItemTemplate>

         </SchedulerTimelineView>
     </SchedulerViews>
 </TelerikScheduler>

private void OnItemRenderHandler(SchedulerItemRenderEventArgs e) => e.Class += " customAppointment";

Scheduler

asked on 12 Dec 2024

1 answer

74 views

Using TravelTemplate, having CSS problems and Intellisense

The CSS in the travel template works perfectly fine, however in VS2022, I am not getting any intellisense from the CSS at all. When I do class="" and whether I hit the space bar to load intellisense for suggestions, or do CTRL+SPACE I don't get anything. I am usually getting "dismiss" but that is about it. Nothing from reset.css in the wwwroot/common folder or the styles.css from wwwroot/landing/travel are showing either. I am noticing that the CSS in the App.razor file are being received from the unpkg.com link instead of everything being downloaded right to the project and referenced directly. How do I get this all to work? Can I download these files and reference them directly or can I only use unpkg? Does this even work with unpkg?

Styling

answered on 11 Dec 2024

1 answer

121 views

DropDownList not showing in my grid?

I was following this example here.

                    <GridColumn Field=@nameof(BookingEquipmentModel.FirstRequestedEquipmentType) Title="1st Requested" Editable="true" Filterable="false" Width="7rem">
                        <EditorTemplate>
                            @{
                                _currentBookingEquipmentModel = context as BookingEquipmentModel;
                                <TelerikDropDownList Data="@_equipmentTypeList"
                                                     @bind-Value="@_currentBookingEquipmentModel.FirstRequestedEquipmentTypeId"
                                                     TextField="@nameof(EquipmentTypeModel.Code)"
                                                     ValueField="@nameof(EquipmentTypeModel.EquipmentTypeId)"
                                                     DefaultText="Select Type">
                                    <DropDownListSettings>
                                        <DropDownListPopupSettings Height="auto" />
                                    </DropDownListSettings>
                                </TelerikDropDownList>
                            }
                        </EditorTemplate>
                    </GridColumn>

Grid EditMode set to GridEditMode.Inline and Column is Editable = True. _equipmentTypeList is populated in OnAfterRenderAsync. It's behaving as if it's just a normal read only column?

Rob.

DropDownList

updated answer on 11 Dec 2024