@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>
@{
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>