Reputation: 439
I'm try to make webgrid can user edit and delete it inline so i made it the webgrid and i bind it successfully and the update function works will and when i press on edit button label transform to text and dropdownlist There is my ajax code
<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 getValue;
var tr = $(this).parents('tr:first');
var FirstName = tr.find("#FirstName").val();
var Phone = tr.find("#Phone").val();
var Branch = tr.find("#Branch-drop").val();
getValue = $("#Branch-drop option:selected").text();
var UserID = tr.find("#UserID").html();
tr.find("#lblFirstName").text(FirstName);
tr.find("#lblPhone").text(Phone);
tr.find("#lblBracnh").text(getValue);
tr.find('.edit-mode, .display-mode').toggle();
var UserModel = {
"IdEmp": UserID,
"EmpName": FirstName,
"Phone": Phone,
"BranchName": Branch
};
$.ajax({
url: '/Home/UpdateUser/',
data: JSON.stringify(UserModel),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (data) {
alert(data);
}
});
});
})
</script>
and the webgrid code is
@{
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("IdEmp", "ID", format: @<text> <span class="display-mode">@item.IdEmp </span> <label id="UserID" class="edit-mode">@item.IdEmp</label> </text>, style: "col1Width" ),
grid.Column("EmpName","Employee Name", format: @<text> <span class="display-mode"> <label id="lblFirstName">@item.EmpName</label> </span> <input type="text" id="FirstName" value="@item.EmpName" class="edit-mode" /></text>, style: "col2Width"),
grid.Column("Phone", "Phone", format: @<text> <span class="display-mode"> <label id="lblPhone">@item.Phone</label> </span> <input type="text" id="Phone" value="@item.Phone" class="edit-mode" /> </text>, style: "col2Width"),
grid.Column("BranchName","Branches", format: @<text><span class="display-mode"> <label id="lblBracnh">@item.BranchName</label> </span> @Html.DropDownList("MyDropdowen", (SelectList)ViewBag.DropDowenValue, new { id = "Branch-drop", @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>
<button class="Delete-user ">Delete</button>
</text>, style: "col3Width", canSort: false)
))
the problem is the dropdownlist when appears doesn't show on the current value and when i change it the text the label don't take the new value So How i can make the dropdown list take the current value and when the user selected new text and press save the dropdown take the new value?
Upvotes: 1
Views: 687
Reputation: 439
There is mistake in syntax of get value text of dropdownlist here is my code :
getValue = $("#Branch-drop option:selected").text();
should be :
getValue = tr.find("#Branch-drop option:selected").text();
and it's worked Thanks for everyone
Upvotes: 1