mardi 18 août 2015

How to get all the values from the webgrid in MVC4

I am trying to use the Web Grid, i was able to bind the data to web grid and able to add check box select functionality to the web grid.

but in my grid one field is there called amount, when i am select check box in the web grid i have to do the sum of the amount column values similar to shopping basket.

but i am not getting the values of the webgrid.

@model IEnumerable<JsonResultTest.Models.Shop>

@{
    ViewBag.Title = "Index";
    WebGrid grid = new WebGrid(source: Model, canPage: false, canSort: false);
}

@* Here I am going to add some css for better looks *@

<style type="text/css">
    table.gridtable {
        font-family: verdana,arial,sans-serif;
        font-size: 11px;
        color: #333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
    }

        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }

        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
</style>

<h2>Customer Data</h2>

@using (Html.BeginForm("Index", "Webgrid", FormMethod.Post))
{
    <div>
        @grid.GetHtml(
tableStyle: "gridtable",
htmlAttributes: new { id = "checkableGrid" },
columns: grid.Columns
(
        //Here I am going to add checkbox column
grid.Column(
format: @<text> <input type="checkbox" value="@item.ID" name="ids" /> </text>,
     header: "{checkall}"
     ),
       grid.Column("PhoneNumber", "PhoneNumber"),
       grid.Column("UAN", "UAN"),
       grid.Column("Add", "Address"),
       grid.Column("Price", "Amount")

     )
     )
    </div>
    <div>
        <input type="submit" value="Get Selected Record" />
    </div>
}
@if (ViewBag.Message != null)
{
    <div>
        @ViewBag.Message
    </div>
}
@section Scripts{
    <script>
        alert('Test');
        $(document).ready(function () {


            // 1st replace first column header text with checkbox

            $("#checkableGrid th").each(function () {

                if ($.trim($(this).text().toString().toLowerCase()) === "{checkall}") {
                    $(this).text('');
                    $("<input/>", { type: "checkbox", id: "cbSelectAll", value: "" }).appendTo($(this));
                    $(this).append("<span>Select All</span>");
                }
            });

            $("input[name='ids']").click(function () {
                var totalRows = $("#checkableGrid td :checkbox").length;
                alert(totalRows);
                var checked = $("#checkableGrid td :checkbox:checked").length;
                var amount = $("#BondLodgementAmount").val();
                alert(amount);

                if (checked == totalRows) {
                    $("#checkableGrid").find("input:checkbox").each(function () {
                        this.checked = true;
                    });
                }
                else {
                    $("#cbSelectAll").removeAttr("checked");
                }
            });

            $('#cbSelectAll').click(function () {
                var ischecked = this.checked;
                $('#checkableGrid').find("input:checkbox").each(function () {
                    this.checked = ischecked;
                    var row = $(this).closest('tr'); // get the table row
                    var links = row.find('a'); // get the 3 hyperlinks
                    var teamName = links.eq(0).text();
                    var description = links.eq(1).text();
                });
            });
                      ////2nd click event for header checkbox for select /deselect all
            //$("#cbSelectAll").live("click", function () {
            //    var ischecked = this.checked;
            //    $('#checkableGrid').find("input:checkbox").each(function () {
            //        this.checked = ischecked;
            //    });
            //});


            //3rd click event for checkbox of each row


        });
    </script>
}

Problem : CheckAll PhoneNumber UAN Add Price

      Check            123455      ABCD     NewYork        100$
     Uncheck           123456      ABCD1    NewYork1       200$
      Check            123457      ABCD2    NewYork2       300$

Assume here in the above grid 1,3 rows are checked so i have to display 100$+300$=400$

can any body tell how to achieve this functionality in web grid client side or

how can we pass the selected values to the controller, if i am able to pass the values i can do the manipulation in the controller and i can re bind the web grid.

hoping positive replies.Thanks in advance

Aucun commentaire:

Enregistrer un commentaire