joeharrison714 / MVCGrid.Net

http://mvcgrid.net
MIT License
74 stars 55 forks source link

Javascript Confirm before delete #53

Open dukefama opened 8 years ago

dukefama commented 8 years ago

I want to appreciate the guys that has been contributing to this project. Well Done. Please, i have a small challenge around using a button that I can click and it would call the javascript confirm button.

Summary is , I can add a button but it does not execute the javascript confirm command. How can I work around this?

Thank you

joeharrison714 commented 8 years ago

Can you post a code sample of what you are trying to do?

dukefama commented 8 years ago

` MVCGridDefinitionTable.Add("GradingDetailsListGrid", new MVCGridBuilder(defaultSet1, colDefaults) .WithAuthorizationType(AuthorizationType.AllowAnonymous) .AddColumns(cols => { // Add your columns here cols.Add().WithColumnName("MinScore") .WithHeaderText("Minimum Score") .WithValueExpression(i => i.MinScore.ToString()) .WithFiltering(true); cols.Add().WithColumnName("MaxScore") .WithHeaderText("Max Score") .WithValueExpression(i => i.MaxScore.ToString()) .WithFiltering(true); cols.Add().WithColumnName("Grade") .WithHeaderText("Grade") .WithValueExpression(i => i.Grade) .WithFiltering(true); cols.Add().WithColumnName("Remarks") .WithHeaderText("Remarks") .WithValueExpression(i => i.Remarks) .WithFiltering(true); cols.Add("Edit").WithHtmlEncoding(false) .WithSorting(false) .WithHeaderText(" ") .WithValueExpression((p, c) => c.UrlHelper.Action("DetailsEdit", "Gradings", new { id = p.ID })) .WithValueTemplate("Update"); cols.Add("Delete").WithHtmlEncoding(false) .WithSorting(false) .WithHeaderText(" ") .WithValueExpression((p, c) => c.UrlHelper.Action("DetailsRemove", "Gradings", new { id = p.ID })) .WithValueTemplate("<a href='{Value}' class='btn btn-danger btn-xs' onclick = 'return confirm('Are you sure you wish to delete this Template?');' role ='button'>Remove ");

     })
      .WithSorting(true, "Remarks")
      .WithPaging(true, 25, true, 100)
      .WithFiltering(true)
      .WithPageParameterNames("SchoolID")
      .WithPageParameterNames("GradingID")
     .WithRetrieveDataMethod((context) =>
     {
         var options = context.QueryOptions;
         var result = new QueryResult<GradingsDetail>();

         using (SchoolsDBContext db = new SchoolsDBContext())
         {

             long SchoolID = context.QueryOptions.GetPageParameterString("SchoolID").ToLong();
             long GradingID = context.QueryOptions.GetPageParameterString("GradingID").ToLong();

             var query = db.GradingsDetails.Where(x => x.SchoolID == SchoolID && x.GradingID == GradingID).AsQueryable();
             result.TotalRecords = query.Count();

             if (!String.IsNullOrWhiteSpace(options.SortColumnName))
             {
                 switch (options.SortColumnName.ToLower())
                 {
                     case "remarks":
                         if (options.SortDirection == SortDirection.Asc)
                         {
                             query = query.OrderBy(p => p.Remarks);
                         }
                         else
                         {
                             query = query.OrderByDescending(p => p.Remarks);
                         }
                         break;
                     case "minscore":
                         if (options.SortDirection == SortDirection.Asc)
                         {
                             query = query.OrderBy(p => p.MinScore);
                         }
                         else
                         {
                             query = query.OrderByDescending(p => p.MinScore);
                         }

                         break;
                     case "maxscore":
                         if (options.SortDirection == SortDirection.Asc)
                         {
                             query = query.OrderBy(p => p.MaxScore);
                         }
                         else
                         {
                             query = query.OrderByDescending(p => p.MaxScore);
                         }

                         break;
                 }
             }
             if (options.GetLimitOffset().HasValue)
             {
                 query = query.Skip(options.GetLimitOffset().Value).Take(options.GetLimitRowcount().Value);
             }
             result.Items = query.ToList();
         }
         return result;

     })
 );`
dukefama commented 7 years ago

Any updates with regards to this? Sorry I may have copied the wrong code here. If you look through the code below you will find out that I am trying to do a javascript confirm before delete. The codes are there but it is not firing.

  ///////////////////Grading Details /////////////////////////////////
            MVCGridDefinitionTable.Add("GradingDetailsListGrid", new MVCGridBuilder<GradingsDetail>(defaultSet1, colDefaults)
         .WithAuthorizationType(AuthorizationType.AllowAnonymous)
         .AddColumns(cols =>
         {
             // Add your columns here
             cols.Add().WithColumnName("MinScore")
              .WithHeaderText("Minimum Score")
              .WithValueExpression(i => i.MinScore.ToString())
              .WithFiltering(true);
             cols.Add().WithColumnName("MaxScore")
                .WithHeaderText("Max Score")
                .WithValueExpression(i => i.MaxScore.ToString())
                .WithFiltering(true);
             cols.Add().WithColumnName("Grade")
                .WithHeaderText("Grade")
                .WithValueExpression(i => i.Grade)
                .WithFiltering(true);
             cols.Add().WithColumnName("Remarks")
               .WithHeaderText("Remarks")
               .WithValueExpression(i => i.Remarks)
               .WithFiltering(true);
             cols.Add("Edit").WithHtmlEncoding(false)
                 .WithSorting(false)
                 .WithHeaderText(" ")
                 .WithValueExpression((p, c) => c.UrlHelper.Action("DetailsEdit", "Gradings", new { id = p.ID }))
                 .WithValueTemplate("<a href='{Value}' class='btn btn-primary btn-xs' role='button'>Update</a>");
             cols.Add("Delete").WithHtmlEncoding(false)
                 .WithSorting(false)
                 .WithHeaderText(" ")
                 .WithValueExpression((p, c) => c.UrlHelper.Action("DetailsRemove", "Gradings", new { id = p.ID }))
                 .WithValueTemplate("<a href='{Value}' class='btn btn-danger btn-xs' onclick = 'return confirm('Are you sure you wish to delete this Template?');' role ='button'>Remove </a>");

         })
          .WithSorting(true, "Remarks")
          .WithPaging(true, 25, true, 100)
          .WithFiltering(true)
          .WithPageParameterNames("SchoolID")
          .WithPageParameterNames("GradingID")
         .WithRetrieveDataMethod((context) =>
         {
             var options = context.QueryOptions;
             var result = new QueryResult<GradingsDetail>();

             using (SchoolsDBContext db = new SchoolsDBContext())
             {

                 long SchoolID = context.QueryOptions.GetPageParameterString("SchoolID").ToLong();
                 long GradingID = context.QueryOptions.GetPageParameterString("GradingID").ToLong();

                 var query = db.GradingsDetails.Where(x => x.SchoolID == SchoolID && x.GradingID == GradingID).AsQueryable();
                 result.TotalRecords = query.Count();

                 if (!String.IsNullOrWhiteSpace(options.SortColumnName))
                 {
                     switch (options.SortColumnName.ToLower())
                     {
                         case "remarks":
                             if (options.SortDirection == SortDirection.Asc)
                             {
                                 query = query.OrderBy(p => p.Remarks);
                             }
                             else
                             {
                                 query = query.OrderByDescending(p => p.Remarks);
                             }
                             break;
                         case "minscore":
                             if (options.SortDirection == SortDirection.Asc)
                             {
                                 query = query.OrderBy(p => p.MinScore);
                             }
                             else
                             {
                                 query = query.OrderByDescending(p => p.MinScore);
                             }

                             break;
                         case "maxscore":
                             if (options.SortDirection == SortDirection.Asc)
                             {
                                 query = query.OrderBy(p => p.MaxScore);
                             }
                             else
                             {
                                 query = query.OrderByDescending(p => p.MaxScore);
                             }

                             break;
                     }
                 }
                 if (options.GetLimitOffset().HasValue)
                 {
                     query = query.Skip(options.GetLimitOffset().Value).Take(options.GetLimitRowcount().Value);
                 }
                 result.Items = query.ToList();
             }
             return result;

         })
     );`
arjenbolten commented 7 years ago

I am using Bootbox to process the confrim function. Give the button an id and attacht data variables to it. In the cshtml you will have the onclick event set. and read the button variables to know the targeted item.

GRID:

.WithValueExpression((p, c) => c.UrlHelper.Content("<button  id='btnDelete' data-item-id=" + p.iId + "data-item-name=" + p.sName + ">" Delete</button>"));

CSHTML

$(document).on('click', '#btnDelete', function () {
                var button = $(this);
                // Confirmation dialog
                bootbox.confirm("Are you sure you wat to delete \"" + button.attr("data-brand-name") + "\" ?", function (result) {
$.ajax({
                            //  call Delete action
                            url: '/Controller/Delete',
                            // supply action with id parameter from button
                            data: { Id: button.attr("data-item-id") },
                            // on succes
                            success: function (response) {
                                // display succes message
                                bootbox.alert(button.attr("data-item-name") + " has been deleted!", function () {

                                    // reload the page to visually erase the deleted item from the grid
                                    window.location.href = window.location.href
                                });
                                // on failure
                            },
                            error: function (xhr, ajaxOptions, thrownError) {
                                // display failure message
                                bootbox.alert(this.data.toString());
                                //bootbox.alert("Failure while deleting  \"" + button.attr("data-brand-name") + "\" .");
                            }
                        });
                    }
                });
            });

let me know if you got any further questions