CODEWITHSUNDEEP
c#asp.net.netrazor
Protected Identity
Protected Identity

Reputation: 241

How to edit data inside the WebGrid Helper

I have a WebGrid full of lots of products, and I want to be able to edit the quantity for each row in the web grid and update the Cart table in the database when the textChanged event is raised on the corresponding textbox.

But is this even possible with WebGrid? I have not found anything that would suggest it's possible. I would really appreciate any help at all.

enter image description here

Upvotes: 1

Views: 705

Answers (1)

inVINCEble
inVINCEble

Reputation: 171

It's possible to attach a change event to the textboxes.

I set my grid up like the following:

@grid.GetHtml(
   htmlAttributes: new { cellspacing = "2px", cellpadding = "2px" },
   columns: grid.Columns(
      grid.Column("Id"),
      grid.Column("Description"),
      grid.Column("PacketQuantity"),
      grid.Column("ThickCover", format: (item) => {
         var p = item.Value as MvcApplication1.Models.Product;
         return Html.TextBox("ThickCover", p.ThickCover, new { @class = "thickCoverInput", @data_value = p.Id });
          }),
      grid.Column("ThinCover", format: (item) => {
         var p = item.Value as MvcApplication1.Models.Product;
         return Html.TextBox("ThickCover", p.ThinCover);
      })
   )
)

Then I had the following script to wire up the changes:

<script src="~/Scripts/jquery-1.7.1.js"></script>
<script>
   $(document).ready(function () {
      $('.thickCoverInput').change(function(event) {
         alert(event.currentTarget.attributes["data-value"].value);
         alert(event.currentTarget.value);
         // Here you can post data to an action to update your table
      });
   });
</script>

When I changed the value in the textbox, I was able to get two alerts. One for the Id of the Product and the other is the new value.

Hope this is what you were looking for.

Upvotes: 1

Related Questions