confirm modal window when deleting a row from grid

[Daniel]

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

[Dimiter Madjarov]

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

[Daniel]

can you show me an example with modal window to simulate a yes/no confirmation box for deleting a row?

Regards,
Daniel

[Dimiter Madjarov]

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

[Daniel]

Ok,thank you,i will try it.

[Dimiter Madjarov]

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

[Daniel]

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.

[mohamed]

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());
        }

[Dimiter Madjarov]

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

 

 

[mohamed]

thank you

[Dimiter Madjarov]

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

 

 

[Gary]

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();
                });

[Gary]

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);
        }

[Gary]

Please delete this post. Not related to the topic and I figure out what I was not doing.