CODEWITHSUNDEEP
kendo-uikendo-gridkendo-asp.net-mvc
KeenUser
KeenUser

Reputation: 5525

Kendo grid - How to use different button texts on Add and Edit?

I have a simple customization to make on my Inline Editable Kendo grid.

That is When I Add a new record, The Update button should be showing 'Insert' and on Edit mode, it should have the default 'Update' button name.

I know I can replace the button names using commands as shown below

columns.Command(commands =>
                {

                    commands.Edit()
                        .Text("MyCustomEdit")
                        .UpdateText("MyCustomUpdate")
                        .CancelText("MyCustomCancel");


                })

But only in case on Insert new record, how can I achieve this?

To make it more clear, we have Updateand Cancelbuttons displayed on click of Insert New recordas well as on click of Edit(Editing an existing grid row).

On click of Insert New record I want to see the text of the Update button as Create, where as on editing an existing row, the text of the button should remain as Update

On Insert enter image description here

On Edit enter image description here

Upvotes: 3

Views: 6047

Answers (2)

KeenUser
KeenUser

Reputation: 5525

Found a way by having below code in Edit event

function OnEdit(e){
    if (e.model.isNew())
    {

        var update = $(e.container).parent().find(".k-grid-update");
        $(update).html('<span class="k-icon k-update"></span>Insert');
    }
}

Upvotes: 4

vapcguy
vapcguy

Reputation: 7545

You can find your button using jQuery in this way. If you wanted to change the text of "Add New", for example, it is based on your controller name and the function the grid calls for its "Read" operation. Say your Controller is "FlowerController" and its Read function is "Flower_Read":

$(document).ready(function() {
    $('a[href="/Flower/Flower_Read?grid-mode=insert"]').html('span class="k-icon k-update"></span>Add New Flower');
});

For the Update button on the row itself, you could do something like:

$('a[href="/Flower/Flower_Read?grid-mode=insert"]').click(function() {
    setTimeout(function() {
      $('a[class*="k-grid-update"]').html('<span class="k-icon k-update"></span>Create');
    }, 500);
});

The timeout needs to be added because of the delay in building the DOM.

Upvotes: 1

Related Questions