Inline Editing With the WebGrid in ASP.NET MVC 4

This article will show you how to create editable webgrid which will provide you a facility of inline editing using jQuery.

Approach: Create an editable grid for user table.

The key to this approach is to populate the grid with both read-only and editable versions of the data, then to use the jQuery
toggle command to swap between the two presentations on a line-by-line basis.
Get the userdata and pass in to webgrid. Here is the code for the grid:

Editable Webgrid

Editable Webgrid

<h2>Student</h2>
@{
    var grid = new WebGrid(Model);
}

<div  id="gridContent" style=" padding:20px; " >
@grid.GetHtml(
    tableStyle: "webgrid-table",
    headerStyle: "webgrid-header",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-selected-row",
    rowStyle: "webgrid-row-style",
    mode: WebGridPagerModes.All,
    columns:
        grid.Columns(
        grid.Column("ID", format: @<text><span class="display-mode">@item.ID</span><label id="UserID" class="edit-mode">@item.ID</label></text>,
                    style: "col1Width" ),
        grid.Column("FirstName", "First Name", format: @<text><span class="display-mode"><label id="lblFirstName">@item.FirstName</label></span> 
                    <input type="text" id="FirstName" value="@item.FirstName" class="edit-mode" /></text>, style: "col2Width"),
        grid.Column("LastName", "Last Name", format: @<text> <span class="display-mode"><label id="lblLastName">@item.LastName</label></span>
                    <input type="text" id="LastName" value="@item.LastName" 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)
    ))

The main thing to take note of is that there are two items in each of the cells, one is to display mode and one is for edit mode.
All items designed for display are given the CSS class “display-mode”. The form fields have the CSS class of “edit-mode” applied to them.

The next part is the jQuery code that manages switching between the two modes:

<script type="text/javascript" >
    $(function () {
        $('.edit-mode').hide();
        $('.edit-user, .cancel-user').on('click', function () {
            var tr = $(this).parents('tr:first');
            tr.find('.edit-mode, .display-mode').toggle();
        });

        $('.save-user').on('click', function () {
            var tr = $(this).parents('tr:first');
            var FirstName = tr.find("#FirstName").val();
            var LastName = tr.find("#LastName").val();
            var UserID = tr.find("#UserID").html();
            tr.find("#lblFirstName").text(FirstName);
            tr.find("#lblLastName").text(LastName);
            tr.find('.edit-mode, .display-mode').toggle();
            var UserModel =
            {
                "ID": UserID,
                "FirstName": FirstName,
                "LastName": LastName
            };
            $.ajax({
                url: '/User/UpdateUser/',
                data: JSON.stringify(UserModel),
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    alert(data);
                }
            });

        });
    })
</script>

The first thing is hide all editable items, onclick of edit button toggle the edit mode and display mode class. An event handler
is hooked up to the click event of the Edit button which will take care of passing the record to controller and update same in
webgrid display mode. Also it will return the confirmation message once record is updated in DB.

You have to work on style as per your requirement.

Here is style.

<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;
    }
</style>

Download complete source code

Inline Editing With the WebGrid in ASP.NET MVC 4

Inline Editing With the WebGrid in ASP.NET MVC 4

Advertisements
This entry was posted in ASP.NET MVC Web Grid, css, jQuery, MVC and tagged , , , . Bookmark the permalink.

2 Responses to Inline Editing With the WebGrid in ASP.NET MVC 4

  1. Rubens Moraes says:

    Muito bom.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s