Set Different In-Line Button Text for Update vs. Create

1 Answer 173 Views
Grid
Sydney
Top achievements
Rank 1
Sydney asked on 01 Mar 2023, 03:07 PM

I have a Grid with the 'Add New Record' functionality implemented with the basic `.Toolbar(t => t.Create())`.

I have my grid set to be `.Editable(e => e.Mode(GridEditMode.Inline))`, along with this: `.Columns(c  => { c => c.Command(x => x.Edit().Visible("editVisible"); })`

Whether I click the Toolbar 'Create' button or I click the 'Edit' button on an already existing record, the inline buttons say 'Update' and 'Cancel' , but I'd like the 'Update' button to say 'Create' when it is a new record.

I'm wondering what might be the best way to accomplish the above?

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 06 Mar 2023, 01:10 PM

Hello Sydney,

You can change the text of the button the following way:

1. Attach a handler to the Edit event of the Grid:

.Events(events => events.Edit("onEdit"))

2. In the handler use the API to check if the event has fired for a new record (it fires when editing an existing record, or when adding a new one), then find the button and set its text with jQuery:

function onEdit(e) {
    //Check if the Edit event fires for a new record:
    if (e.model.isNew()) {
        //Find the "update" button and change its text: 
        var button = e.container.find(".k-grid-update .k-button-text");
        button.text("Create");
    }
}

Regards,
Ivan Danchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Sydney
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or