Questions on UI for Blazor Forum

1 answer

1.0K+ views

I have a Blazor server app which I am using to upload photos. I am attempting to use the Window and Upload components to have a modal dialog.

It is unclear to me from the examples WHEN does the Upload component attempt to call the API Controller. Also, I need to specify exactly where to place the uploaded picture. I have a special folder off the root for photos and folders within that to "group" the photos.

How do I pass the "group" to the controller from the Upload component?

Eventually, this app will be used on tablets and phones and I will want to upload from the device storage OR from the camera. I don't see anything related to that.

Upload

Window

answered on 19 Jun 2021

0 answers

585 views

I need a Grid cell template that will make certain cells bold based on a boolean value.

I have the need to display certain grid values bold as to highlight them to the user.

I have created a template like so:

            <GridColumn Field="@(nameof(ManufacturerSettingsInfo.Region1))" Width="80px" Filterable="false" Groupable="false">
                <Template>
                    @{
                        var row = context as ManufacturerSettingsInfo;
                        if (true)
                        {
                            <span style="font-weight:bold;">@(Converter.ConvertToBlankOrFormattedDecimal(row.Region1))</span>
                        } 
                        else
                        {
                            <span>@(Converter.ConvertToBlankOrFormattedDecimal(row.Region1))</span>
                        }
                    }
                </Template>
            </GridColumn>

However the cells with the font-weight bold styling do not show up as bold and look the same as the other cells.

N.B. I am able to change the font-size but I can't seem to change the font-weight.

Do you know how I can achieve this?

UPDATE: This is working as expected, it was an issue with my CSS not using the correct font-family for a bold font face.

Grid

updated question on 18 Jun 2021

4 answers

270 views

TileLayout update HeaderText from TelerikCalendar need two StateHasChanged calls

Hi,

in https://docs.telerik.com/blazor-ui/knowledge-base/tilelayout-rendering-contents is written, that StateHasChanged must called to Update the HeaderText. But with a TelerikCalendar in Content the HeaderText is one click to late:

@page "/test"

<TelerikTileLayout>
    <TileLayoutItems>
        <TileLayoutItem HeaderText="@date.ToShortDateString()">
            <Content>
                <TelerikCalendar Value="@date" ValueChanged="@CalendarValueChangedHandler" />
            </Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

@code {

    DateTime date { get; set; } = DateTime.Today;

    public async void CalendarValueChangedHandler(DateTime newDate)
    {
        date = newDate;
        StateHasChanged();
        // await Task.Delay(50).ContinueWith(o => { InvokeAsync(StateHasChanged); });
    }

}

I have to add a second call to StateHasChanged with a minimal Delay of 50 ms.

It works with the line:

await Task.Delay(50).ContinueWith(o => { InvokeAsync(StateHasChanged); });

But this behavior is not normal?

Regards,

Peter

Calendar

TileLayout

updated answer on 18 Jun 2021

1 answer

318 views

Hierarchical grid structure and OnStateChanged

I've got a hierarchical grid structure and I want to use the OnStateChanged event in the (0...N) child grids and do things with the state of the grid that has changed, but it seems impossible because there doesn't appear to be a way to work out which child grid is firing the event.

Within OnStateChangedHandler(GridStateEventArgs<T> args), args doesn't contain a reference back to the grid that's changed.
Obviously the top-level parent grid is easy enough, but I'm completely stumped with the children...

Has anyone succeeded in doing this?

Grid

answered on 17 Jun 2021

1 answer

347 views

Grid toolbar components are vertical misaligned

Inside the grid toolbar I have a mix of components: dropdownlist, command buttons and toogle buttons in a toggle button group.
Everything works fine, the problem is that the vertical alignment of the dropdown lists and the toggle button group is different from that of the command buttons (see attached image).
I tried different styles or wrapping everything in a div and setting the styles but have not been successful.
Could you tell me that I should modify in order to get the buttons vertically aligned?

Thanks.

Grid

ToolBar

answered on 17 Jun 2021

1 answer

1.1K+ views

Rename file on upload

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.4K+ 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