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.