This is a migrated thread and some comments may be shown as answers.

confirm modal window when deleting a row from grid

13 Answers 1397 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 16 Apr 2013, 08:08 AM
Hello,
How can i add a confirm modal window when deleting a row from the grid?
i was inspired by this example,
http://jsfiddle.net/Xtreu/ because of the gray colors that fits with the default theme from kendo ui.
but because i am not using it in a form,i do not know how to make it modal.

Regards,
Daniel

13 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 16 Apr 2013, 08:52 AM
Hello Daniel,


To achieve this you should specify a custom command instead of the default delete command. In the handler for the custom command you could display the modal window and manually delete the row through the Grid API.

 

Regards,
Dimiter Madjarov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 17 Apr 2013, 06:57 AM
can you show me an example with modal window to simulate a yes/no confirmation box for deleting a row?

Regards,
Daniel
0
Dimiter Madjarov
Telerik team
answered on 17 Apr 2013, 03:03 PM
Hi Daniel,


Here is a sample scenario for adding a custom confirmation box for deleting a row.
E.g.
  1. Add the custom delete command.
    columns.Command(c => c.Custom("Custom Delete").Click("openWindow"));
  2. Add the markup for the window.
    <div id="modalWindow">
        <h2>Delete?</h2>
        <button id="yes" class="k-button">Yes</button>
        <button id="no" class="k-button">No</button>
    </div>
  3. Initialize the Kendo Window on document ready
    var wnd;
    $(document).ready(function () {
        wnd = $("#modalWindow").kendoWindow({
                            title: "Delete confirmation",
                            modal: true,
                            visible: false,
                            resizable: false,
                            width: 300
                        }).data("kendoWindow");
    });
  4. Add the custom command click event handler.
    function openWindow(e) {
        e.preventDefault();
     
        var grid = this;
        var row = $(e.currentTarget).closest("tr");
        wnd.center().open();
     
        $("#yes").click(function () {
            grid.removeRow(row);
            wnd.close();
        });
     
        $("#no").click(function () {
            wnd.close();
        });
    }
You could also use a template for the window and render some data from the current row as demonstrated in the following demo.

 

Kind regards,
Dimiter Madjarov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 18 Apr 2013, 11:42 AM
Ok,thank you,i will try it.
0
Dimiter Madjarov
Telerik team
answered on 19 Apr 2013, 10:23 AM
Hello Daniel,


Thanks for keeping me updated on the topic. Please let me know if you managed to solve the issue or I could assist you further.

Have a great day!

 

All the best,
Dimiter Madjarov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 24 Apr 2013, 07:06 AM
Hello Dimiter,yes finally it's ok,i managed to make a modal confirmation window,also i managed to remove the close button,in order look more like a modal window.

Thank you for the tutorial how to make a modal window.
0
mohamed
Top achievements
Rank 1
answered on 29 Apr 2014, 05:23 PM
HI Dimiter
how can i do for this to have a delete confirmation if i have ActionResult  delete in mycontroller  and this is a part of my view 
if any one can help me thats will be great thank so mutch
columns.Command(command =>
                                            {
                                            command.Edit();
                                            //command.Destroy();
                                            command.Custom("Custom Delete").Click("openWindow");//??
                                            
                                                                                            
                                            }).Width(200);
                 })
                     .DataSource(datasource => datasource.Ajax()
                                                          .Model(model => model.Id(record=>record.IdEntite))
                                                          .Read(read=>read.Action("GetAll","EntiteExterne"))
                                                          .Create( create=>create.Action("Add","EntiteExterne"))
                                                          .Update(update=>update.Action("Update","EntiteExterne"))
                                                          .Destroy(delete=>delete.Action("Delete","EntiteExterne"))// i would delete confirmation 
                                                          .PageSize(10)
                                                          )
                .ToolBar(toolbar =>toolbar.Create())
                .Editable(editable=>editable.Mode(GridEditMode.InLine))
                .Sortable()
                .Selectable()
                .Pageable (pageable=>
                             {pageable.Refresh(true);
                                 pageable.PageSizes(true);
                                 
                                 })
                                 )             
in my controller i have this :
[AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Delete([DataSourceRequest] DataSourceRequest request, EntiteExterne entite)
        {
            // Test if company object and modelstate is valid.           
            if (entite != null && ModelState.IsValid)
            {
                // Delete company from UoW.
                _database.EntiteExternes.Delete(entite);
                // Call to database and delete the deleted record.
                _database.Save();
            }
            // Return modelstate info back to client side in json format.
            return Json(ModelState.ToDataSourceResult());
        }
[AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Delete([DataSourceRequest] DataSourceRequest request, EntiteExterne entite)
        {
            // Test if company object and modelstate is valid.           
            if (entite != null && ModelState.IsValid)
            {
                // Delete company from UoW.
                _database.EntiteExternes.Delete(entite);
                // Call to database and delete the deleted record.
                _database.Save();
            }
            // Return modelstate info back to client side in json format.
            return Json(ModelState.ToDataSourceResult());
        }










0
Dimiter Madjarov
Telerik team
answered on 30 Apr 2014, 08:21 AM
Hi Mohamed,


You could use the built in Grid delete confirmation window. Another option would be to disable it

.Editable(editable => editable.Mode(...).DisplayDeleteConfirmation(false))

and use the approach from my previous post to display a custom confirmation window.

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
mohamed
Top achievements
Rank 1
answered on 05 May 2014, 08:04 PM
thank you
0
Dimiter Madjarov
Telerik team
answered on 06 May 2014, 11:47 AM
Hello Mohammed,


I am glad that the information was helpful. Do not hesitate to contact us again for future Kendo UI issues.

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Gary
Top achievements
Rank 1
answered on 31 May 2017, 08:49 PM

I needed to change openWindow(e) function above as follows for it to work for me:

...

                $("#modalWindow #yes").click(function () {
                    grid.removeRow(row);
                    wnd.close();
                });

                $("#modalWindow #no").click(function () {
                    wnd.close();
                });

0
Gary
Top achievements
Rank 1
answered on 31 May 2017, 08:55 PM

I've implemented the above and it is sortof working.  Here is the behavior I'm experiencing:

1. create a new grid record.

2. click the custom delete button. (record removed from grid but delete controller not run)

3. refresh page (record re-appears in the grid)

4. click the custom delete button again. (delete controller runs and deletes the record)

Should I be doing something after create of new record?

Create controller looks like this:

public ActionResult ElectionLocationCreate([DataSourceRequest]DataSourceRequest request, ElectionLocations model, int id)
        {
            if (ModelState.IsValid)
            {
                var el = new ElectionLocation();
                el.ElectionControlID = id;
                CopyElectionLocationModelToElectionLocation(model, el);
                el.CreatedBy = HttpContext.User.Identity.Name;
                el.CreatedDate = DateTime.Now;
                db.ElectionLocations.Add(el);
                db.SaveChanges();
                //return RedirectToAction("Index");
                return Json(new[] { model }.ToDataSourceResult(request, ModelState));
            }
            //model.IsNew = true;
            return View(model);
        }

0
Gary
Top achievements
Rank 1
answered on 01 Jun 2017, 01:22 AM
Please delete this post. Not related to the topic and I figure out what I was not doing.
Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Daniel
Top achievements
Rank 1
mohamed
Top achievements
Rank 1
Gary
Top achievements
Rank 1
Share this question
or