Telerik Forums
UI for Blazor Forum
0 answers
35 views

Hi all,

When TelerikTreeView is used within TelerikWindow's WindowContent, mouse hover events trigger continuous re-rendering of the entire window content, resulting in significant performance degradation. However, using TelerikTreeView directly on a page outside the window doesn't cause these re-rendering issues.


<TelerikWindow Visible=true>
    <WindowContent>
            <TelerikTreeView Data="@TreeData">
                <TreeViewBindings>
                    <TreeViewBinding>
                        <ItemTemplate>
                            @{
                                TreeItem itm = context as TreeItem;
                                <span @onclick="@( _ => NodeClick(itm) )">
                                    Node:
                                    <strong>@itm.Text</strong>
                                </span>
                            }
                        </ItemTemplate>
                    </TreeViewBinding>
                </TreeViewBindings>
            </TelerikTreeView>
    </WindowContent>
</TelerikWindow>

@code {
    string result { get; set; }
    async Task NodeClick(TreeItem clickeNode)
    {
        result = $"Last clicked node Id: {clickeNode.Id}";
    }

    // sample data

    public IEnumerable<TreeItem> TreeData { get; set; }

    public class TreeItem
    {
        public string Text { get; set; }
        public int Id { get; set; }
        public List<TreeItem> Items { get; set; } = new List<TreeItem>();
        public bool HasChildren { get; set; }
    }

    protected override void OnInitialized()
    {
        LoadHierarchical();
    }

    private void LoadHierarchical()
    {
        List<TreeItem> roots = new List<TreeItem>() {
            new TreeItem { Text = "Item 1", Id = 1, HasChildren = true },
            new TreeItem { Text = "Item 2", Id = 2, HasChildren = true }
        };

        roots[0].Items.Add(new TreeItem
        {
            Text = "Item 1 first child",
            Id = 3

        });

        roots[0].Items.Add(new TreeItem
        {
            Text = "Item 1 second child",
            Id = 4

        });

        roots[1].Items.Add(new TreeItem
        {
            Text = "Item 2 first child",
            Id = 5

        });

        roots[1].Items.Add(new TreeItem
        {
            Text = "Item 2 second child",
            Id = 6

        });

        TreeData = roots;
    }
}



Andrey
Top achievements
Rank 1
 updated question on 18 Nov 2025
1 answer
42 views

In version 8.x we have the Center=true property which centered the window.

Now with the version 9.1 and Top + Left at 50% the window starts centered, but if we dynamically change the content inside of the window, the window expands to down-right and stopped to be centered.

I had to use a css to force the window to be always centered, but it's hack I don't like.

This is the old version:

<TelerikWindow Modal="true" @bind-Visible="@IsModalTaxValidateVisible" Resizable="true" Centered="true" MaxWidth="700px">

The new version:

<TelerikWindow Modal="true" @bind-Visible="@IsModalTaxValidateVisible" Resizable="true" Class="div_centered" MaxWidth="700px" Top="50%" Left="50%">
Does we have to call any event on the window to reposition if the content inside changed?
Dimo
Telerik team
 answered on 26 Sep 2025
2 answers
238 views
When building the application in Release configuration and navigating to the page containing the ReportViewer component, the following error is thrown:

“Telerik.Blazor.Components.TelerikWindow does not have a property matching the name ‘Centered’.”
at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.ThrowForUnknownIncomingParameterName(Type targetType, String parameterName) at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target) at Microsoft.AspNetCore.Components.ParameterView.SetParameterProperties(Object target) at Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterView parameters) at Telerik.Blazor.Components.TelerikWindow.SetParametersAsync(ParameterView parameters) at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)

This problem does not occur in Debug mode and was not present in earlier builds. The affected page uses both the ReportViewer component and the SendEmailDialogSettings. For reference, the project is targeting .NET 8.0 and depends on:

• Telerik.UI.for.Blazor (v9.1.0)
• Telerik.ReportViewer.BlazorNative (v19.1.25.521)

The page:
    <TelerikTabStrip TabPosition="TabPosition.Top" TabAlignment="TabStripTabAlignment.Start">

        <TabStripTab Title="Sink">
            <ReportViewer ServiceType="@ReportViewerServiceType.REST"
            ServiceUrl="@ReportServerUrl"
                @bind-ReportSource="@ReportSourceOrganisations"
                @bind-ScaleMode="@ScaleMode"
                @bind-ViewMode="@ViewMode"
                @bind-ParametersAreaVisible="@ParametersAreaVisible"
                @bind-DocumentMapVisible="@DocumentMapVisible"
                @bind-Scale="@Scale"
                PageMode="@PageMode.ContinuousScroll"
                PrintMode="@PrintMode.AutoSelect"
                KeepClientAlive="true"
                EnableSendEmail="true"
                Height="900px"
                Width="100%">
                <ReportViewerSettings> 
                    <SendEmailDialogSettings 
                    From="@From"
                    To="@Emails"
                    Cc="@CarbonCopyEmail"
                    Subject="@Subject"
                    Format="XLSX"
                    Body="<br/> <br/> Best regards, </br>">
                    </SendEmailDialogSettings>
                </ReportViewerSettings>
            </ReportViewer>
        </TabStripTab>
    </TelerikTabStrip>
Sherzod
Top achievements
Rank 1
Iron
 answered on 14 Jul 2025
1 answer
127 views

Why did you remove the centered option in the window in place of Top and Left positions in 9.0.0?!  The programmer will now have to manually figure out the top/left corner location based on the browser size and the size of the window.  I have 20+ of your window controls and all of them are skewed out of the browser window when I set them to 50%, 50%.  This makes centering of a window a completely manual process and VERY difficult.

 

Dimo
Telerik team
 answered on 21 May 2025
2 answers
93 views


Hi,
I'm developing a Blazor web app with:
- .NET9,
- rendering
@rendermode="new InteractiveWebAssemblyRenderMode(prerender: true)


I would like to show data starting from the selected record in a grid in a telerik window, where starting from this data I would populate various fields in a chain.
This data could be modified inside the telerik window and saved using a button.
This use is possible but there is a problem to solve: if I modify the data in the telerik window and then close it, the modified data is maintained if I reopen the telerik window.

I'll give an example:
This is the code available in the telerik Blazor guides:
<TelerikButton OnClick="@OpenWindow">Open Window</TelerikButton>

<TelerikWindow @ref="WindowRef" @bind-Visible="@WindowVisible">
    <WindowTitle>
        Window Title
    </WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowContent>
        <p role="status">Current count: @CurrentCount</p>
        <TelerikButton OnClick="IncrementCount">Increment Count</TelerikButton>
    </WindowContent>
</TelerikWindow>

@code {
    private TelerikWindow? WindowRef { get; set; }

    private bool WindowVisible { get; set; }

    private int CurrentCount { get; set; }

    private void IncrementCount()
    {
        CurrentCount++;

        WindowRef?.Refresh();
    }

    private void OpenWindow()
    {
        WindowVisible = true;
    }
}

If
- I open the telerik window and increase the counter to 5
- I close the window
- I click on the button again, the window does not show me the count at 0 but at 5.

I would like to know if there is a simple way to recreate from scratch the telerik window every time it is called, without keeping the previous state.

P.S.
I would not want to worry about manually resetting the fields every time I open the telerik window

Thanks
Stefano
Top achievements
Rank 1
Iron
 answered on 16 Apr 2025
2 answers
164 views

I have a form that has a single editable field. When that field has a value put into it there is a method that validates the value and fills in the rest of the fields based on the value.  That method then should also trigger a submit.  I do not want the UI portion of the form to change or respond with a confirmation.  I do need the record Id that is created when the form is submitted. 

So basically
Put a value into a field.
Fill out the rest of the form automatically based on the above value & submit the form data to my DB and return a record Id.
That retrieved Id is then fed to another component that resides in a window control on the original form component.

Ideally there would be way to use a form ref to submit the form...  i.e. myFormRef.Submit()

Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
 answered on 05 Apr 2025
0 answers
78 views
This is on a Windows 10 OS Version 22HG2 (OS Build 19045.5371)

How do I make a C# Console app build and debug in Visual Studio Code?   

I have already built my C# Console App in Visual Studio Code.  The issue I have is when I reopen the folder where the project file is in Visual Studio Code and then rebuilding the code and debugging it again.    

Here is what I do and what happens.  After I open the folder where the project file resides,  I click on this to process the code to debug: 

https://likablelogic.org/images/lost/07.png

And then I click on the appearing "Run and Debug" button

https://likablelogic.org/images/lost/08.png

But then the bottom status bar says "Looking for CSS classes in the workspace..." followed by a percentage in paragraphs.  Why is this?  Why does this happen when there are no CSS classes at all and my project is a C# project?   

https://likablelogic.org/images/lost/09.png

Why is this?  This is just a brief snapshot of some difficulties I find when I reopen a project after I have closed Visual Studio Code.  I have experienced other errors and problems in building and running my code.   

To continue, in order to deal with the project as a solution, I click on this icon to open the solution panel. 

https://likablelogic.org/images/lost/10.png

This seemingly allows me to view the solution.  As the following view appears, I click on the project.cs file and attempt a debugging session from there. 

https://likablelogic.org/images/lost/11...png

With this file being displayed, I clicked on the menu option, Run -> Start Debugging   

https://likablelogic.org/images/lost/12...png

Then, at this point, in the pop up option window that appears in the middle and top of the development environment, I pick "C#":  

https://likablelogic.org/images/lost/13...png

Something went wrong and in the bottom right of my IDE, I get this message:   

https://likablelogic.org/images/lost/14.png

Please advise.  What should I do now?      

There are some websites where I can spend time following steps to set up a proper development environment. Before I spend time doing this, I think I will spend time looking at the a few short tutorials Youtube on this topic. The one I seemed to be the best had a step at the beginning of the tutorial where he typed 'dotnet run' in the terminal window of the IDE. I tried that and I got some wierd results on my project that I thought I would mention here.

First of all, in the status bar at the bottom, it mentioned CSS loading, for some reason, but also a notice that the IDE was initialising MSBuild project tools.
https://likablelogic.org/images/lost/css.png
https://likablelogic.org/images/lost/msbuild.png
Then, once that was over, I got this error message:
https://likablelogic.org/images/lost/git.png
Please advise. What should I do now?
William
Top achievements
Rank 1
 asked on 30 Jan 2025
1 answer
108 views
I have a TelerikGrid that the first column will open a TelerikWindow with a TelerikUpload. This is so that the user can upload files to the server that will be associated with the object. The object being edited has values that depend on the file being uploaded. For example, the file being uploaded has a File Name. If the File Name already exists, I want to change the name of the file currently being uploaded to include the Revision number at the end of the file name. For example, we have a file on the server named TestFile.pdf, and I am uploading a file named TestFile.pdf. If TestFile.pdf exists, I want to check what the revision of the TestFile.pdf that's already uploaded is, and add it to the end of the file name (TestFile_rev0.pdf). That part is simple, because it's just manipulation of the saved file on the server. However, the new file being uploaded I want to then change the name of it to TestFile_rev1.pdf, and I can do that and save it to the server, but the object in the grid that's currently being added, I need to pass the data to that object being edited, however it will not pass the data. How can we do that?


@page "/SDS"

@using SafetySite.Models;
@using Helpers

@inject SDSModel SDSModel
@inject UserModel UserModel
@inject NavigationManager NavigationManager

<PageTitle>Safety Data Sheets</PageTitle>

<TelerikGrid Data=@SDSItemsList
             FilterMode="GridFilterMode.FilterMenu"
             Sortable="true"
             EditMode="GridEditMode.Inline"
             Height="2000px">

    <GridToolBarTemplate>
        <GridCommandButton Command="Add"  Icon="@SvgIcon.Plus" Enabled="@UserModel.CanEdit()">Add SDS Sheet</GridCommandButton>
    </GridToolBarTemplate>

    <GridColumns>
        <GridColumn Field="@(nameof(SDSModel.FileExists))"  Title="File" Width="120px">

            <EditorTemplate>

                @{
                    var item = context as SDSModel;
                    if(item != null)
                    {
                        <TelerikButton OnClick="@(() => ToggleUploadWindow(item))"
                                       Icon="@SvgIcon.Upload"
                                       Class="btn btn-sm btn-primary">
                            Upload File
                        </TelerikButton>
                    }
                }

            </EditorTemplate>
            
            <Template>

                @{
                    var item = context as SDSModel;
                    if(item != null)
                    {
                        <div class="text-center">
                            <TelerikButton OnClick="@(() => NavigateToViewSDSFile(item.FileName!))"
                                           Class="navlinkgrow">

                                <div class="navlink-content">
                                    <span class="@(item.FileExists ? "text-success" : "text-danger")">
                                        <i class="fa-duotone fa-solid fa-file-pdf fa-2x"></i>
                                    </span>
                                </div>

                            </TelerikButton>
                        </div>

                    }
                }

            </Template>
        </GridColumn>


        <GridColumn Field="@nameof(SDSModel.Title)"
                    Title="Title"
                    Editable="true" />


        <GridColumn Field="@nameof(SDSModel.Revision)"
                    Title="Revision"
                    Editable="true" />


        <GridColumn Field="@nameof(SDSModel.CurrentVersion)"
                    Title="CurrentVersion"
                    Editable="true">

            <Template>
                @{
                    var item = context as SDSModel;
                    if (item != null)
                    {
                        <input type="checkbox" checked="@item.CurrentVersion" disabled />
                    }
                }
            </Template>

        </GridColumn>


        <GridColumn Field="@nameof(SDSModel.CreatedBy)"
                    Title="Created By"
                    Editable="false" />

        <GridColumn Field="@nameof(SDSModel.EditedBy)"
                    Title="Edited By"
                    Editable="false" />

        <GridColumn Field="@nameof(SDSModel.CreationDate)"
                    Title="Creation Date"
                    DisplayFormat="{0:yyyy-MM-dd}"
                    Editable="false" />

        <GridColumn Field="@nameof(SDSModel.EditedDate)"
                    Title="Edit Date"
                    DisplayFormat="{0:yyyy-MM-dd}"
                    Editable="false" />
        
        <GridCommandColumn>
            <GridCommandButton Command="Save"
                               Icon="@SvgIcon.Save"
                               ShowInEdit="true"
                               Enabled="@UserModel.CanEdit()"
                               OnClick="@OnUpdate">
                Update
            </GridCommandButton>

            <GridCommandButton Command="Edit"
                               Icon="@SvgIcon.Pencil"
                               Enabled="@UserModel.CanEdit()">
                Edit
            </GridCommandButton>

            <GridCommandButton Command="Delete"
                               Icon="@SvgIcon.Trash"
                               Enabled="@UserModel.CanEdit()"
                               OnClick="@OnDelete">
                Delete
            </GridCommandButton>

            <GridCommandButton Command="Cancel"
                               Icon="@SvgIcon.Cancel"
                               ShowInEdit="true"
                               Enabled="@UserModel.CanEdit()">
                Cancel
            </GridCommandButton>

        </GridCommandColumn>

    </GridColumns>
</TelerikGrid>


@* THIS TELERIK WINDOW OPENS A POPUP OF A TELERIK FILE MANAGER THAT ALLOWS FOR THE INDIVIDUAL TO PLACE A PDF ASSOCIATED WITH THAT ITEM INTO THE FOLDER *@
<TelerikWindow Width="400px" Height="fit-content" Centered="true" @bind-Visible="@IsUploadFileWindowVisible">
    <WindowTitle>
        <strong>Upload SDS File</strong>
    </WindowTitle>

    <WindowActions>
        <WindowAction Name="Close" OnClick="@(() => IsUploadFileWindowVisible = !IsUploadFileWindowVisible)" />
    </WindowActions>

    <WindowContent>
        <TelerikUpload Multiple="false"
                       SaveUrl="@SaveUrl"
                       RemoveUrl="@RemoveUrl"
                       OnSuccess="@OnFileUploadSuccess"
                       AllowedExtensions="@AllowedExtensions"
                       MaxFileSize="10485760"/>

    </WindowContent>
</TelerikWindow>


@code {

    private bool IsUploadFileWindowVisible { get; set; } = false;
    private List<SDSModel> SDSItemsList = new();
    private SDSModel? CurrentItem { get; set; } = new SDSModel();
    private List<string> AllowedExtensions = new List<string> { ".pdf" };
    private bool CanSaveUpload { get; set; } = false;
    private string SaveUrl = String.Empty;
    private string RemoveUrl = String.Empty;

    public void ToggleUploadWindow(SDSModel item)
    {
        CurrentItem = item;
        SaveUrl = $"{NavigationManager.BaseUri}api/Upload/SavePdf?rev={item.Revision}";
        RemoveUrl = $"{NavigationManager.BaseUri}api/Upload/RemovePdf";
        IsUploadFileWindowVisible = !IsUploadFileWindowVisible;
    }

    private void NavigateToViewSDSFile(string fileName)
    {

        if (!string.IsNullOrEmpty(fileName))
        {
            string fileUrl = $"/SafetyDataSheets/{fileName}";
            NavigationManager.NavigateTo(fileUrl, forceLoad: true);
        }
        else
        {
            Console.WriteLine("No document found for the specified file name.");
        }
    }


    private async Task OnFileUploadSuccess(UploadSuccessEventArgs args)
    {
        if (CurrentItem != null && args.Files.Count > 0)
        {
            var uploadedFile = args.Files[0];
            string fileName = uploadedFile.Name;

            // Check if a file with the same name already exists in the database
            bool fileExists = await SDSModel.FileExistsAsync(fileName);

            if (fileExists)
            {
                var existingItem = await SDSModel.GetSDSItemByFileNameAsync(fileName);
                if(existingItem != null)
                {
                    existingItem.CurrentVersion = false;
                    await SDSModel.UpdateOldSDSItemAsync(existingItem.FileName, UserModel.EmployeeID);

                    CurrentItem.Revision = existingItem.Revision + 1;
                    fileName = $"{Path.GetFileNameWithoutExtension(uploadedFile.Name)}_rev{CurrentItem.Revision}{Path.GetExtension(uploadedFile.Name)}";
                }
            }

            CurrentItem.FileName = fileName;
            CurrentItem.FileExists = true;
            CurrentItem.CurrentVersion = true;
        }
    }

    private async Task OnUpdate(GridCommandEventArgs args)
    {
        var item = args.Item as SDSModel;
        if (item != null)
        {
            item.EditedBy = UserModel.EmployeeID;
            await SDSModel.SaveSDSItemAsync(item);
            SDSItemsList = await SDSModel.GetSDSItemsAsync();
        }
    }

    private async Task OnDelete(GridCommandEventArgs args)
    {
        var item = args.Item as SDSModel;
        if (item != null)
        {
            await SDSModel.DeleteSDSItemAsync(item);
            SDSItemsList = await SDSModel.GetSDSItemsAsync();
        }
    }


    protected override async Task OnInitializedAsync()
    {
        SDSItemsList = await SDSModel.GetSDSItemsAsync();
        await base.OnInitializedAsync();
    }

}

Glenn
Top achievements
Rank 1
Iron
Iron
 answered on 23 Dec 2024
1 answer
184 views

Hello there,

I am using the Telerik Predefined Dialogs for several different uses, and I want to add the x Close icon in the upper right corner. I know it's redundant, but it's a project requirement and it also seems to be best practice for UI/UX.

if (DisclosureReportSelections.ActivitySelection == -1)
        {
            await Dialogs.AlertAsync("Activity must be reported for this period.", "Report Information Required");
            return false;
        }

I like the Predefined Dialogs because they provide 'await' for the user's response, which is handy and efficient in code. I do not want the hassle of customizing a standard Dialog while managing it's visible state.

Attached image for reference.

Hristian Stefanov
Telerik team
 answered on 02 Oct 2024
1 answer
355 views
When can we expect the release of the new dock manager?
Dimo
Telerik team
 updated answer on 12 Sep 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?