Questions on UI for Blazor Forum

0 answers

638 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

318 views

[Solved] 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

359 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

415 views

[Solved] 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.2K+ views

[Solved] 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.7K+ 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.1K+ views

[Solved] 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