Rank 1
Iron
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;
}
}
}
}
1 Answer, 1 is accepted
Rank 1
Iron
I found out the cause of the problem.
It was a problem with the css file.
I applied a new theme to create a different UI and this was the cause of the problem.
When I linked the original css file, it worked fine.
wrong css link : <link rel="stylesheet" href="~/css/theme/default_nordic/default.css" />
fixed css link : <link rel="stylesheet" href="_content/telerik.ui.for.blazor/css/kendo-theme-default/all.css" />
Unfortunately, I was unable to reproduce the same results from the provided Telerik Example and there isn't anything in the provided Grid markup that would indicate an issue.
To fully troubleshoot this, I recommend providing a runnable sample that reproduces the behavior.