Questions on UI for Blazor Forum

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

answered on 16 Jun 2021

1 answer

712 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

375 views

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

183 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

1.0K+ 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

520 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.2K+ 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

1 answer

598 views

Custom FilterMenuTemplate - await for async data to load.

I have a Telerik Blazor Grid where I have implemented a custom FilterMenuTemplate which is used on 12 of the columns in the grid.

The custom FilterMenuTemplate displays a checkbox for all the distinct values in the database for that column field.

It takes approximately 2-3 seconds for the data to be returned from the database, and this is for each column.

When I first implemented the custom FilterMenuTemplate I only added it to a single column and it worked fine. Since adding it to all 12 columns I have experienced a null reference exception. The exception happens when the data hasn't finished being returned from the database and the collection Data property in the custom FilterMenuTemplate is null.

I added a null check like so to stop the null reference exception from being thrown, instead displaying a message to the user that the data is loading...:

<div class="filter-values-container">
    @if (Data == null)
    {
        <p>Loading filter values...</p>
    }
    else
    {
        foreach (var item in Data)
        {
            <div>
                <TelerikCheckBox Value="@(CurrentDistinctValueFilters.Contains(item.Key.ToString()))"
                                 ValueChanged="@((bool value) => CheckBoxValueChanged(value, item.Key.ToString()))"
                                 Id="@($"{Field}_{item.Key}")"
                                 Enabled="@EnableDistinctValues"/>
                <label for="@($"{Field}_{item.Key}")" class="k-label k-form-label">
                    @item.Value
                </label>
            </div>
        }
    }
</div>

What I was hoping would happen is that once the user clicks on the column filter, that the filter popup would temporarily show the loading message and then dynamically update and remove the loading message instead show the checkboxes once the Data property had data from the database.

This doesn't appear to happen, instead the filter popup remains open and the loading message stays on screen. In order to get the filter popup to update with the checkboxes the user has to cancel the filter popup and re-active it to show the data.

Is there away of updating the filter popup dynamically once it is open and the data is available to render the checkboxes?

As a temporary crud workaround what I have none for now is disabled all the columns with these particular custom filters by binding the Filterable property on those columns to a boolean property which gets set to true when ALL the data for ALL 12 of those columns have been retrieved from the database.

e.g.

Filterable="@DataLoadedForGridFilters"

The downside to this is that none of those 12 column filters are enabled to be used for about 25+ seconds after the grid and then the associated column filter data have been retrieved from the database.

Grid

answered on 14 Jun 2021

1 answer

233 views

Returning Values & Text selections from the multiselect

I need to return separate variables for the selected values (which will be used to query the data) and selected Text that will be use to populate a textbox on the page to show the user what they selected. I have a multiselect embedded within a Telerik Window so it pops-up, they select items and press the select button I have and the pop-up is hidden. it's returning the selected values but how do I also bind to the selected text?

MultiSelect

answered on 11 Jun 2021