GridCommandButton don't work ShowInEdit

1 Answer 955 Views

Grid

송정훈 asked on 15 Jun 2021, 02:07 AM | edited on 15 Jun 2021, 05:06 AM

telerik-grid-showinedit.JPG

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;
}
}
}
}

Eric R | Senior Technical Support Engineer

commented on 15 Jun 2021, 09:16 PM | edited

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.

1 Answer, 1 is accepted

Accepted