We Keep Coding

Empty Edit/Add windows on jQGrid for MVC

Although the jQGrid loads properly on the website, clicking the edit and add buttons brings up a window where I can't add the database information. It only shows the submit and cancel buttons on the bottom left.
I'm currently using this function for jQGrid:
$('#StudentGrid').jqGrid({
url: '#Url.Action("GetStudent", "Admin")',
editurl: '#Url.Action("GetStudent", "Admin")',
mtype: 'GET',
datatype: 'json',
iconSet: "fontAwesome",
caption: 'Database',
autoresizeOnLoad: true,
autoResizing: { compact: true },
prmNames: { page: "CurrentPage", rows: "PageSize" },
jsonReader: {
repeatitems: false,
id: "StudentId",
root: "rows",
page: "page",
total: "total",
records: "records"
},
hidegrid: false,
autowidth: true,
//width: 1250,
/*height: 800,*/
top:100,
gridView: true,
loadonce: true,
rowNum: 10,
scrollrows: true,
autoresizeOnLoad: true,
autoResizing: { compact: true },
viewrecords: true,
pager: '#pager',
pgbuttons: true,
colNames: ["StudentId", "Name", "Grade"],
colModel: [
{
name: 'studentId',
index: 'studentId',
editoptions: { readonly: 'readonly' },
width: 25,
hidden: false,
sortable: false
},
{
name: 'name',
index: 'name',
editoptions: { size: 25, maxlength: 20 },
hidden: false,
sortable: true,
width: 25,
align: "center"
},
{
name: 'grade',
index: 'grade',
hidden: false,
sortable: true,
width: 25,
align: "center"
}
],
postData: {
StudentId: $("studentId").val(),
Name: $("name").val(),
Grade: $("grade").val()
},
loadError: function (request, textStatus, errorThrown) {
handleError('An error occured trying to load the Database.', request, textStatus, errorThrown);
},
gridComplete: function () {
},
selectTimeout: 0, //for wait to prevent from onSelectRow event firing when actually it is a double click
onSelectRow: function (rowid, status, e) {
clearTimeout(this.selectTimeout);
this.selectTimeout = setTimeout(
function () {
if (status) {//select
;
}
else { //deselect
$('#StudentGrid').jqGrid("resetSelection");
}
},
250);
},
ondblClickRow: function (rowid, iRow, iCol, e) {
}
}).jqGrid('navGrid', '#pager', {
add: true,
del: true,
edit: true,
search: false,
refresh: false,
addfunc: function (id) {
updateRow("new");
},
editfunc: function (id) {
updateRow("edit");
},
delfunc: function (id) {
deleteRow(id);
}
}).jqGrid('gridResize', { minWidth: 1024, maxWidth: 2048, minHeight: 300, maxHeight: 450 });
Both the edit and add buttons use the following function:
//Add new record to grid or edit existing record.
function updateRow(id) {
var oper;
var rowData;
if (id == 'new') {
//add requested, set jqgrid value
oper = 'add';
}
else {
//edit requested, set jqgrid value
oper = 'edit';
//Get jqgrid row id
var rowId = $('#StudentGrid').getGridParam("selrow");
//Re-asign id to rowId
id = rowId
//Set row data
rowData = $('#StudentGrid').jqGrid('getRowData', rowId);
}
// Display the edit dialog below to the grid
var position = getDialogPosition();
$('#StudentGrid').editGridRow(id, {
top: position.top,
left: position.left,
width: 900,
height: 'auto',
mtype: 'POST',
modal: true,
autoresizeOnLoad: true,
autoResizing: { compact: true },
recreateForm: true,
closeAfterAdd: true,
closeAfterEdit: true,
reloadAfterSubmit: true,
ajaxOptions: { cache: false },
editData: {
StudentId: $("studentId").val(),
Name: $("name").val(),
Grade: $("grade").val()
},
onInitializeForm: function (form) {
$('input', form).keypress(
function (e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if (key == 13) {
e.preventDefault();
}
});
},
afterSubmit: function (response, postdata, formid) {
//if action canceled
var retObj = JSON.parse(response.responseText);
if (retObj && retObj.CancelAction > 0) {
alert(retObj.Message);
}
$("#StudentGrid").jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid");
return [true, '', false]; // no error and no new rowid
},
afterComplete: function (response, postdata, formid) {
//Set fields to only readonly
$('#studentId').attr('readonly', 'readonly');
$("#StudentGrid").jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid");
checkForError('An error occured trying to save Student record.', response, null, null, formid);
},
beforeShowForm: function (form) {
//Remove readonly - need to be editable when adding a new code value record to grid/db code values table
if (id == 'new') {
$('#studentId').removeAttr('readonly');
}
},
successfunc: function (data) {
return true;
},
beforeSubmit: function (postdata, formid) {
return [true];
}
});
}
The HTML for the table is:
<table style="width:90%;margin:5px;">
<tr style="vertical-align:top;">
<td>
<div style="margin-top:5px;"></div>
<div class="textborder">
<span>Student Database</span>
</div>
<table id="StudentId"></table>
<div id="pager"></div>
</td>
</tr>
</table>
This is my first time trying to use jQGrid, so are there any parts of the code I'm missing?

Not sure, but you should set your fields as editable. this is the property in colModel -> editable : true like this:
colModel: [
{
name: 'name',
index: 'name',
editable : true,
editoptions: { size: 25, maxlength: 20 },
hidden: false,
sortable: true,
width: 25,
align: "center"
},
....
Check the docs for editing

jqGrid set dataURL Dynamically after Edit Form Loads

I am using jqGrid 4.15.6-pre - free jqGrid:
I have two dropdown list in my edit form.
Both are populated from server using the setColProp in the onSelectRRow function.
What I want to do reload the second dropdown list if the value in the first dropdown is changed.
I need to do this without having to close the edit form.

The example below uses the Guriddo jqGrid. You maybe can adapt it to the forked version - free-jqgrid.
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'data.json',
editurl: 'clientArray',
datatype: "json",
colModel: [
{
label: 'Customer ID',
name: 'CustomerID',
width: 75,
key: true
},
{
label: 'Company Name',
name: 'CompanyName',
width: 140,
editable: true // must set editable to true if you want to make the field editable
},
{
label : 'Phone',
name: 'Phone',
width: 100,
editable: true
},
{
label: 'Postal Code',
name: 'PostalCode',
width: 80,
editable: true
},
{
name: 'Country',
width: 200,
editable: true,
edittype: "select",
editoptions: {
value: "USA:USA;UK:UK;Canada:Canada"
}
},
{
name: 'City',
width: 200,
editable: true,
edittype: "select",
editoptions: {
value: "Select a City"
}
}
],
loadonce: true,
viewrecorde: true,
width: 780,
height: 200,
rowNum: 10,
pager: "#jqGridPager"
});
$('#jqGrid').navGrid('#jqGridPager',
// the buttons to appear on the toolbar of the grid
{ edit: true, add: false, del: false, search: false, refresh: false, view: false, position: "left", cloneToTop: false },
// options for the Edit Dialog
{
editCaption: "The Edit Dialog",
recreateForm: true,
closeAfterEdit: true,
viewPagerButtons: false,
afterShowForm: populateCities,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
closeAfterAdd: true,
recreateForm: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dailog
{
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
});
// This function gets called whenever an edit dialog is opened
function populateCities() {
// first of all update the city based on the country
updateCityCallBack($("#Country").val(), true);
// then hook the change event of the country dropdown so that it updates cities all the time
$("#Country").bind("change", function (e) {
updateCityCallBack($("#Country").val(), false);
});
}
function updateCityCallBack(country, setselected) {
var current = $("#jqGrid").jqGrid('getRowData',$("#jqGrid")[0].p.selrow).City;
$("#City")
.html("<option value=''>Loading cities...</option>")
.attr("disabled", "disabled");
$.ajax({
url: country+".html",
type: "GET",
success: function (citiesHtml) {
$("#City")
.removeAttr("disabled")
.html(citiesHtml);
if(setselected) {
$("#City").val( current );
}
}
});
}
});
Real-time example is here

JQgrid How to fix" Loading "message when no data / no records found message is displayed

I have looked at some the examples here and incorporated that into my code. and displays the no records found message. but when there is no records found. I am also gettign "Loading" message showing up
How can i fix this?
Also, when there is record returned is it possible to show number of record returned?
Here is my code
console.log(" bmSearchData "+bmSearchData);
var emptyMsgDiv = $('<div>No URLs have been loaded for evaluation.</div>');
var $grid = $(".search-result");
$grid.jqGrid({
url: bmSearchData,
/**url: "/echo/json/", */
mtype: "POST",
// data: mydata,
datatype: "json",
emptyrecords: "0 records found",
postData: {
json: JSON.stringify(mydata)
},
success: function(mydata, textStatus, jqXHR) {
console.log(" data :" +mydata);
console.log(" data :" + bmUSearchData);
},
colModel: [
{ name: 'FullName',label: 'Name', align:'left', width: 115,search: true },
{ name: 'address',label: 'Address', align:'left', width: 85 ,search: false},
{ name: 'city',label: 'City', align:'left', width: 50 ,search: false},
{ name: 'state',label: 'State', align:'left', width: 20 ,search: true},
{ name: 'zip',label: 'Zip', align:'right', width: 25 ,search: false},
// { name: 'lastModifiedDateTime',label: 'Modified Date', align:'right', width: 45 ,search: false},
],
additionalProperties: ["address", "city", "state","zip"],
subGrid: true,
subGridRowExpanded: function (subgridDivId, rowid) {
var item = $(this).jqGrid("getLocalRow", rowid);
$("#" + $.jgrid.jqID(subgridDivId)).html("<div class=\"col-md-1\"><b>Address: </b></div>" + item.address +
"<br/><div class=\"col-md-1\"><b>City: </b></div>" + item.city + "<br><div class=\"col-md-1\"> <b>Zip: </b></div>" + item.zip + "");
},
iconSet: "fontAwesome",
loadonce: true,
rownumbers: true,
cmTemplate: { autoResizable: true, editable: true },
autoResizing: { compact: true },
forceClientSorting: true,
sortname: "Symbol",
//height:"auto",
caption: "<b>Result List</b>",
viewrecords: true,
autowidth: true, // set 'true' here
shrinkToFit: true, // well, it's 'true' by default
loadError: function (jqXHR, textStatus, errorThrown) {
var p = $(this).jqGrid("getGridParam"),
$errorDiv = $(this.grid.eDiv),
$errorSpan = $errorDiv.children(".ui-jqgrid-error");
$errorSpan.html("No Data Available");
$errorDiv.show();
if (p.errorDisplayTimeout) {
setTimeout(function () {
$errorSpan.empty();
$errorDiv.hide();
}, p.errorDisplayTimeout);
}
},
loadComplete: function () {
var count = grid.getGridParam();
var ts = grid[0];
if (ts.p.reccount === 0) {
grid.hide();
emptyMsgDiv.show();
} else {
grid.show();
emptyMsgDiv.hide();
}
}
});
$grid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"});
// place div with empty message insde of bdiv
emptyMsgDiv.insertAfter($grid.parent());
$(window).resize(function () {
var outerwidth = $('#grid').width();
$('.search-result').setGridWidth(outerwidth); // setGridWidth method sets a new width to the grid dynamically
});
HTML
<div class="col-md-10 col-sm-10">
<div id="grid" style="margin:10px 0 20px 0">
<table class="search-result" style=""></table>
</div>
</div>

How to obtain data in javaScript before submitting form in JTable

Want to get data from JTable form but when I'm trying to get the data it says undefined.
This is customStudent.js
.......
$(document).ready(function() {
$('#StudentTableContainer').jtable({
title: 'Student List',
paging: true,
pageSize: 10,
sorting: true, //Enable sorting
defaultSorting: 'name ASC',
actions: {
listAction: actionRoom,
deleteAction: 'HallManagementServlet?action=DeleteStudent',
updateAction: 'HallManagementServlet?action=UpdateStudent',
},
fields: {
reg_id: {
title: 'Registration',
key: true,
sort: true,
create: true,
edit: false
},
name: {
title: 'Name',
width: '20%',
edit: true
},
dept_id: {
title: 'Department',
edit: true,
options: 'HallManagementServlet?action=dropDownDepartment',
width: '5%'
},
session: {
title: 'session',
edit: true,
width: '7%'
},
degree_type: {
title: 'Degree type',
width: '10%',
options: {'Bachelors/Honours': 'Bachelors/Honours', 'Masters': 'Masters'},
edit: true,
list: true
},
room_number: {
title: 'Room',
width: '5%',
edit: true,
options: 'HallManagementServlet?action=dropDownRooms'
},
date_of_birth: {
title: 'Date of Birth',
type: 'date',
displayformat: 'yyyy-mm-dd',
edit: true,
list: false
},
blood_group: {
title: 'Blood Group',
width: '10%',
options: {'O-': 'O-', 'O+': 'O+', 'A-': 'A-', 'A+': 'A+', 'B-': 'B-', 'B+': 'B+', 'AB-': 'AB-', 'AB+': 'AB+'},
edit: true,
list: false
},
contact_number: {
title: 'Phone',
width: '10%',
edit: true,
list: true
},
address_line_1: {
title: 'Address line 1',
width: '13%',
edit: true,
list: false
},
address_line_2: {
title: 'Address line 6',
width: '13%',
edit: true,
list: false
},
fathers_name: {
title: 'Father\'s Name',
width: '13%',
edit: true,
list: false
},
mothers_name: {
title: 'Mother\'s Name',
width: '13%',
edit: true,
list: false
},
email: {
title: 'E-mail address',
width: '5%',
edit: true,
list: false
},
hall_id: {
title: 'Hall',
create: false,
edit: false,
list: false
},
admitted_on: {
title: 'Admitted On',
type: 'date',
displayformat: 'yyyy-mm-dd',
create: true,
edit: true,
list: true
},
payment_expires_on: {
title: 'Payment expires on',
width: '11%',
type: 'date',
displayformat: 'yyyy-mm-dd',
create: false,
edit: true,
list: true
},
paymentStatus: {
title: 'Payment Status',
width: '8%',
options: {'Paid': 'Paid', 'Due': 'Due'},
create: false,
edit: false,
list: true
},
imageFile: {
title: "Image Upload",
list: false,
create: true,
edit: false,
input: function(data) {
return '<input id="docBytes" type="file" name="docBytes" accept="image/*"><iframe name="postiframe" id="postiframe" style="display: none" />';
}
}
},
formCreated: function(event, data) {
data.form.find('input[name="reg_id"]').addClass('validate[required,[custom[number]],minSize[10],maxSize[10]');
data.form.find('input[name="name"]').addClass('validate[required,[custom[onlyLetterSp]]');
data.form.find('input[name="mothers_name"]').addClass('validate[[custom[onlyLetterSp]]');
data.form.find('input[name="fathers_name"]').addClass('validate[[custom[onlyLetterSp]]');
data.form.find('input[name="email"]').addClass('validate[custom[email]]');
data.form.validationEngine();
},
//Validate form when it is being submitted
formSubmitting: function(event, data) {
return data.form.validationEngine('validate');
},
//Dispose validation logic when form is closed
formClosed: function(event, data) {
data.form.validationEngine('hide');
data.form.validationEngine('detach');
},
recordsLoaded: function(event, data) {
$('.jtable-data-row').click(function() {
var reg_id = $(this).attr('data-record-key');
window.location.assign("viewstudent.jsp?reg_id=" + reg_id);
});
}
});
//Re-load records when user click 'load records' button.
$('#LoadRecordsButton').click(function(e) {
e.preventDefault();
$('#StudentTableContainer').jtable('load', {
name: $('#name').val(),
reg_id: $('#registration').val(),
dept_id: $('#pd_dept').val(),
session: $('#pd_session').val(),
degree_type: $('#pd_degree_type').val()
});
});
//Load all records when page is first shown
$('#LoadRecordsButton').click();
});
More precisely to speak, I want to get the updated date from here:
payment_expires_on: {
title: 'Payment expires on',
width: '11%',
type: 'date',
displayformat: 'yyyy-mm-dd',
create: false,
edit: true,
list: true
},
What should I do to get the date? After getting the date i want to claculate something and show paymentStatus on Jtable.

updateAction: function(postData) {
var payment_date = [];
console.log("updating from custom function...");
return $.Deferred(function($dfd) {
$.ajax({
url: 'HallManagementServlet?action=UpdateStudent',
type: 'POST',
dataType: 'json',
data: postData,
success: function(data) {
$.each(data, function(entryindex, entry) {
payment_date.push(entry['payment_expires_on']);
});
alert(payment_date);
$dfd.resolve(data);
},
error: function() {
$dfd.reject();
}
});
});
}
Use this custom updateAction. It worked for me.

Kendo UI with Javascript Modular Pattern

I'm in the process of creating a big business application using kendo ui. Since application is big. we have started to follow modular patter in javascript code.
When using modular pattern wtih kendo ui. i'm getting some errors.
i have created hierarchy grid. Each grid code will be modular object. like below:
But i'm getting below error: (I have commented error lines like this //error. Please see below)
SCRIPT5007: Unable to get property 'find' of undefined or null reference.
Reason for error is "this" object is referred to window object. But it should refer kendo grid object.. how to resolve this
var Customer = (function ($,window) {
var gridCustomer = null;
var dataSource = null;
var createColumns = function () {
return [
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
]
};
var setDataSource = function () {
if (customerGridDataSource != undefined) {
return dataSource = new kendo.data.DataSource({
data: customerGridDataSource,
schema: {
data: function (response) {
return response;
},
total: function (response) {
return response.length;
},
model: {
id: "CustomerID",
fields: {
CustomerID: { editable: false, nullable: false, type: "int" },
FirstName: { editable: true, nullable: false, type: "string" },
LastName: { editable: true, nullable: true, type: "string" },
Country: { editable: true, nullable: true, type: "string" },
City: { editable: true, nullable: true, type: "string" },
Title: { editable: true, nullable: true, type: "string" }
}
}
},
pageSize: 5,
serverPaging: false,
serverSorting: false
});
}
else {
alert("Data Source undefined. Please Contact Administrator.")
}
};
var onDataBound = function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());//error
};
var init = function () {
gridCustomer = $("#gridCustomer").kendoGrid({
sortable: true,
filterable: true,
pageable: {
pageSize: 5,
pageSizes: true
},
columns: createColumns(),
dataSource: setDataSource(),
dataBound: onDataBound(),
detailInit: Order.Init()
});
};
return {
Init: function () {
init();
}
}
})(jQuery,window);
var Order = (function ($,window) {
var gridOrder = null;
var dataSource = null;
var createColumns = function () {
return [
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title: "Ship Country", width: "110px" },
{ field: "ShipAddress", title: "Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "200px" }
]
};
var setDataSource = function () {
if (customerGridDataSource != undefined) {
return dataSource = new kendo.data.DataSource({
data: customerGridDataSource,
schema: {
data: function (response) {
return response;
},
total: function (response) {
return response.length;
},
model: {
id: "CustomerID",
fields: {
OrderID: { editable: false, nullable: false, type: "int" },
ShipCountry: { editable: true, nullable: false, type: "string" },
ShipAddress: { editable: true, nullable: true, type: "string" },
ShipName: { editable: true, nullable: true, type: "string" }
}
}
},
pageSize: 5,
serverPaging: false,
serverSorting: false,
serverFiltering: false,
filter: { field: "CustomerID", operator: "eq", value: e.data.CustomerID }
});
}
else {
alert("Data Source undefined. Please Contact Administrator.")
}
};
var init = function (e) {
gridOrder = $("<div/>").appendTo(e.detailCell).kendoGrid({
scrollable: false,
sortable: true,
pageable: true,
columns: createColumns(),
dataSource: setDataSource()
});
};
return {
Init: function (e) {
init(e);
}
}
})(jQuery,window);
$(function () {
Customer.Init();
});

Kendo ui provides a parameter called e for dataBound event. e.sender is the grid. So your code should seems to this:
var onDataBound = function (e) {
var grid = e.sender;
grid.expandRow(grid.tbody.find("tr.k-master-row").first());
};
As I mention in comments: It seems the problem is with the dataBound: onDataBound(), because you should set the function onDataBound to the dataBound event not the result of execution onDataBound().The e is undefined because kendo executing the onDataBound() when it wants to set the initial value of dataBound event, not the time the dataBound event has occurred. replace dataBound: onDataBound() with dataBound: onDataBound and try again:
var init = function () {
gridCustomer = $("#gridCustomer").kendoGrid({
sortable: true,
filterable: true,
pageable: {
pageSize: 5,
pageSizes: true
},
columns: createColumns(),
dataSource: setDataSource(),
dataBound: onDataBound, //Not immediately execution
detailInit: Order.Init //Not immediately execution
});
};

You have to remove the parentheses at the end of onDataBound when you add the handler to the grid's configuration object (same with Order.Init), otherwise you're immediately executing the function instead of when the event is triggered:
gridCustomer = $("#gridCustomer").kendoGrid({
sortable: true,
filterable: true,
pageable: {
pageSize: 5,
pageSizes: true
},
columns: createColumns(),
dataSource: setDataSource(),
dataBound: onDataBound,
detailInit: Order.Init
});