GridCommandButton don't work ShowInEdit
1 Answer 15 Views
송정훈
Top achievements
Rank 1
Iron
송정훈 asked on 15 Jun 2021, 02:07 AM | edited on 15 Jun 2021, 05:06 AM

 

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
Telerik team
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

Sort by
0
Accepted
송정훈
Top achievements
Rank 1
Iron
answered on 16 Jun 2021, 06:57 AM

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" />

Tags
Grid
Asked by
송정훈
Top achievements
Rank 1
Iron
Answers by
송정훈
Top achievements
Rank 1
Iron
Share this question
or