Questions on UI for Blazor Forum

1 answer

563 views

I just discovered the DetailTemplate and it is great. But I build myself a genereric Grid-Control with the Tererik-Grid and I pass a RenderFragement from my Parent-Component to this Control. This works perfectly. But even if the RenderFragemt is Null, the "+" and "-" Buttons to expand and collaps the DetailTemplate are always shown. How can I hide them ?

Unfortunately this is not working:

    @if (ChildContent != null)
    <DetailTemplate>
        {
            @ChildContent
        }
    </DetailTemplate>
    }

Grid

answered on 17 May 2023

1 answer

172 views

Blazor Scheduler - Show Month-view in a vertical grid

Hi All,

I schedule a Month at the time but using the MultiDay view because I need 09:00-17:00 in .25 hours a day.

Is it possible to use the Month view in a grid of days x hours like the Multiday view.

As alternative I would also be happy if I could use the Month-view date-picker

TIA

Regards, Maarten

Scheduler

answered on 16 May 2023

1 answer

754 views

Expand Grid-Height to a GridLayout Row-Height

I would like to achieve this:

I have a GridLayout width 3 Rows (50px, Auto, 50px)

The second row is expanding due to the Browser-Height.

Inside this second Row I would like to put a Grid that expands along to the maximum available height when the User resizes the Browser.

If I give the Grid the Height of "100%" the Height is too low if the Grid has no rows. I would like to expand the Grid always to the maximum available space. At the moment I try to calculate the height with JavaScript in Pixel but I hope that there would be a better way !?

Is there any ?

Grid

answered on 15 May 2023

0 answers

163 views

Telerik Multiple Modal Windows Css Issue

Hi am using this tutorial
https://demos.telerik.com/blazor-ui/window/stacking-windows
When i stack windows with modal textboxes are losing borders
Css is not working More windows i add it darkens the background and css is showing abnormality for textboxes.

Window

asked on 15 May 2023

1 answer

131 views

DayOfWeek as Category label

I'm using

ChartCategoryAxis Type="@ChartCategoryAxisType.Date" BaseUnit="@ChartCategoryAxisBaseUnit.Fit"

Is there a way to show the labels as DayOfWeek (Wednesday) instead of date (3/1) ?

Charts

answered on 15 May 2023

1 answer

908 views

System.InvalidCastException: Specified cast is not valid. in Scheduler

Copied a demo TelerikScheduler:
<TelerikScheduler Data="@RFCactions"
@bind-Date="@StartDate"
Height="600px"
@bind-View="@CurrView"
AllowCreate="false" AllowDelete="false" AllowUpdate="false"
ConfirmDelete="true"
IdField="@(nameof(RequestForChangeActionSched.Id))"
StartField="@(nameof(RequestForChangeActionSched.StartingDate))"
EndField="@(nameof(RequestForChangeActionSched.EndingDate))"
IsAllDayField="@(nameof(RequestForChangeActionSched.IsAllDay))"
TitleField="@(nameof(RequestForChangeActionSched.RequestForChangeId).ToString())"
DescriptionField="@(nameof(RequestForChangeActionSched.Activity))">
<SchedulerViews>
<SchedulerDayView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" />
<SchedulerWeekView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" />
<SchedulerMultiDayView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" NumberOfDays="31" SlotDivisions="4" >
<DateHeaderTemplate>
<div>
@context.ToString("ddd dd")
</div>
</DateHeaderTemplate>
</SchedulerMultiDayView>
<SchedulerMonthView></SchedulerMonthView>
<SchedulerTimelineView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" />
</SchedulerViews>
</TelerikScheduler>

@code {
List<RequestForChangeActionSched> RFCactions = new List<RequestForChangeActionSched>();
....etc
Made sure all required fields are in my model, with the same datatypes
But the (any) view won't show because of an InvalidCastException
Updated from V2023.1.313.33 to V2023.1.426.51 but still got the cast error at blazor.webassembly.js:1

System.InvalidCastException: Specified cast is not valid.
at Telerik.Blazor.Components.TelerikScheduler`1[[MISFrontEnd.Shared.Domain.RequestForChangeActionSched, MISFrontEnd.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].UpdateAppointment(RequestForChangeActionSched dataItem, IAppointment appointmentForUpdate)
at Telerik.Blazor.Components.TelerikScheduler`1[[MISFrontEnd.Shared.Domain.RequestForChangeActionSched, MISFrontEnd.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].CreateAppointment(RequestForChangeActionSched dataItem)
at Telerik.Blazor.Components.TelerikScheduler`1[[MISFrontEnd.Shared.Domain.RequestForChangeActionSched, MISFrontEnd.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ExpandAppointments()

Scheduler

answered on 12 May 2023

0 answers

231 views

Telerik Grid OnRead Event endless loading

I have a grid that loads big data. We used to use the ObservableCollection but opted to use the OnRead for better performance (loading takes time when using ObservableData). We have EventAggregators and PropertyChanged events running async OnInitialised().. Does this affect the OnRead event? We manually track the Add, Edit/Update, Delete and Duplicate actions on the grid.

So upon running our blazor app, the grid won't load the data on the grid and has the loading animation on endless loop. (Tried waiting for it to load for about 2 hours). Also tried debugging line per line from which I saw that upon executing the OnRead, the args,Data and args,Total were popullated properly.

General Discussions

Grid

asked on 12 May 2023

1 answer

336 views

Blazor Grid Row highlight does not change when using keyboard navigation.

I have a Blazor Grid with the following properties:

<TelerikGrid 
                         OnRead="@OnGridRead"
                         Data="Data"
                         Pageable="true"
                         PageSize="10"
                         Width="100%"
                         Sortable="true"
                         Navigable="true"
                         Groupable="true"
                         SelectionMode="GridSelectionMode.Single"
                         SortMode="@SortMode.Single"
                         FilterMode="@GridFilterMode.FilterMenu"
                         Resizable="true"
                         OnRowClick="OnRowClickCallback"
                         Reorderable="true"
                         AutoGenerateColumns="true">

When I click on a row the row is highlighted, but when I use the keyboard to navigate the highlight stays on the last row I clicked on.

The keyboard navigates to a cell and draws a thin, barely visible, border on the cell, when I hit enter the `OnRowClickCallback` is called on the new row but the highlight remains on the old row.

How do I get the row highlight to change with the navigation?

Grid

answered on 12 May 2023

1 answer

161 views

Access the selected grid row from another grid

I have a grid that displays financial information nicely. However, I need a second grid to access the selected row from the first grid so that it can display further details.

First (fully functioning) grid in brief:

                <TelerikGrid Data="@vm.Model.CO_DetailsList"
                     @ref="grid"
                     EditMode="@Telerik.Blazor.GridEditMode.Incell">
            
                    <GridColumns>
                        <GridColumn Field="@nameof(CO_Details.Seg0)" Title="Fund" Width="70px">
                            <EditorTemplate>
                                <TelerikComboBox Data="@vmSeg0.Model"
                                             TextField="Value"
                                             ValueField="Value"
                                             TItem="GL_Seg0RO"
                                             TValue="string"
                                             @bind-Value="vm.Model.CO_DetailsList[index].Seg0">
                                    <ComboBoxSettings>
                                        <ComboBoxPopupSettings MaxHeight="@seg0CmbHeight"/>
                                    </ComboBoxSettings>
                                </TelerikComboBox>
                            </EditorTemplate>
                        </GridColumn>
                    </GridColumns>
                </TelerikGrid>

Grid

answered on 10 May 2023

2 answers

765 views

Change SubmitButton Enabled State on TelerikForm by when form is modified

I am stuck with a problem that I just can't seem to solve:

I have built a TelerikForm with a Submit button. The requirement is to change the enabled status of this button depending on whether the form has been modified or not.

So the basic code is :

<TelerikForm @ref="@FormRef"
             Model="@EntityModel"
             OnSubmit="@OnSubmitHandler"
             >
    <FormValidation>
        <DataAnnotationsValidator />
    </FormValidation>
    <FormItems>
        <CascadingValue Name="TheForm" Value="@FormRef">
            @foreach (var form_item in FormItemCollection)
            {
                <DynamicComponent Type="@form_item.ComponentType" Parameters="@form_item.Parameters" />
            }
        </CascadingValue>
    </FormItems>
    <FormButtons>
        <TelerikButton 
                      ButtonType="@ButtonType.Submit"  
                       Enabled="@SaveEnabled"
                       ThemeColor="primary">Speichern</TelerikButton>
    </FormButtons>

</TelerikForm>

The ButtonShould be changed on the EditContext.IsModified() state.

So I tried:

protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            FormRef.EditContext.OnFieldChanged += EditContext_OnFieldChanged;
        }
        base.OnAfterRender(firstRender);
    }

    private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs e)
    {
        SaveEnabled = true;
        StateHasChanged();
    }

But every time the StateHasChanged() is called, I lost the new values in the form cause it is rendered again with the previos values.

I can't find any solution to change the State of the Button without StateHasChanged. The enabled attribute is not a bound value, so the state does not change.

So how to solve this troubles?

Form

updated answer on 09 May 2023