I'm using JqGrid in my ASP.NET MVC application using VS2010.My Grid does not seem to render properly on my view and does not allow me to access other controls(including entire page) on the view. See the screen blow:
Grid With Rows in it:
Grid Without Any Row:
But once I modify and submit data back to controller inline editing enter page becomes accessible.
My Script:
var last_selected_row;
$(function () {
var outerwidth = $('#studentList').width() - 10; ////Keep Grid 10 pixel smaller than its parent container
$('#studentGrid').jqGrid({
// Ajax related configurations
//url to send request to
url: "/Registration/LoadStudents",
datatype: "json",
mtype: "POST",
// Specify the column names
colNames: ["StudentID", "StudentName", "Status", "Grades", "StartDate", "EndDate", "EarnedDate", "DroppedDate"],
// Configure the columns
colModel: [
{ name: "StudentID", index: "StudentID", width: 0, align: "left", key: true },
{ name: "StudentName", index: "StudentName", editrules: { required: true, integer: false }, width: 100, title: "Name", align: "left", editable: true, stype: 'text', sortable: true },
{ name: "Status", index: "Status", width: 70, align: "left", editable: true, edittype: "checkbox", editoptions: { value: "true:false"} },
{ name: "Grades", index: "Grades", width: 80, align: "left", editable: true, edittype: "select", editoptions:
{
dataUrl: "/Registration/GetAllGrades",
buildSelect: function (data) {
//var d = $.parseJSON(data);
var jqGridAssemblyTypes = $.parseJSON(data);
var s = '<select>';
if (jqGridAssemblyTypes && jqGridAssemblyTypes.length) {
for (var i = 0, l = jqGridAssemblyTypes.length; i < l; i++) {
var ri = jqGridAssemblyTypes[i];
s += '<option value="' + ri.Value + '">' + ri.Text + '</option>';
}
}
return s + "</select>";
},
dataInit: function (elem) {
var v = $(elem).val();
////Set other column value here
},
dataEvents: [{
type: 'change',
fn: function (e) {
var assemblyType = $(e.target).val();
//var rowId = getRowId($(this));
}
}]
}
},
{ name: "StartDate", editable: true, editrules: { edithidden: false }, editoptions: { dataInit: function (element) { SetFieldReadOnly(element); } }
, index: "StartDate", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
},
{ name: "EndDate", editable: true, editrules: { edithidden: false }, editoptions:
{ dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}, index: "EndDate", title: "Ended", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
},
{ name: "EarnedDate", editable: true, editrules: { edithidden: false }, editoptions:
{ dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}, index: "EarnedDate", title: "Earned", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
},
{ name: "DroppedDate", editable: true, editrules: { edithidden: false }, editoptions:
{ dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}, index: "DroppedDate", title: "Dropped", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
}],
// Grid total width and height
//width: 300,
//height: 200,
//autowidth: true,
height: '100%',
altRows: true,
shrinkToFit: false,
//forceFit: true,
gridview: true,
//width: 600,
// Paging
toppager: false,
pager: $("#studentGridPager"),
rowNum: 5,
rowList: [5, 10, 20],
viewrecords: true,
// Default sorting
sortname: "StudentID",
sortorder: "asc",
ajaxRowOptions: { contentType: "application/json", dataType: "json" },
serializeRowData: function (data) {
return JSON.stringify({ registrationModel: data });
},
ondblClickRow: function (StudentId) { StudentDoubleClicked(StudentId); },
// Grid caption
editurl: "/Registration/EditStudents",
jsonReader: { repeatitems: false },
caption: "Students"
}).setGridWidth(outerwidth);
function bindAllGrades() {
var dataString = '';
var grades = new Array();
$.getJSON("/Registration/GetAllGrades", null, function (data) {
if (data != null) {
$.each(data, function (i, item) {
grades.push("{\"Text\":\"" + item.Text + "\",\"Value\":\"" + item.Value + "\"}");
dataString += "{\"Text\":\"" + item.Text + "\",\"Value\":\"" + item.Value + "\"},";
});
dataString = dataString.slice(0, -1);
}
});
var jstrin = JSON.stringify(grades);
return grades;
}
function StudentDoubleClicked(StudentId) {
var $myGrid = $("#studentGrid");
if (StudentId && StudentId != last_selected_row) {
$myGrid.jqGrid('restoreRow', last_selected_row);
$myGrid.jqGrid('saveRow', StudentId, {
successfunc: function (response) {
alert('Row is Saved !!!');
return true;
}
}, '/Registration/EditStudents',
{
extraparam: {
StudentID: function () {
var sel_id = $myGrid.jqGrid('getGridParam', 'selrow');
var value = $myGrid.jqGrid('getCell', sel_id, 'StudentID');
return stId;
},
StudentName: getSavedMathValue(StudentId),
Status: function () {
var sel_id = $myGrid.jqGrid('getGridParam', 'selrow');
var value = $myGrid.jqGrid('getCell', sel_id, 'Status');
return value;
}
}
}, function () { alert('This is After save.') }, function () { alert('Error while saving data.') }, reload);
$myGrid.jqGrid('editRow', StudentId, true);
last_selected_row = StudentId;
}
}
function getSavedMathValue(stId) {
var mval = $('#' + stId + "_StudentName");
return mval.val();
}
function SetFieldReadOnly(Ele) {
$(Ele).attr("readonly", "readonly");
}
})
function reload(rowid, result) {
alert("This is Reload " + Result);
$("#studentGrid").trigger("reloadGrid");
}
My View:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<SISShsmMvc.Models.RegistrationModel>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid.locale-en.js"></script>
<%: Scripts.Render("~/bundles/autocomplete")%>
<script type="text/javascript" src="../../Scripts/Registration.js"></script>
</head>
<body>
<div>
<fieldset>
<legend>Search Student By</legend>
<div id="studentSearch">
<span>Name:</span><br />
<%= Html.TextBoxFor(m => m.StudentName, new { ID = "StudentName" })%><br />
<span>Grade:</span><br />
<%= Html.DropDownListFor(m => m.SelectedGrade, Model.AvailableGrades) %><br />
</div>
</fieldset>
<div id="studentList">
<table id="studentGrid">
</table>
<div id="studentGridPager" />
</div>
</div>
</body>
</html>
My Controller:
public ActionResult Index()
{
PopulateUserContextViewBags();
List<string> grades = new List<string>();
grades.Add("Grades 11 and 12");
grades.Add("Grades 12");
grades.Add("Grades 11");
grades.Add("Grades 10");
grades.Add("All Grades");
// TODO:
Models.RegistrationModel model = new Models.RegistrationModel()
{
AvailableGrades = new SelectList(grades, "Grades 11 and 12")
};
return View(model);
}
public ActionResult LoadStudents()
{
var objmodel = Models.RegistrationRepository.GetStudents();
return Json(objmodel, JsonRequestBehavior.AllowGet);
//return Json(null, JsonRequestBehavior.AllowGet);
}
public JsonResult EditStudents(Models.RegistrationModel registrationModel)
{
// registrationModel.StudentID = id;
return Json(null, JsonRequestBehavior.AllowGet);
}
I'm using JqGrid 4.5.1. I've tested this code in IE9 and Firefox 22.0. Any help ??
https://stackoverflow.com/questions/17889363
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian