Develop Reference

Uncaught TypeError: $(...).jqGrid is not a function on subGridRowExpanded

I'm trying to load data into a jqGrid sub grid (subgrid as grid) and get the above error on this line:
$("#" + subgrid_table_id).jqGrid
Please help - thanks.
My JS code:
<link rel="stylesheet" href="~/Styles/ui.jqgrid-bootstrap.css" />
<link rel="stylesheet" href="~/Styles/ui.jqgrid-bootstrap-ui.css" />
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/JqGrid/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/JqGrid/jquery.jqGrid.js"></script>
<script src="~/Scripts/JqGrid/grid.jqueryui.js"></script>
<script src="~/Scripts/JqGrid/grid.subgrid.js"></script>
<script src="~/Scripts/JqGrid/jqModal.js"></script>
<script src="~/Scripts/JqGrid/i18n/grid.locale-he.js"></script>
<div id="jqGrid">
<table id="grid" style="float:right; width:100%"></table>
<div id="pager" style="float:right;"></div>
</div>
<script type="text/javascript">
var gridDataUrl = 'GetAllPurchasesJson';
var lastSel;
$("#grid").jqGrid({
url: gridDataUrl,
datatype: "json",
mtype: 'POST',
jsonReader: {
root: 'gridModel',
repeatitems: true,
subgrid: {root:'rows', repeatitems: true, cell:"cell" }
}
,
colNames: ['Id','סטטוס','סה"כ כולל מע"מ','מע"מ','סה"כ ללא מע"מ','תאריך אספקה','תאריך הזמנה','ספק','מספר הזמנה'],
colModel: [
{ name: 'Id', index: 'Id', width: 50, align: 'right', hidden: true },
{
name: 'Status',
index: 'סטטוס',
width: 100,
align: 'right',
editable: true,
},
{
name: 'Total',
index: 'סה"כ כולל מע"מ',
width: 100,
align: 'right',
},
{ name: 'Vat', index: 'מע"מ', width: 100, align: 'right' },
{ name: 'TotalNoVat', index: 'סה"כ ללא מע"מ', width: 100, align: 'right' },
{ name: 'ArrivedDate', index: 'תאריך אספקה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
{ name: 'OrderDate', index: 'תאריך הזמנה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
{ name: 'Supplier', index: 'ספק', width: 100, align: 'right' },
{ name: 'OrderNumber', index: 'מספר הזמנה', width: 100, align: 'right' }
],
cmTemplate: { editable: false },
rowNum: 20,
rowList: [10, 20, 30],
height: 'auto',
width: '800',
pager: jQuery('#pager'),
sortname: 'Name',
viewrecords: true,
sortorder: "desc",
regional: 'he',
editurl: '#Url.Action("SaveOrUpdateProduct", "Inventory")',
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
// we pass two parameters
// subgrid_id is a id of the div tag created within a table
// the row_id is the id of the row
// If we want to pass additional parameters to the url we can use
// the method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the following
var subgrid_table_id;
subgrid_table_id = subgrid_id+"_t";
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
$("#" + subgrid_table_id).jqGrid({
url:"GetPurchaseDetailes/"+row_id,
datatype: "json",
colNames: ['Id','Status','ActualTotal','ActualVat','ActualPaid'],
colModel: [
{name:"Id",index:"Id",width:80,key:true},
{name:"Status",index:"Status",width:130},
{name:"ActualTotal",index:"ActualTotal",width:80,align:"right"},
{name:"ActualVat",index:"ActualVat",width:80,align:"right"},
{name:"ActualPaid",index:"ActualPaid",width:100,align:"right",sortable:false}
],
height: '100%',
rowNum:20,
sortname: 'Id',
sortorder: "asc"
});
} });

This looks like a jQuery conflict to me: https://api.jquery.com/jquery.noconflict/
Try wrapping your jQuery in an anonymous function as below:
(function($) {
// jQuery code
})(jQuery);
Your jQuery on your page will then look something like the below:
<script type="text/javascript">
(function($) {
var gridDataUrl = 'GetAllPurchasesJson';
var lastSel;
$("#grid").jqGrid({
url: gridDataUrl,
datatype: "json",
mtype: 'POST',
jsonReader: {
root: 'gridModel',
repeatitems: true,
subgrid: {root:'rows', repeatitems: true, cell:"cell" }
}
,
colNames: ['Id','סטטוס','סה"כ כולל מע"מ','מע"מ','סה"כ ללא מע"מ','תאריך אספקה','תאריך הזמנה','ספק','מספר הזמנה'],
colModel: [
{ name: 'Id', index: 'Id', width: 50, align: 'right', hidden: true },
{
name: 'Status',
index: 'סטטוס',
width: 100,
align: 'right',
editable: true,
},
{
name: 'Total',
index: 'סה"כ כולל מע"מ',
width: 100,
align: 'right',
},
{ name: 'Vat', index: 'מע"מ', width: 100, align: 'right' },
{ name: 'TotalNoVat', index: 'סה"כ ללא מע"מ', width: 100, align: 'right' },
{ name: 'ArrivedDate', index: 'תאריך אספקה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
{ name: 'OrderDate', index: 'תאריך הזמנה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
{ name: 'Supplier', index: 'ספק', width: 100, align: 'right' },
{ name: 'OrderNumber', index: 'מספר הזמנה', width: 100, align: 'right' }
],
cmTemplate: { editable: false },
rowNum: 20,
rowList: [10, 20, 30],
height: 'auto',
width: '800',
pager: jQuery('#pager'),
sortname: 'Name',
viewrecords: true,
sortorder: "desc",
regional: 'he',
editurl: '#Url.Action("SaveOrUpdateProduct", "Inventory")',
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
// we pass two parameters
// subgrid_id is a id of the div tag created within a table
// the row_id is the id of the row
// If we want to pass additional parameters to the url we can use
// the method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the following
var subgrid_table_id;
subgrid_table_id = subgrid_id+"_t";
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
$("#" + subgrid_table_id).jqGrid({
url:"GetPurchaseDetailes/"+row_id,
datatype: "json",
colNames: ['Id','Status','ActualTotal','ActualVat','ActualPaid'],
colModel: [
{name:"Id",index:"Id",width:80,key:true},
{name:"Status",index:"Status",width:130},
{name:"ActualTotal",index:"ActualTotal",width:80,align:"right"},
{name:"ActualVat",index:"ActualVat",width:80,align:"right"},
{name:"ActualPaid",index:"ActualPaid",width:100,align:"right",sortable:false}
],
height: '100%',
rowNum:20,
sortname: 'Id',
sortorder: "asc"
});
}
});
})(jQuery);
</script>

How to edit foreign key in jqgrid?

I have the Foreign key in JqGrid and show name of foreign key in grid.
when i want to edit, method don't send value of foreign key and value of foreign key is null:
public ActionResult EditState(tblState state)
{
UserRepository user = new UserRepository();
state.UserIDChange_FK = Convert.ToInt64(user.FindUserID(User.Identity.Name));
state.StateDateChange = (DateTime.Now);
state.StateDateCreate = DateTimeConvertor.ToDateTime(state.StateDateCreate.ToString());
if (ModelState.IsValid)
{
StateRepository mr = new StateRepository();
if (mr.Update(state, true))
{
return MessageBox.Show("success", MessageType.Success, modal: true, layout: MessageAlignment.Center);
}
else
{
return MessageBox.Show("don not success", MessageType.Error, modal: true, layout: MessageAlignment.Center);
}
}
return Json(true);
}
Script of jqgrid:
<script type="text/javascript">
$(document).ready(function () {
$('#list').jqGrid({
caption: "State Info",
url: '#Url.Action("GetState", "LocationGrid")',
editurl: '#Url.Action("EditState", "LocationGrid")',
datatype: 'json',
jsonReader: {
root: "Rows",
page: "Page",
total: "Total",
records: "Records",
repeatitems: true,
id: "StateID",
cell: "RowCells"
},
mtype: 'POST',
colNames: ['ID','state','UserIDCreate_FK','UserIDChange_FK','StateDateCreate','StateDateChange', ''],
colModel: [
{
name: 'StateID', index: 'StateID',
editable: false, hidden: true, key: true
},
{
name: 'StateName', index: 'StateName', align: 'center', width: 120,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
},
editrules: {
required: true
}
},
{
name: 'UserIDCreate_FK', index: 'UserIDCreate_FK', align: 'center', width: 80,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, editoptions: { readonly: 'readonly' }
},
{
name: 'UserIDChange_FK', index: 'UserIDChange_FK', align: 'center', width: 80,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: false, edittype: 'text',
editoptions: {
maxlength: 40
},
editrules: {
required: true
}
}
,
{
name: 'StateDateCreate', index: 'StateDateCreate', align: 'center', width: 135,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, editoptions: { readonly: 'readonly' }
},
{
name: 'StateDateChange', index: 'StateDateChange', align: 'center', width: 135,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: false, edittype: 'text',
editoptions: {
maxlength: 40
},
editrules: {
required: true
}
},
{
name: 'myac', width: 80, fixed: true, sortable: false, search: false,
resize: false, formatter: 'actions',
formatoptions: {
keys: true
}
}
],
rowNum: 10,
rowList: [10, 20, 50, 100],
sortname: 'StateID',
sortorder: 'desc',
viewrecords: true,
altRows: true,
shrinkToFit: false,
width: '900',
height: 'auto',
hidegrid: false,
direction: "rtl",
gridview: true,
rownumbers: true,
footerrow: true,
loadComplete: function () {
$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
loadError: function (xhr, st, err) {
jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
}
})
;
});
Bellow picture show that UserIDCreate_FK is null but in grid this feild has value.

Server Side Sort JQGrid Sort Button Not Working

I have declared this in my jqgrid with 'json' data:
sortname: 'CascadeId',
sortorder: 'asc',
sortable: true,
But Sorting button has no effect. I have implemented server side sorting with asp. but button is not working. Can you indicate how to enable the button?
Update:
Initial GET Request:
http://localhost/myHandler.ashx?_search=false&nd=1361795033464&rows=20&page=1&sidx=CascadeId&sord=asc
ColModel:
colModel: [
{ name: 'CascadeId', index: 'CascadeId', width: 85, sortable: true, editable: true, editrules: { custom: true, custom_func: validateCascadeID, required: true} },
{ name: 'VenuProfile', index: 'VenuProfile', width: 150, sortable: false, editable: true, edittype: 'select', editoptions: { value: VenuProfile, width: 90, align: 'left'} },
{ name: 'Location', index: 'Location', width: 210, sortable: false, editable: true },
]

If you see the sort information going out in the POST sidx & sord and you are recieving those values on the server (again sidx & sord) you would then need to do an equivalent order by on your server fetch of the data.
Ex in C# the order by and then paging request of the data would look something like:
var pagedQuery = dataset.OrderBy(sidx + " " + sord).Skip((page - 1) * rows).Take(rows);
Edit
A portion of one of my working grids that starts out with a sort on the DateTimeMail' column indesc` order.
Client Side:
$('#Mailbox').jqGrid({
datatype: 'json',
url: '/Mail/MailboxGetGridData',
mtype: 'POST',
autoencode: true,
postData: { Mailbox: 'Inbox' },
colNames: ['IdMail', 'From', 'To', 'Date / Time', 'Subject', 'Message', 'HasBeenRead'],
colModel: [
{ name: 'IdMail', index: 'IdMail', width: 95, align: 'center', sortable: false, hidden: true, editable: false },
{ name: 'IdSender', index: 'IdSender', width: 150, align: 'center', sortable: true, firstsortorder: 'desc', hidden: false, editable: false },
{ name: 'IdRecipient', index: 'IdRecipient', width: 150, align: 'center', sortable: true, firstsortorder: 'desc', hidden: false, editable: false },
{ name: 'DateTimeMail', index: 'DateTimeMail', width: 150, align: 'center', sortable: true, firstsortorder: 'desc', hidden: false, editable: false },
{ name: 'Subject', index: 'Subject', width: 250, align: 'left', sortable: false, hidden: false, editable: false },
{ name: 'Message', index: 'Message', width: 150, align: 'center', sortable: false, hidden: true, editable: false },
{ name: 'HasBeenRead', index: 'HasBeenRead', width: 150, align: 'center', sortable: false, hidden: true, editable: false },
],
pager: $('#MailboxPager'),
rowNum: 5,
rowList: [5, 10, 20, 50],
sortname: 'DateTimeMail',
sortorder: "desc",
....
Server side:
public ActionResult MailboxGetGridData(string sidx, string sord, int page, int rows, bool _search, string filters)
{
.....
var pagedQuery = filteredQuery.OrderBy(sidx + " " + sord).Skip((page - 1) * rows).Take(rows);
var jsonData = new
{
total = (totalRecords + rows - 1) / rows,
page = page,
records = totalRecords,
rows = (
from item in pagedQuery.ToList()
select new
{
cell = new string[] {
item.IdMail.ToString(),
HelperClasses.HelperMethods.getUserName(item.IdSender),
HelperClasses.HelperMethods.getUserName(item.IdRecipient),
((DateTime)item.DateTimeMail).ToString("g"),
item.Subject,
item.Message,
(Mailbox == "Inbox") ? item.HasBeenRead.ToString() : "True"
}
}).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);

Disable column in jqGrid

I have this jqGrid:
$("#list").jqGrid({
url: '/modulos/carga/cargaServiciosTarifa.ashx',
datatype: 'xml',
mtype: 'GET',
colNames: ['Tipo_Servicio', 'Cantidad','Unidad'],
colModel: [
{name: 'Tipo_Servicio', index: 'TSI_TS_Id', width: 100, align: 'center',
edittype: 'select', editable: true, sortable: true,
editrules: { edithidden: false, required: true }, editoptions: {
size: 1,
dataUrl: '/modulos/carga/cargaServiciosTarifa.ashx?oper=getServicios'
}},
{ name: 'Cantidad', index: 'TSI_Cantidad', width: 100, align: 'center',
editable: true, edittype: 'select', editoptions: {
value: "1:1;2:2;3:3;4:4;5:5;6:6;7:7;8:8;9:9;10:10;11:11;12:12" },
editrules: { edithidden: true }, sortable: true },
{ name: 'Unidad', index: 'TSI_Unidad', width: 100, align: 'center',
editable: true, edittype: 'select',
editoptions: { value: "Dia:Dia;Hora:Hora" }, sortable: true }
],
autoencode: true,
pager: '#pager',
rowNum: 20,
sortname: 'TSI_TS_Id',
sortorder: 'asc',
sortable: true,
autowidth: false,
width: 733,
height: -1,
shrinkToFit: true,
viewrecords: true,
gridview: true,
caption: 'Listado Servicios asociados a Tarifa',
postData: {tarId: tarId.val()},
editurl: '/modulos/carga/cargaServiciosTarifa.ashx'
});
With three select options, and I want to know how can I disable the 'Cantidad'(second column) select if I select the option 'Dia' of the third (last) select called 'Unidad', but can use if I select 'Hora' option! Is there a possible way to do this when I create or edit(no inline editing)?
Have any property like a html disabled to can add to the colModel definition?
Thanks.

class in column jqgrid doesnt working

Hi I use custom formatter in jqGrid which will add link and class to column.
the name of class I will call is 'iframe' which will set my own dialog box using jquery colorbox.
I have seen in firebug that class of column name was set 'iframe' but when I was clicked that, the dialog didnt working. am I did wrong?
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
$(".iframe").colorbox({ iframe: true, width: "40%", height: "80%", onClosed:function(){ location.reload(true); } });
jQuery("#MyDynamicGrid").jqGrid({
url: '/RepositoryRole/DynamicGridData/',
mtype: 'POST',
datatype: 'json',
colModel: [
{ name: 'Name', index: 'Name', width: 0, align: 'left', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, formatter: returnMyLink, editable: true, editrules: { required: true, edithidden: true }, hidden: false },
{ name: 'Description', index: 'Description', width: 80, align: 'left', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, },
],
colNames: ['Name', 'Description'],
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 20, 30],
sortname: 'Name',
sortorder: 'Desc',
viewrecords: true,
imgpath: '/Content/JqGridThemes/steel/images',
autowidth: true,
editurl: '/User/EditGrid/'
});
function returnMyLink(cellValue, options, rowdata, action) {
return '' + cellValue + ' ';
}});
Thanks

I think the colorbox is not being attached to element which are loaded from jqgrid. you can use gridComplete for reattaching the colorbox
jQuery("#MyDynamicGrid").jqGrid({
url: '/RepositoryRole/DynamicGridData/',
mtype: 'POST',
datatype: 'json',
colModel: [
{ name: 'Name', index: 'Name', width: 0, align: 'left', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, formatter: returnMyLink, editable: true, editrules: { required: true, edithidden: true }, hidden: false },
{ name: 'Description', index: 'Description', width: 80, align: 'left', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, },
],
colNames: ['Name', 'Description'],
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 20, 30],
sortname: 'Name',
sortorder: 'Desc',
viewrecords: true,
imgpath: '/Content/JqGridThemes/steel/images',
autowidth: true,
editurl: '/User/EditGrid/',
gridComplete: function(){
$(".iframe").colorbox({ iframe: true, width: "40%", height: "80%", onClosed:function(){ location.reload(true); } }
}
});