Telerik Forums
UI for Blazor Forum
1 answer
50 views

Background: Grid bound to a List provided by EF from SQL data source.  Pageable=true. EditMode=Incell.

Process:

1.  User clicks Add button

2.  In the Add event handler for the button, a new object instance is created and added to the List that is Data bound to the grid (last item in the List not an Insert ... this is a user requirement and must be added to end of List)

3.  StateHasChange(), Grid?.Rebind 

4.  Force the grid to scroll to the last item.

I researched and found this Telerik documentation Scroll to Selected Grid Row and it suggests I have to use JavaScript "scrollIntoView()"??  I absolutely do NOT want to go this route for what should be a very simple process.  Please tell me there is a better way?

I was "hoping" I could use SelectionMode=Single and bind SelectedItemsInPage and then programmatically set the SelectedItem to the last item in the List (Data=) and Telerik Grid would do the control update to appropriate page and make the last row visible in the grid.  Unfortunately this is not the case. 

Do you folks have a more Blazor-Server like approach for .NET 9 and 7.1.0 suite?

Rob.

Dimo
Telerik team
 answered on 15 Jan 2025
1 answer
32 views

I have a DeleteHandler:

    private async Task OnDeleteAsync(GridCommandEventArgs args)

    {
        if (ViewModel == null)                    throw new InvalidOperationException("ViewModel == null");
        if (!(args.Item is ProductUi product_ui)) throw new InvalidOperationException("!(args.Item is ProductUi product_ui)");
        if (product_ui.Id == null)                throw new InvalidOperationException("product_ui.Id == null");

        var result = await ViewModel.DeleteUiAsync(product_ui.Id.Value);

        if (result.Error != null)
            await Dialogs!.AlertAsync(result.Error, "Delete Error");
    }

If there is an error I try to display it using one of Telerik's standard Dialogs.

If there is an error the dialog is displayed, however the grid then displays a busy spinner and the entire window is disabled.

There is now a deadlock, can't close the dialog because the grid has disabled input, the grid is busy because it is waiting for the dialog.

Dimo
Telerik team
 answered on 15 Jan 2025
1 answer
35 views
RIght now I'm setting the state of the TileLayout component in the OnAfterRenderAsync() method.  This results in the tiles first rendering in the default positions and then quickly switching around to the saved positions.  I do a similar thing with the Grid component using the OnGridStateInit event.  Unfortunately, the TileLayout component doesn't raise this event.
Tsvetomir
Telerik team
 answered on 15 Jan 2025
1 answer
47 views

Hi there.
I have a list of a class which contains 2 string properties, "MyValueField" and "MyTextField".
If one of the items in the list has the MyValueField property set to an empty string (in the example below it's the first item), selecting that item in the TelerikDropDownList will assign null to the binded value. Instead, an empty string should be assigned to the binded value variable.
It is worth noting that "externally" assigning the binded value variable to an empty string (either on initialization or through a button) will successfully work and the TelerikDropDownList component will display the selected item.

The following gif showcases the binded value variable becoming null when the item with MyValueField set to an empty string is selected through the TelerikDropDownList: https://i.gyazo.com/3d75359334d900a74334ae6de2493576.mp4
The following gif showcases the binded value variable becoming an empty string when pressing a button that sets it to one, and gets set to null when the first item in the TelerikDropDownList is selected: https://i.gyazo.com/12ee88a8e161f8c3b5a023d8fbc44a28.mp4

Here is the REPL link: https://blazorrepl.telerik.com/GfYbuCFt318IzZzv41
This also affects the ComboBox component: https://blazorrepl.telerik.com/czOPYjFf04sX7cIW36

Dimo
Telerik team
 answered on 14 Jan 2025
1 answer
28 views

Blazor, .net 6.0, Telerik.UI.for.Blazor 5.1.1

I have a Blazor app with a page that contains a TelerikGrid (using inline edit) with 2 columns that use TelerikDropDownList that cascade.  When no option is selected in the parent ddl, then the child ddl has no items and is disabled (enabled = false).  When an item is chosen in the parent ddl, then the child ddl has its list of options updated.  However, the child ddl is not refreshing until the user clicks somewhere in the row being edited.  Once clicking anywhere in the row, then the child ddl displays properly:  1) becomes enabled, 2) contains the new list, 3) wipes out any previously selected value.

Other than that initial refresh, the code works.  It saves, it updates the child options, etc.

No matter what I do, I cannot seem to get it refresh the child ddl without first clicking on the row.  I have all different combinations of HasStateChanged(), ddl.Rebind(), ddl.Refresh(), ddl.DropDownList_Focus().  None of these seem to have made a difference.

Below is the relevant code portions.

<GridColumn Title="Module" Field="ModuleId" Visible="isFileLocationRequired">
    <EditorTemplate>
        @{
            var editingFileType = context as FileType;
            <TelerikDropDownList Data="@SelectableModules"
                                 TextField="TextValue"
                                 ValueField="FieldId"
                                 @bind-Value="editingFileType.ModuleId"
                                 OnChange="UpdateSelectableFileLocations">
            </TelerikDropDownList>
        }
    </EditorTemplate>
</GridColumn>
<GridColumn Title="File location name" Field="FileLocationId" Visible="isFileLocationRequired">
    <EditorTemplate>
        @{
            var editingFileType = context as FileType;
            <TelerikDropDownList Data="@SelectableFileLocations"
                                 TextField="FileLocationName"
                                 ValueField="FileLocationId"
                                 @bind-Value="editingFileType.FileLocationId"
                                 Enabled="@editingFileType.ModuleId.HasValue">
            </TelerikDropDownList>
        }
    </EditorTemplate>
</GridColumn>

 

    private List<FileLocations> SelectableFileLocations = new();
    private List<FieldOptions> SelectableModules = new();
    private void UpdateSelectableFileLocations(object input)
    {
        int? moduleId = input as int?;
        SelectableFileLocations = FileLocations
            .Where(fileLocation => fileLocation.CategoryId == moduleId)
            .ToList();
    }
Dimo
Telerik team
 answered on 14 Jan 2025
1 answer
24 views

ToolBarItemBase exposes Class and other Parameters via it's inheritance, but dosn't implement them. This causes problems when you want to for example add Class="k-grow" in the ToolBarTemplateItem and TelerikTextBox to make if swell and fill the toolbars remaining space.

Sample Code:

@page "/home"

<TelerikToolBar>
	<ToolBarTemplateItem Class="This-Class-Is-Not-Rendeder-In-Browser-DOM">
		<TelerikTextBox Class="This-Class-Works-Fine" />
	</ToolBarTemplateItem>
</TelerikToolBar>

DOM:

<main class="main" b-29r974uz1l="">
    <div class="k-toolbar telerik-blazor k-toolbar-resizable k-toolbar-md" role="toolbar"
        data-id="e665969e-a55f-4bb1-8503-427f659bc6ab" dir="ltr">
        <div class="k-toolbar-item" tabindex="0">
            <span class="k-textbox k-input This-Class-Works-Fine telerik-blazor k-input-solid k-rounded-md k-input-md">
                <input role="textbox" id="8152979c-ef9b-47f2-9315-acdc5fb5ac38"
                    data-id="a24df6d2-8ce8-4ee3-bd68-3d27283b8bfd" class="k-input-inner" dir="ltr" aria-readonly="false"
                    tabindex="0">
            </span>
        </div>
        <button
            class="telerik-blazor k-button k-toolbar-overflow-button k-hidden k-button-flat k-rounded-md k-button-md k-button-flat-base k-icon-button"
            data-id="1aeae0a0-1a66-404e-914d-2cd4ddba222d" dir="ltr" tabindex="-1" title="More tools"
            aria-disabled="false" type="button">
            <span class="telerik-blazor k-button-icon k-icon k-svg-icon k-svg-i-more-vertical" aria-hidden="true">
                <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 512 512">
                    <path
                        d="M240 128c26.4 0 48-21.6 48-48s-21.6-48-48-48-48 21.6-48 48 21.6 48 48 48m0 64c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48m0 160c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48">
                    </path>
                </svg>
            </span>
        </button>
    </div>
</main>

ToolBarTemplateItem.razor from your source code dosn't seem to have any actual implementation for this in the razor file, nor do I see any BuildRenderTree functions in any of the inhertied classes. I assume this is the problem. Or am I missing something?

@namespace Telerik.Blazor.Components

@inherits ToolBarItemBase

Hristian Stefanov
Telerik team
 answered on 13 Jan 2025
2 answers
41 views

Hello
I want to write a desired text instead of calendar numbers.
For example, as specified in the attached file, I want to write the desired text (8 day of month) instead of the number 8.
I tried through the event:
OnCalendarCellRender="@OnCalendarCellRenderHandler"
but I did not get the result.
Please help me.

 

Mohamad Javad
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 13 Jan 2025
1 answer
53 views

Going back to 2020 threads I researched and there is still no way I can tell for easily hiding a GridCommandButton (even when using context)?

What is odd, the "ShowInEdit" will indeed hide the GridCommandButton if row selected and in edit mode ... so it seems  you folks have a way to control visibility but no property for it?

So I'm assuming after 4 years of Blazor UI support, a "visibility" property will NOT happen?

Currently this is what I use to "Enable" a GridCommandButton but that's not really what I want to do, I don't want to show it.

                            <GridCommandColumn Context="bookingEquipmentDeleteCommandContext" Width="8rem">
                                @{
                                    var equipment = bookingEquipmentDeleteCommandContext as BookingEquipmentModel;
                                }
                                <GridCommandButton Command="Delete" OnClick="@EquipmentDeleteCommandHandler" Class="btn-red" Icon="@FontIcon.Trash" Enabled="@(string.IsNullOrEmpty(equipment?.EquipmentCode))" ShowInEdit="false">Delete</GridCommandButton>
                            </GridCommandColumn>

I would think something as simple as "Visible" would be easy to implement, especially now that we're on version 7 on the control suite?

Rob.

Hristian Stefanov
Telerik team
 answered on 10 Jan 2025
1 answer
58 views

I am trying to clear all selected values from a TelerikRadioGroup.  I would like to do this by clicking on the selected value.  The problem is the OnChange and the ValueChanged does not fire unless you are clicking on a different value. 

 

<TelerikRadioGroup Data="@genderOptions"
                   Value="@selectedGender"
                   OnChange="@OnChangeHandler"
                   ValueChanged="@((int newValue) => OnGenderChanged(newValue))"
                   ValueField="@nameof(GenderModel.GenderId)"
                   TextField="@nameof(GenderModel.GenderText)"
                   Layout="RadioGroupLayout.Horizontal">
</TelerikRadioGroup>

 

@code {

private int selectedGender;

private void OnGenderChanged(int newValue)
{
    if (selectedGender == newValue)
    {
        var aa = 123;

    }
    else
    {
        selectedGender = newValue;
        Console.WriteLine($"Gender changed to: {newValue}");


    }

}

async Task OnChangeHandler(object newValue)
{
    // the handler receives an object that you may need to cast to the type of the component
    // if you do not provide a Value, you must provide the Type parameter to the component
    Console.WriteLine($"ValueChanged fired with value: {newValue as string}");
}

}

 

Hristian Stefanov
Telerik team
 answered on 10 Jan 2025
1 answer
39 views

Dear Telerik Support team,

as of version 7.1.0 the No Data Template was introduced for Charts and I was wondering, if there's any chance to prevent the chart of rendering the no data template, when none is defined and needed.

In my case I'd rather display an empty chart, instead of the no data template.

Any way to accomplish that?

Many thanks!
Thomas

Tsvetomir
Telerik team
 answered on 10 Jan 2025
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?