Core Grid: No Edit Button but having the ability to add a record inline with a Save Button

[Cynthia]

I have a grid that only has a Delete button defined.  The user can add a new record inline.  How can I show the Save and Cancel buttons instead of the Delete button.  They should not have an Edit button option.

Here is my code snippet:

@(
Html.Kendo().Grid<CommunityAssociationMasterModel>()
    .Name("CommunityAssociationMasterList")
    .Columns(columns =>
    {
        columns.Bound(p => p.DistrictCode).Title("District").Width(70);
        columns.Bound(p => p.IndexNumber).Title("Index").Width(100);
        columns.Bound(p => p.CreditName).Title("Credit");
        columns.Command(command => { command.Destroy(); }).Width(210);
    })
    .ToolBar(toolbar => { toolbar.Create().Text("Add Credit Account"); toolbar.Excel(); })
    .Sortable()
    .Scrollable()
    .Pageable()
    .HtmlAttributes(new { style = "height:650px;" })
    .Events(events => events.Change("onChange"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Events(events => events.Error("error_handler"))
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(p => p.MasterCreditId);
            model.Field(p => p.DistrictCode);
            model.Field(p => p.IndexNumber);
            model.Field(p => p.CreditName).DefaultValue("Community Assoc Credit").Editable(false);
        })
        .Read(read => read.Action("CommunityAssociation_Read", "CommunityAssociation"))
        .Create(create => create.Action("CommunityAssociation_Create", "CommunityAssociation"))
        .Destroy(read => read.Action("CommunityAssociation_Delete", "CommunityAssociation"))
        )

I'm sure this is easy but I'm just not finding it.

[Eyup]

Hi Cynthia,

 

Thank you for reaching out.

To achieve your requirement—showing only the Delete button in normal mode, and displaying Save and Cancel buttons when adding a record inline (without an Edit button)—you need to enable inline editing on the Grid. The Save and Cancel buttons will automatically appear when a new row is added inline, even if you do not specify an Edit command.

How to configure your Grid:

• Enable inline editing by adding .Editable(editable => editable.Mode(GridEditMode.Inline)) to your Grid configuration.
• Do not define the Edit command in your columns.
• The Delete button will be visible in normal mode. When you click "Add Credit Account," the Save and Cancel buttons will appear for the new row.

Here’s how your updated Grid configuration should look:

@(Html.Kendo().Grid<CommunityAssociationMasterModel>()
    .Name("CommunityAssociationMasterList")
    .Columns(columns =>
    {
        columns.Bound(p => p.DistrictCode).Title("District").Width(70);
        columns.Bound(p => p.IndexNumber).Title("Index").Width(100);
        columns.Bound(p => p.CreditName).Title("Credit");
        columns.Command(command => { command.Destroy(); }).Width(210);
    })
    .ToolBar(toolbar => { toolbar.Create().Text("Add Credit Account"); toolbar.Excel(); })
    .Editable(editable => editable.Mode(GridEditMode.Inline)) // Enable inline editing
    .Sortable()
    .Scrollable()
    .Pageable()
    .HtmlAttributes(new { style = "height:650px;" })
    .Events(events => events.Change("onChange"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Events(events => events.Error("error_handler"))
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(p => p.MasterCreditId);
            model.Field(p => p.DistrictCode);
            model.Field(p => p.IndexNumber);
            model.Field(p => p.CreditName).DefaultValue("Community Assoc Credit").Editable(false);
        })
        .Read(read => read.Action("CommunityAssociation_Read", "CommunityAssociation"))
        .Create(create => create.Action("CommunityAssociation_Create", "CommunityAssociation"))
        .Destroy(read => read.Action("CommunityAssociation_Delete", "CommunityAssociation"))
    )
)

Key Points:

• The Save and Cancel buttons are shown automatically for new rows in inline edit mode.
• No Edit command is needed, so users cannot edit existing records inline—only add and delete.
• This is the default behavior for the Grid in inline editing mode.

Further Customization: If you want to customize the appearance or template of the Save and Cancel buttons, there is a relevant feature request:

• https://feedback.telerik.com//aspnet-core-ui/1671857-add-updatetemplate-and-canceltemplate-options-for-the-edit-command

 

Please apply the suggested approach and keep me updated on the result.

 

Regards,
Eyup
Progress Telerik

[Cynthia]

I'm sorry this did not work.

I'm wondering if it is the version that I'm referencing in the CDN.

 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <script src="https://kendo.cdn.telerik.com/2025.2.520/js/kendo.all.min.js"></script>
 <script src="https://kendo.cdn.telerik.com/2025.2.520/js/kendo.aspnetmvc.min.js"></script>

 

[Eyup]

Hi Cynthia, 

Yeah, I was now able to notice the issue:

Please add this part to your Grid command column definition:

 columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

As demonstrated here:
https://demos.telerik.com/aspnet-core/grid/editing-inline

Give it a try and let me know about the result.

[Cynthia]

Hi,

No, I'm sorry, but this is the original problem.  I can't have an Edit button visible.

[Eyup]

Hey Cynthia,

Excuse me for missing that. The most straightforward way of achieving it would be:

<style>
    .k-grid-edit-command{
        display: none;
    }
</style>

Here is a live sample I have prepared for your convenience:
https://netcorerepl.telerik.com/wflYmQkP43zsO5sv35 

Will that work for you? Let me know if you have further instructions.

 

[Cynthia]

Thank you so much for your help!