Questions on UI for Blazor Forum

1 answer

1.1K+ views

I'm having a problem changing the filename on upload. The control reports the file was uploaded with the new name, but the controller's file.ContentDisposition looks like this:

form-data; name="file"; filename="Original.png"

Here's my OnSelectHandler:

 private void OnSelectHandler(UploadSelectEventArgs e)
    {
        if (e.Files.Count > 1)
        {
            e.IsCancelled = true;
        }
        foreach (var file in e.Files)
        {
            file.Name = "New.png";
        }
    }

I've also tried modifying the method to be private Task OnSelectHandler which returned Task.CompletedTask,

Upload

updated answer on 17 Jun 2021

1 answer

5.5K+ views

Passing parameter as object to another page

How to pass parameter as an object to another page(without using model Popup)?

Form

General Discussions

answered on 17 Jun 2021

1 answer

1.0K+ views

GridCommandButton don't work ShowInEdit

I used the "ShowInEdit" function for two buttons. But press the add button and see all four buttons.

The same problem appears when I use not only my source but also the sample source of telerik demo.

I will attach my code, sample code of telerik demo, and execution screen.

Please give me some advice on which part there was a mistake.

=============================== my code ===============================

<div class="form-field-row" style="display:table;height:185px;vertical-align:text-top;">
<TelerikGrid Data="@WspanlList" EditMode="@GridEditMode.Inline"
Pageable="false"
FilterMode="@GridFilterMode.None"
Class="no-scroll"
Reorderable="true"
OnUpdate="@WspanlUpdate" OnDelete="@WspanlDelete" OnCreate="@WspanlCreate">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">품목 추가</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridColumn Field="@nameof(Wspanl.panl)" Width="135px" OnCellRender="@((e) => e.Class = "center-align")">
<HeaderTemplate>
<div style="text-align:center;">품명</div>
</HeaderTemplate>
</GridColumn>
<GridColumn Field="@nameof(Wspanl.spec)" Width="120px">
<HeaderTemplate>
<div style="text-align:center;">규격</div>
</HeaderTemplate>
</GridColumn>
<GridColumn Field="@nameof(Wspanl.qtty)" Width="50px">
<HeaderTemplate>
<div style="text-align:center;">수량</div>
</HeaderTemplate>
</GridColumn>
<GridColumn Field="@nameof(Wspanl.comment)" Title="비고" Width="100px"></GridColumn>
<GridCheckboxColumn SelectAll="false" Title="현재작업" Width="68px" CheckBoxOnlySelection="true"></GridCheckboxColumn>
<GridCommandColumn Width="200px">
<GridCommandButton Command="Edit" Icon="edit" Class="grid-btn-cmd">수정</GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete" Class="grid-btn-cmd">삭제</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" Class="grid-btn-cmd" ShowInEdit="true">저장</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" Class="grid-btn-cmd" ShowInEdit="true">취소</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
</div>

=============================== telerik sample code ===============================

@* This sample showcases custom command handling for:
- the built-in Save command that prevents it based on some condition (Name contains "3")
- a custom command for a row
*@

@page "/TestGrid"

@CustomCommandResult

<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline" OnUpdate="@MyUpdateHandler"
Pageable="true" PageSize="15" Height="500px">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add Item</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="Employee ID" />
<GridColumn Field=@nameof(SampleData.Name) Title="Employee Name" />
<GridColumn Field=@nameof(SampleData.HireDate) Title="Hire Date" />
<GridCommandColumn>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true" OnClick="@CustomSaveClick">Update</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
<GridCommandButton Command="MyOwnCommand" Icon="information" ShowInEdit="false" OnClick="@MyCustomCommandHandler">My Command</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>

@code {
//in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
public class SampleData
{
public int ID { get; set; }
public string Name { get; set; }
public DateTime HireDate { get; set; }
}

List<SampleData> GridData { get; set; }

// sample custom commands handling

async Task CustomSaveClick(GridCommandEventArgs e)
{
SampleData theUpdatedItem = e.Item as SampleData;
// any custom logic
if (theUpdatedItem.Name.Contains("3"))
{
// prevent the operation based on a condition. Will prevent the OnUpdate event from firing
CustomCommandResult = new MarkupString(CustomCommandResult + "<br />Update Click fired. Custom logic prevent it from continuing.");
e.IsCancelled = true;
}
}

MarkupString CustomCommandResult;
async Task MyCustomCommandHandler(GridCommandEventArgs args)
{
CustomCommandResult = new MarkupString(CustomCommandResult + string.Format("<br />Custom command triggered for item {0}", (args.Item as SampleData).ID));

Console.WriteLine("The Custom command fired. Please wait for the long operation to finish");

}

// sample CRUD operations

private async Task MyUpdateHandler(GridCommandEventArgs args)
{
SampleData theUpdatedItem = args.Item as SampleData;

// perform actual data source operations here through your service
await MyService.Update(theUpdatedItem);

// update the local view-model data with the service data
await GetGridData();
}

async Task GetGridData()
{
GridData = await MyService.Read();
}

protected override async Task OnInitializedAsync()
{
await GetGridData();
}

// the following static class mimics an actual data service that handles the actual data source
// replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
public static class MyService
{
private static List<SampleData> _data { get; set; } = new List<SampleData>();

public static async Task<List<SampleData>> Read()
{
if (_data.Count < 1)
{
for (int i = 1; i < 50; i++)
{
_data.Add(new SampleData()
{
ID = i,
Name = "name " + i,
HireDate = DateTime.Now.AddDays(-i)
});
}
}

return await Task.FromResult(_data);
}

public static async Task Update(SampleData itemToUpdate)
{
var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
if (index != -1)
{
_data[index] = itemToUpdate;
}
}
}
}

Grid

answered on 16 Jun 2021

1 answer

668 views

Popup window title

How can I set the title on the Popup window that appears when we use GridEditMode.Popup?

For editing existing data, the title is "Edit".

For adding new data the title is "Add New Record".

Also, the alignment of validation messages seems a bit wonky:

Grid

answered on 15 Jun 2021

1 answer

317 views

How can I decrease the whitespace between nodes?

I have a treeview. And there is too much white space between the nodes. How can I control this?

I have included a screenshot so you see what I mean.

TreeView

answered on 15 Jun 2021

2 answers

147 views

Setting Filterable="true on DropDownList throws an exception

Hello,

When I add the tag Filterable="true" to my DropDownList I get the following exception when I try to click on the dropdown:

" Could not find 'TelerikBlazor.initDropDownListFilter' ('initDropDownListFilter' was undefined)."

The project build without a problem but the error occurs when I click the dropdown. Am I missing a using statement or what could be the problem?

DropDownList

updated answer on 15 Jun 2021

1 answer

965 views

Hide or reduce width for hierarchy grid cells

Hello!
It is possible to hide or reduce width for grid's hierarchy cells?

On mobile devices, this place is very valuable and is not used effectively.

When setting the value of a class property
.k-hierarchy-cell { display = none }
the nested table does not fill the full width of the container

Grid

answered on 15 Jun 2021

1 answer

447 views

Limit Multiselected to single selection?

We have have built a multiselect into a window component that can be pop-up on the host page. We have a few instances where we only want the user to be able to select one item and we would like to pass a parm into our component to limit the multiselect to one item. Is that possible?

MultiSelect

answered on 14 Jun 2021

1 answer

2.1K+ views

Wait for Window action result

Hello!
I am trying to use a Window component as a dialog with awaiting the result of an action.
Until the user presses the confirm or cancel button, the calling code must wait for an action.
In a Dialog component (not a Window component) this is implemented as:

var result = await dialog.Show().Result;

My implemetation for Window component (component have two buttons with OnClick="@Submit(true or false)"):

bool isVisible, dialogResult;
CancellationTokenSource tokenSource;

public async Task<bool> Show() {
   isVisible = true;
   await InvokeAsync(StateHasChanged);
   return await Task.Run(WaitForResult); }

// Waiting for action
private async Task<bool> WaitForResult() {
tokenSource = new();                 
while (!tokenSource.Token.IsCancellationRequested) ;
       isVisible = false;
       await InvokeAsync(StateHasChanged);
       return dialogResult; }

 private async void Submit(bool result) {
       dialogResult = result;
       tokenSource.Cancel(); }

This works, but WaitForResult method is overloading processor.
PLEASE help me with correct impementation...

Window

answered on 14 Jun 2021

1 answer

1.5K+ views

Can a Grid be defaulted to show all the columns 'auto-fit' based on their content?

The Telerik Blazor Grid documentation on column widths mentions that:

To allow the users to auto-fit the column widths to the content, enable column resizing - a double click on the border between the headers will have the grid adjust the column width according to the size of the data, headers and footers content.

Is it possible to generate the grid so that all the columns are set to auto-fit the data by default, rather than it being something that the user has to trigger themselves?

Grid

answered on 14 Jun 2021