confirm modal window when deleting a row from grid

11 posts, 0 answers
  1. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 16 Apr 2013 Link to this post

    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
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 16 Apr 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 17 Apr 2013 Link to this post

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

    Regards,
    Daniel
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 17 Apr 2013 Link to this post

    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!
  6. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 18 Apr 2013 Link to this post

    Ok,thank you,i will try it.
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 19 Apr 2013 Link to this post

    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!
  8. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 24 Apr 2013 Link to this post

    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.
  9. mohamed
    mohamed avatar
    6 posts
    Member since:
    Apr 2014

    Posted 29 Apr 2014 in reply to Dimiter Madjarov Link to this post

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










  10. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 30 Apr 2014 Link to this post

    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.

     
  11. mohamed
    mohamed avatar
    6 posts
    Member since:
    Apr 2014

    Posted 05 May 2014 in reply to Dimiter Madjarov Link to this post

    thank you
  12. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 06 May 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready