Delete Record on Confirm popup

5 posts, 1 answers
  1. Gaetano
    Gaetano avatar
    71 posts
    Member since:
    May 2012

    Posted 25 Feb 2014 Link to this post

    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
  2. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 25 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Gaetano
    Gaetano avatar
    71 posts
    Member since:
    May 2012

    Posted 26 Feb 2014 in reply to Gaetano Link to this post

    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
  4. Answer
    Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 26 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Gaetano
    Gaetano avatar
    71 posts
    Member since:
    May 2012

    Posted 28 Feb 2014 in reply to Rosen Link to this post

    now it works, thanks
Back to Top