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.
@rendermode="new InteractiveWebAssemblyRenderMode(prerender: true)
<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;
}
}
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()
@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();
}
}
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.
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.