Telerik Forums
UI for Blazor Forum
1 answer
87 views

I want to make the scheduler event cells bigger in height. However, I'm not able to achieve it with ItemTemplate nor overriding the css. Is there a way to achieve this?

Also, why my previous question about this have been deleted? If there's no way of achieving that, why don't you just say it's not possible instead of deleting my question?

Tsvetomir
Telerik team
 answered on 11 Jun 2024
2 answers
573 views

Right from the start I get following errors in den Dircect Window:

System.ArgumentNullException: Value cannot be null. (Parameter 'nullableType')
   at System.ArgumentNullException.Throw(String paramName)
   at System.Nullable.GetUnderlyingType(Type nullableType)
   at Telerik.Blazor.Common.Filter.FilterOperatorFactory.GetFilterOperatorsForType(Type type, ITelerikStringLocalizer localizer)
   at Telerik.Blazor.Components.Common.BoundColumnBase.ThrowIfInvalidDefaultFilterOperator()
   at Telerik.Blazor.Components.Common.BoundColumnBase.OnParametersSet()
   at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Telerik.Blazor.Components.Common.ColumnBase.SetParametersAsync(ParameterView parameters)

I can not load any Grid anymore. The error shows:

System.ArgumentNullException

Value cannot be null. (Parameter 'nullableType')

I think it has something to do with "DefaultFilterOperator" but I cannot figure out it myself

With 5.1.1 everything works just fine.

Nadezhda Tacheva
Telerik team
 answered on 11 Jun 2024
1 answer
195 views

For my use case the logical operator will always be "And" and there is no grouping.  I'd like to hide those buttons to avoid confusing end users. Is that possible?

Tsvetomir
Telerik team
 answered on 10 Jun 2024
1 answer
82 views
I have a TelerikComboBox where the Data is a list of objects with Text and Value parameters, AllowCustom="false," and Filterable="true."  The user can start typing in their desired selection to narrow down the list of options in the dropdown.  After a while, they will narrow the dropdown options to a single value.  If they press enter, click on the item in the dropdown, press down, or finish typing the entire Text associated with that selection's Value, the selection will be made.  However, if they tab to or click on the next component, the selection will NOT be made.  My request is for a way to automatically select the only remaining item in the filtered dropdown list when the component loses focus.
Dimo
Telerik team
 answered on 10 Jun 2024
1 answer
348 views

Hello everyone,

I am experiencing an issue with my Blazor application and am seeking advice or solutions from anyone who might have had the same issue.

When interacting with the Telerik Editor within a Telerik Grid, clicking inside the editor unexpectedly exits the edit mode. This seems to be linked to event propagation issues, where clicking the editor triggers a propagation that causes the grid to exit edit mode.

Error Messages:

When my issue triggers, I also see the following error in the console:

Uncaught TypeError: Cannot read properties of null (reading 'state')
This occurs within the telerik-blazor.js script and seems related to handling state changes or events. 

I already looked trough Troubleshooting but removing all "StateHasChanged" didn't solve the issue.

What I've Tried:

Implemented JavaScript to stop event propagation using event.stopPropagation() within various event handlers (click, mousedown, etc.).
Checked that the event handlers are correctly assigned and that the JavaScript is initialized at the correct life cycle phase in Blazor (OnAfterRenderAsync).
Removed any redundant StateHasChanged() calls as per Telerik's recommendations to prevent unnecessary re-rendering and potential race conditions.

Code:

The Telerikgrid with the Telerikeditor:

<TelerikGrid Data="ProzessSubPosListe"
             EditMode="@GridEditMode.Incell"
             OnUpdate="@UpdateHandlerProzessPos"
             OnDelete="@DeleteHanlderProzessPos"
             Size="@ThemeConstants.Grid.Size.Small"
             PageSize="100"
             Sortable="true"
             Pageable="false"
             Resizable="true"
             >
    <GridColumns>
        <GridColumn Field="@nameof(ProzessPosClass.Nr)" Title="Nr" Width="10%"></GridColumn>
        <GridColumn Field="@nameof(ProzessPosClass.Title)" Title="Thema" Width="20%"></GridColumn>
        <GridColumn Field="@nameof(ProzessPosClass.ProzessContent)" Title="Beschreibung" Width="20%">
            <EditorTemplate Context="dataItem">
                <div @onclick:stopPropagation="true" @onclick:preventDefault="true">
                @{
                    var item = dataItem as ProzessPosClass;
                    <TelerikEditor @bind-Value="@item.ProzessContent" Width="650px" Height="400px" ></TelerikEditor>
                }
                </div>
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn Context="Journal" Width="100px">
            <GridCommandButton Command="Save" Icon="@("save")" ShowInEdit="true"></GridCommandButton>
            <GridCommandButton Command="Delete" Icon="@("trash")"></GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="@("cancel")" ShowInEdit="true"></GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
    <NoDataTemplate>
        <strong>Kein Prozessschritt vorhanden</strong>
    </NoDataTemplate>
</TelerikGrid>

OnAfterRenderAsync Method to call the Javascript function.
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("setupEditorEventHandling");
    }
}

My Javascript inside of _Layout.cshtml trying to resolve the issue:

 <script>
     function setupEditorEventHandling() {
         console.log("Setup editor event handling");
         document.addEventListener('click', function (event) {
             try {
                 var editor = event.target.closest('.k-editor.telerik-blazor');
                 if (editor) {
                     event.stopPropagation();
                 }
             } catch (error) {
                 console.error('Error handling editor click:', error);
             }
         }, true);
     }
 </script>

How the issue looks like:

Has anyone encountered similar issues with event handling in Blazor applications using that setup? 

Any insights or suggestions would be greatly appreciated.

Svetoslav Dimitrov
Telerik team
 answered on 10 Jun 2024
1 answer
161 views

This ComboBox, with filtering and custom values enabled, glitches when typing in the box. At a normal typing speed, I'm seeing that about 10% of keystrokes are skipped, or appear briefly and then disappear.

<TelerikComboBox Data="@_data"
                 @bind-Value="@_value"
                 AllowCustom="true"
                 Filterable="true"
                 FilterOperator="@StringFilterOperator.Contains"
                 Enabled="@Enabled"></TelerikComboBox>
...
List<string> _data = new() { "Lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit" };
string _value { get; set; }

 

Dropped letters are slightly less frequent with DebounceDelay="0" ; it's worse with more items in the list. It seems to occur if you type more than 3-4 letters per second.

Also, clicking the cursor in the middle of the text and typing can cause the cursor to jump to the end of the input and jumble your letters around.

 

Jonathan
Top achievements
Rank 1
 updated question on 07 Jun 2024
0 answers
252 views
Right now it is previewing a PDF, and neither rebinding, matching its data with array[0] or null, nor even matching the component reference with a new one works.
Gabriela
Top achievements
Rank 1
 updated question on 07 Jun 2024
1 answer
182 views
How can I change the height of the scheduler event? All I could find for changing event template was ItemTemplate but that doesn't help to change the height of the cell. Is there a way to achieve that?
Tsvetomir
Telerik team
 answered on 06 Jun 2024
1 answer
72 views

Hi, recently i got the licese, ive been working with the "Trial version", but when i activate the licese my proyect warns me that some componetn called "InitCart" is no initialized

 

 

Radko
Telerik team
 answered on 06 Jun 2024
0 answers
86 views

I'm trying to use TelerikGrid to drag and drop items from subgrid to subgrid (Using another TelerikGrid in the DetailTemplate).  I have gotten it to work well when moving rows around the same grid, but it doesn't work when I try to drag from one grid to another.  The event only fires for the source grid and not the destination grid, whereas the documentation says it should fire for both.

I'm not sure whether I'm doing something wrong or if this function just doesn't work if the two grids don't have the same parent component.

Here's a sample of my code:
                <TelerikGrid Data=@_items
                             Height=@GetHeightValue()
                             Width=@GetWidthValue()
                             FilterMode="@GridFilterMode.FilterMenu"
                             Pageable=@Pageable
                             PageSize=@(PageSize ?? DefaultPageSize)
                             OnRowClick="@OnRowClick"
                             DetailTemplate="@GetGridDetailContent()"
                             RowDraggable=@RowDraggable
                             OnRowDrop="@((GridRowDropEventArgs<DataType> args) => OnRowDropHandler(args))"
                             @ref=@_grid>
                    <GridSettings>
                        <GridRowDraggableSettings DragClueField="@nameof(DataType.Name)">
                        </GridRowDraggableSettings>
                    </GridSettings>
In this case GetGridDetailContent() returns another component of the same type to be able to display three levels of hierarchical data.  Am I missing anything, or does this just not work unless, like in the examples, both grids are part of the same component?
Christopher
Top achievements
Rank 1
Iron
 asked on 05 Jun 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?