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