Friday, April 25, 2014

Custom column in WebGrid MVC4

@model EcommerceNew_pro.Models.ProModel
@{
    ViewBag.Title = "WebGrid with Custom Paging, Sorting";
    WebGrid grid = new WebGrid(rowsPerPage: Model.PageSize);
    grid.Bind(Model.Customer,
    autoSortAndPage: false,
    rowCount: Model.TotalRows);
}
<script type="text/javascript">
    $(function () {
        $('.edit-mode').hide();
        $('.edit-user, .cancel-user').live('click', function () {
            var tr = $(this).parents('tr:first');
            tr.find('.edit-mode, .display-mode').toggle();
        });

        $('.save-user').live('click', function () {
            var tr = $(this).parents('tr:first');
            var Customername = tr.find("#Customername").val();
            var Address = tr.find("#Address").val();
            var CustomerId = tr.find("#CustomerId").html();
            tr.find("#lblCustomername").text(Customername);
            tr.find("#lblAddress").text(Address);
            tr.find('.edit-mode, .display-mode').toggle();
            var UserModel =
            {
                "CustomerId": CustomerId,
                "Customername": Customername,
                "Address": Address
            };
            $.ajax({
                url: '/User/UpdateUser/',
                data: JSON.stringify(UserModel),
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    alert(data);
                }
            });

        });
    })
</script>
@grid.GetHtml(

 fillEmptyRows: false,
     tableStyle: "webgrid-table",
        headerStyle: "webgrid-header",
        footerStyle: "webgrid-footer",
        alternatingRowStyle: "webgrid-alternating-row",
        selectedRowStyle: "webgrid-selected-row",
        rowStyle: "webgrid-row-style",
 mode: WebGridPagerModes.All,
 firstText: "<< First",
 previousText: "< Prev",
 nextText: "Next >",
 lastText: "Last >>",
 columns:
        grid.Columns(

 grid.Column("CustomerId", format: @<text><span class="display-mode">@item.CustomerId</span><label
     id="CustomerId" class="edit-mode">@item.CustomerId</label></text>,
                    style: "col1Width" ),
  grid.Column("Customername", "Name", format: @<text> <span class="display-mode">
      <label id="lblCustomername">@item.Customername</label></span>
<input type="text" id="Customername" style="width:100px" value="@item.Customername" class="edit-mode" /></text>, style: "col2Width"),
        grid.Column("Address", "Address", format: @<text><span class="display-mode"><label
            id="lblAddress">@item.Address</label></span>
<input type="text" id="Address" style="width:100px" value="@item.Address" class="edit-mode" /></text>, style: "col2Width"),

 grid.Column("Action", format: @<text>
<button class="edit-user display-mode">
    Edit</button>
<button class="save-user edit-mode">
    Save</button>
<button class="cancel-user edit-mode">
    Cancel</button>
</text>,  style: "col3Width" , canSort: false)
))


<style type="text/css">
    .edit-mode
    {
    }
    .edit-user
    {
    }
    .edit-user display-mode
    {
    }
    .save-user edit-mode
    {
    }
    .display-mode
    {
    }
    .cancel-user
    {
    }
    .webgrid-table
    {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 14px;
        font-weight: normal;
        width: 650px;
        display: table;
        border-collapse: collapse;
        border: solid px #C5C5C5;
        background-color: white;
    }
    .webgrid-table td, th
    {
        border: 1px solid #C5C5C5;
        padding: 3px 7px 2px;
    }
    .webgrid-header, .webgrid-header a
    {
        background-color: #E3E3E3;
        color: black;
        text-align: left;
        text-decoration: none;
    }
    .webgrid-footer
    {
    }
    .webgrid-row-style
    {
        padding: 3px 7px 2px;
    }
    .webgrid-alternating-row
    {
        background-color: #F5F5F5;
        padding: 3px 7px 2px;
    }
    .col1Width
    {
        width: 50px;
    }
    .col2Width
    {
        width: 200px;
    } .col3Width
    {
        width:300px;
    }
</style>

No comments:

Post a Comment