Telerik Forums
UI for Blazor Forum
1 answer
50 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
45 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
65 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
50 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
62 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
133 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
300 views
When can we expect the release of the new dock manager?
Dimo
Telerik team
 updated answer on 12 Sep 2024
0 answers
93 views
I have a basic Telerik Window that is draggable and the window is a child of a main section of a page. When I scroll [in that page section], the Window will stay perfectly in position in the viewport. I can drag the window, release it, then scroll and it is still fine. The issue arises when I attempt to drag the window in any direction while scrolling on the page. The cursor will separate from the window header but still continues to drag in parallel of the offset created by the scroll.

How can I prevent this offset while scrolling and dragging at the same time so that the window will always stay in the viewport?

I have attempted to utilize the ContainmentSelector property by creating an invisible overlay (high up in the component tree) that is fit to the viewport but this did not seem to work.
ReverseBLT
Top achievements
Rank 1
Iron
 updated question on 21 Jun 2024
1 answer
165 views
Hi, I'm using a Data Grid where I have a button list of documents, I have a button to pop open a window with the PDF viewer, there is a slight delay, and I was wondering if possible, to have a loading screen when click then when Window pop open it stops loading...
Hristian Stefanov
Telerik team
 answered on 04 Jun 2024
1 answer
707 views

I've got a Blazor WebApp and want to open a page (with several Telerik components) in a new tab. Unfortunately I can't use NavLink or NavigationManager.NavigateTo(url) as they won't open in a new tab/window.

After googling I realized the general consensus is to use javascript: await JS.InvokeVoidAsync("open", <url>, "_blank");

This works fine as long as the page url doesn't contain any parameters (url "/TestPage") but whenever I pass along a parameter (url "/TestPage/dummyParam") the page loads but the styling for the Telerik components are wrong (missing?)

As a sidenote, I get exactly the same weird behavior with a <a href="/TestPage/dummyParam" target="_blank"> so not an option.

Depending on what kind of Telerik components I've added to the opened page I get different errors.
A TelerikButton simply looks ugly but if I add a TelerikTextBox I get an exception  "Error: Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initTextBox' ('TelerikBlazor' was undefined)."

Were thinking maybe components were rendered too early so tried to show them only after OnAfterRender(), but still the same problems. Changing to prerender: false ( @rendermode="new InteractiveServerRenderMode(prerender: false) ) didn't help at all but I'm mostly grabbing at straws at this time..

I've made a very simple sample app demonstrating this problem, see zip.

1. Start page, all looks ok.

2. Pressing  "open in new tab, no param" button, the TestPage is opened in new tab and everything looks fine, correct visuals etc.

3. Back to Home, press "open in new tab, one param" button, exactly the same TestPage is opened in a new tab but styles are now missing, layout is wrong and exceptions reported depending on what controls have been added.

4. Back to Home, pressing the href link, same behavior as nr 3.

Does the "open in new tab" break the SPA boundaries? The answer to my problem is probably obvious, but I just can't see it at the moment.

Nadezhda Tacheva
Telerik team
 answered on 31 May 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?