CODEWITHSUNDEEP
javascriptc#asp.netkendo-uikendo-grid
Baiju Christadima
Baiju Christadima

Reputation: 23

How to override create button click in the kendo grid

I have a kendo grid

@(Html.Kendo().Grid<Spectrum.Model.Bid>()
        .Name("BatchBidGrid")
        .HtmlAttributes(new { style = "height:460px;" })
        .Columns(columns =>
        {
            columns.Bound(p => p.LotNumber).Title("Lot #").Width(250);
            columns.Bound(p => p.Amount);
            columns.Bound(p => p.BidMessageID).Title("% Increase");
            columns.Command(command => command.Destroy()).Width(110);
        })
        .ToolBar(toolbar =>
        {
            toolbar.Create();
            toolbar.Save();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable()
        .Sortable()
        .Navigatable(n => n.Enabled(true))
        .Events(ev => ev.Edit("onEdit"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Events(events => events.Error("error_handler"))
            .Model(model => model.Id(p => p.ID))

            .Read("Editing_Read", "Grid")
            .Update("Editing_Update", "Grid")
            .Destroy("Editing_Destroy", "Grid")
        )
        .Events(ev => ev.SaveChanges("submitBatchBid"))
)

I want to override the create button click event of this grid I have done the following java script function.

$("tr .k-grid-add", "#grid").on("click", function (e) {
            alert("add pressed!");
        })

But it is still calling the default grid create function of kendo. Please advice a way to do this.

Upvotes: 0

Views: 3130

Answers (2)

Ryan Hoyle
Ryan Hoyle

Reputation: 91

I was able to override this by using both:

e.preventDefault(); 
e.stopPropagation();

Upvotes: 1

erikscandola
erikscandola

Reputation: 2936

You need to add this part:

e.preventDefault();

at the beginning of your function. This line of code stop the normal code executing and it go ahead with code in your function.

UPDATE

Replace the toolbar button:

.ToolBar(toolBar => toolBar.Template("<a href=\"\" class=\"k-button k-button-icontext k-grid-myadd\"><span class=\"k-icon k-add\"></span>Add new record</a>"))

Then change you javascript with class k-gri-myadd:

$("tr .k-grid-myadd", "#grid").on("click", function (e) {
    e.preventDefault();
    alert("add pressed!");
})

Upvotes: 1

Related Questions