Delete Record on Confirm popup

[Gaetano]

Hi guys, I have this grid:

@(Html.Kendo().Grid<Entity>(Model)
        .Name("valueGrid")
        .ToolBar(commands => commands.Create().Text("Add new value"))
        .Columns(columns =>
        {
            columns.Bound(c => c.DOMAINID).Visible(false);
            columns.Bound(c => c.CODE);
            columns.Bound(c => c.VALUE);
            columns.Command(command => { command.Edit().UpdateText("Save"); command.Destroy().Text("Delete"); });
        })
        //.Events(e => e.SaveChanges("OnSaveChanges"))
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
        .Ajax()
        //.Events(e => e.Error("OnDatasourceError"))
        .ServerOperation(false)
        .Model(m => m.Id(v => v.CODE))
        .Update(update => update.Action("UpdateValue", "DomainValue"))
        .Create(create => create.Action("CreateValue", "DomainValue"))
        .Destroy(delete => delete.Action("DeleteValue", "DomainValue"))
     )
    )

and I noticed that the delete action is called as soon as the user click on remove command, even if the confirmation popup is displayed.
I need to invoke the action only on the confirm from the user. I search a bit online but everyone is doing this with a custom popup.
I remember, however, that in another project I've done that automatically, but I wasn't using MVC back there.

Thanks
Fabio

[Rosen]

Hi Fabio,

Unfortunately, I'm not able to recreate such behavior locally using the provided details. Could you please prepare a small sample in which this issue can be observed and send it to us for further investigation.

Regards,
Rosen
Telerik

[Gaetano]

Hi Rosen, I don't know to to reproduce a MVC example...Usually I write some code on JsBin...

Anyway, I tried something:

If I call my view as the first page of the project, everything works fine.
My Scenario however is a little bit different.
I structured my project like this:

@{
    ViewBag.Title = "example";
}

@using Kendo.Mvc.UI;

<section class="Tabs">

    @(Html.Kendo().TabStrip()
          .Name("MainTab")
          .Items(tabstrip =>
          {

              tabstrip.Add().Text("ex1").Content(
                  @<text>
                    <section class="shadowBox">@Html.Partial("aViewl")</section>
                  </text>);

              tabstrip.Add().Selected(true).Text("Domains").Content(
                  @<text>
                    <section class="DomainIndex shadowBox">@Html.Partial("~/Views/Domain/_DomainIndex.cshtml")</section>
                  </text>);
          })
    )
</section>

This is my start view

my _DomainIndex look like this:

@model namespace.Entity

@using Kendo.Mvc.UI

@Scripts.Render("~/bundles/domain")



<section class="DomainList">
    <hgroup>
        <h2>Domain List</h2>
    </hgroup>

    <button class="k-button k-button-icontext k-add-button" onclick="addNewDomain()"><span class="k-icon k-add"></span>Add new Domain</button>

    @(Html.Kendo().ListView<Entity>()
    .Name("domainListView")
    .Pageable()
    .Selectable()
    .TagName("div")
    .ClientTemplateId("domLvTemplate")
    .DataSource(source => {
        source.Model(model => model.Id("ID"));
        source.Read(read => read.Action("GetDomainIndex", "Domain"));
        source.Destroy(destroy => destroy.Action("DeleteDomain", "Domain").Type(HttpVerbs.Post));
        source.PageSize(6);
        })
        .Events(e =>
        {
            e.Change("onListChange");
            e.DataBound("onListDataBound");
        })
    )

</section>

<section class="DomainGrid">
     <hgroup>
        <h3>Domain Detail</h3>
    </hgroup>

</section>

<section class="DomValues">
    <hgroup>
        <h3>Value List</h3>
    </hgroup>

</section>


<script type="text/x-kendo-tmpl" id="domLvTemplate">
    <div class="domainListItem">
            <div class="edit-buttons">
                <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
            </div>
            <dl>
                <dt>Name</dt>
                <dd>#:NAME#</dd>
                <dt>Description</dt>
                <dd>#:DESCRIPTION#</dd>
            </dl>
        </div>
</script>

on listview change event I call 2 actions throught ajax and I append the respons on the 2 empty sections.
The grid I wrote on main post goes inside "section.DomValues"
and here is my event handler

function onListChange(e) {
    var index = this.select().index();
    var selectedObj = this.dataSource.view()[index];
    var id = selectedObj.ID;

    var valueListUrl = "../DomainValue/Details/" + id

    $.ajax({
        url: valueListUrl,
        type: 'GET',
        datatype: 'html',
    }).done(function (success) {
        $("section.DomValues").find("div.detailValuesForm").remove(); //remove current content
        $("section.DomValues").append(success); //append new one
    }).fail(function (jqXHR, textStatus) {
        if (jqXHR.status = "404") {
            $("section.DomValues").find("div.detailValuesForm").remove();
            $("section.DomValues").append($("<div>").addClass("detailValuesForm").text("No value associated."))
        }
    });

};

There should be something wrong in this structure that is causing this behaviour (and also some other weird things I posted about in kendo ui web grid thred as well)
I really don't know what could be. Thisw is my first MVC project and I don't even know if I'm doing things in the best way.

Hope this can help you figure out what's wrong.
Thank you

Fabio
Fabio

[Rosen]

Hi Fabio,

I'm afraid still unable to replicate the issue using the provided information. Therefore, you should provide a sample application which demonstrate your exact scenario in which the issue can be observed locally. Feel free to create a jsBin test page if it is sufficient to recreate the issue in question.

On a side note looking at the provided spinets I have noticed that you are not destroying the Grid widget before replacing its container's content. 

$.ajax({
        url: valueListUrl,
        type: 'GET',
        datatype: 'html',
    }).done(function (success) {
          kendo.destroy( $("section.DomValues"));

        $("section.DomValues").find("div.detailValuesForm").remove(); //remove current content
        $("section.DomValues").append(success); //append new one
    }).fail(function (jqXHR, textStatus) {
            //...
    });

Regards,
Rosen
Telerik

[Gaetano]

now it works, thanks