how to prevent opening of kendo grid editor pop up

Question

I have two grid. When first has selected row, from other grid,user can create new row correctly. If first has not selected row, a function in javascript alert but can not prevent to opening of pop-up. I need how can i prevent or how to close grid pop-up

Two Grid

//grid code in view

                  @(Html.Kendo().Grid<Kurslar.Models.DonemKursu>()
    .Name("donemGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.DersAdi).Title("Ders").Width(85);
        columns.Bound(p => p.EgitmenAdiSoyadi).Title("Eğitmen").Width(200);
        columns.Bound(p => p.SinifKontenjanSayisi).Title("Kontenjan").Width(80);
        columns.Bound(p => p.DonemBaslangicBitis).Title("Dönem").Width(157);
        columns.Bound(p => p.DonemId).Visible(false);
        columns.Bound(p => p.DersId).Visible(false);
        columns.Bound(p => p.EgitmenId).Visible(false);
        columns.Command(command => { command.Edit().Text("Güncelle"); command.Destroy().Text("Sil"); }).Width(164);

    })
    .Pageable()
    .Sortable()
    .Selectable()
    .HtmlAttributes(new { style = "max-width:700px", id = "donemGrid" })
    .Editable(editable => editable.Mode(GridEditMode.PopUp)
                        .Window(conf => conf.Title("Yeni Kurs"))
                        .TemplateName("DonemKursuTemplate"))
    .ToolBar(toolbar => toolbar.Create().Text("Kurs Ekle"))
    .Events(e => e.Edit("onEdit").Change("change"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read("GridDonemKurslari", "Tanim")
        .Create(create => create.Action("DonemKursuOlustur", "Tanim"))
        .Update(update => update.Action("DonemKursuGuncelle", "Tanim"))
        .Destroy(destroy => destroy.Action("DonemKursuSil", "Tanim"))
        .PageSize(20)
        .Model(model => model.Id(p => p.DonemId))


    )
)
            </td>
            <td style="vertical-align:top;max-width:600px">
                <h4>Sınıflar</h4>

                @(Html.Kendo().Grid<Kurslar.Models.DonemKursSinifi>()
    .Name("sinifGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Tanim).Width(50).Title("Tanim");
        columns.Bound(p => p.DersAdi).Width(50).Title("Ders");
        columns.Bound(p => p.EgitmenAdiSoyadi).Width(50).Title("Eğitmen");
        columns.Bound(p => p.KontenjanSayisi).Width(50).Title("Kontenjan");
        columns.Bound(p => p.DonemBaslangicBitis).Width(50).Title("Dönem");
        columns.Bound(p => p.TarifeId).Width(50).Title("Tarife");
        columns.Bound(p => p.DonemId).Visible(false);
        columns.Bound(p => p.DersId).Visible(false);
        columns.Bound(p => p.EgitmenId).Visible(false);
        columns.Command(command => { command.Edit().Text("Güncelle"); command.Destroy().Text("Sil"); }).Width(180);

    })
    .Pageable()
    .Sortable()
    .AutoBind(false)
    .Editable(editable => editable.Mode(GridEditMode.PopUp)
                      .Window(conf => conf.Title("Yeni Sınıf"))
                        .TemplateName("DonemKursSinifiTemplate"))
                        .Name("pencere")
    .ToolBar(toolbar => toolbar.Create().Text("Sınıf Ekle"))
    .Events(e => e.Edit("onEditSinif"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GridDonemKursSinifi", "Tanim").Data("data"))
        .Create(create => create.Action("DonemKursSinifiOlustur", "Tanim").Data("dataCreate"))
        .Update(update => update.Action("DonemKursSinifiGuncelle", "Tanim"))
        .Destroy(destroy => destroy.Action("DonemKursSinifiSil", "Tanim"))
        .PageSize(20)
        .Model(model => model.Id(p => p.Id))
     )
     .Resizable(resize => resize.Columns(true))
)
// some unnecessary code block

onEditSinif function in javascript

function onEditSinif(e) {
        var grid = $("#donemGrid").data("kendoGrid");
        var rows = grid.select();

        if (e.model.isNew()) {
            try {
                var kontenjan = grid.dataItem(rows).SinifKontenjanSayisi;
                var dersAdi = grid.dataItem(rows).DersAdi;
                var egitmenAdiSoyadi = grid.dataItem(rows).EgitmenAdiSoyadi;
                var donemBaslangicBitis = grid.dataItem(rows).DonemBaslangicBitis;
                $("#DonemBaslangicBitis").val(donemBaslangicBitis);
                $("#DersAdi").val(dersAdi);
                $("#EgitmenAdiSoyadi").val(egitmenAdiSoyadi);

                var firstItem = $('#sinifGrid').data().kendoGrid.dataSource.data()[0];
                firstItem.set('KontenjanSayisi', kontenjan);

                $("#KontenjanSayisi").val(kontenjan);
            } catch (f) {
                alert("Please select Kurslar first");

                // i need to prevent pop up here ** 
            }

        }
        else {
            $('.trhideclass1').hide();        
        }
    }

is there anyone know how it is?

Thanks

Answer 1

You cannot prevent the editing like this, because the edit event is triggered after the Window has opened, which means - it is too late :).

What you can do instead is to create template column with a button inside which triggers a JavaScript function and based on your condition you can use the methods of the Grid addRow / editRow and so on. Most of the things I mentioned are covered here.

Answer 2

You can close popup edit form, that has been already created by inner mechanism of Kendo editing:

function Grid_OnEdit(e) {
        if (!isCorrectStatus(e.model.StatusID)) {
            var grid = this;
            setTimeout(function () {
                grid.cancelRow();
                alert("Bad status!");
            });
        }   
}

But the popup edit form flicks... There is no good way to prevent showing the editing form correctly, only do it "by hand"...

Answer 3

Start editing form “by hand”. With checking before editing:

function editDoc () {   
    var grid = $("#DocGrid").data("kendoGrid");
    var rows = grid.select();
    var currentDataItem = grid.dataItem(rows);
    var status = currentDataItem.StatusID;
    if (!isDocumentGoodStatus(status)) {
        showWarning(“Bad status!”, null);
        return;
    }    
    // fire edit event 
    grid.editRow(currentDataItem);    
}

Function editDoc is called from menu or any button instead off “standard way” by means of clicking edit button in command column in grid