Pass Id to Subgrid of Jqgrid

Pass Id to Subgrid of Jqgrid - javascript

In here i'm going to expand subgrid using InvoiceId but i have no idea how to get InvoiceId and pass it to the subgrid url.my main grid has InvoiceId.This is JqGrid.When i hardcode the Invoice ID to the subgrid url then it's working.
<script type="text/javascript">
$(function () {
$('#jqgrid').jqGrid({
url: 'Sales/GetAllSalesOrders/',
datatype: 'json',
mtype: 'GET',
//columns names
colNames: ['InvoiceId', 'CustomerId', 'SubTotal', 'TotalDiscount', 'VAT', 'NBT', 'Amount', 'Balance'],
//columns model
colModel: [
{ name: 'InvoiceId', index: 'InvoiceId' },
{ name: 'CustomerId', index: 'CustomerId',align:'center' },
{ name: 'SubTotal', index: 'SubTotal', align: 'right' },
{ name: 'FullDiscount', index: 'FullDiscount', align: 'right' },
{ name: 'Vat', index: 'Vat', align: 'right' },
{ name: 'Nbt', index: 'Nbt', align: 'right' },
//{ name: 'Total', index: 'Total', align: 'left' },
{ name: 'NetAmount', index: 'NetAmount', align: 'right' },
{ name: 'Balance', index: 'Balance', align: 'right' }
],
pager: '#jqgrid',
rowNum: 10,
sortname: 'InvoiceId',
sortorder: 'asc',
viewrecords: true,
width: 'auto',
height: 'auto',
gridview: true,
rowNum: 50,
rowTotal: 200,
rowList: [20, 30, 50, 100],
rownumbers: false,
rownumWidth: 40,
loadonce: true,
subGrid: true,
subgridtype: "json",
//subrid model
subGridModel: [{
//subgrid columns names
// name: ['InvoiceItemId', 'Quantity', 'Rate', 'DiscountAmount', 'Amount'],
name: ['InvoiceItemId', 'Quantity','Amount'],
width: [100, 100,100],
align: ['left', 'right','right'],
//postData: { id: 22 }
}],
//url from which subgrid data should be requested
subGridUrl: '/Sales/GetSalesItemsByInvoiceId/'
});
My Controller accept Id,
[HttpGet]
public JsonResult GetSalesItemsByInvoiceId(int InvoiceId)
{
//Some code here
}

You can use subGridBeforeExpand to set new value of subGridUrl: $(this).jqGrid("setGridParam", {subGridUrl: newValue});.
Alternatively you can consider to use subGridRowExpanded to implement grid as subgrid. Grid as subgrid allows you maximal control over content of subgrid. jqGrid just create empty <div> for the right part of the additional row added under expended one. One need place empty <table> inside for the subgrid and optionally <div> for the pager. After that one just create new grid. The url of the grdi is the URL for subgrid. I see that you use loadonce: true in the main grid. Probably you can download full subgrid for every grid directly during loading of the main grid. The answer provides an example of such implementation.

In jqGrid, the default querystring parameter for subgrid url is id. You can change that using below code:
...
prmNames: {
subgridid: "InvoiceId",
}
...
Therefore, your subgrid url will be
/Sales/GetSalesItemsByInvoiceId?InvoiceId=
instead of
/Sales/GetSalesItemsByInvoiceId?id=
Also you can change unique id of row using below code, you can give any one of the names specified in "colModel" (in this case it will be "InvoiceId"):
...
jsonReader: {
id: 'InvoiceId'
}
...
So your final code will be like this:
<script type="text/javascript">
$(function () {
$('#jqgrid').jqGrid({
url: 'Sales/GetAllSalesOrders/',
datatype: 'json',
mtype: 'GET',
//columns names
colNames: ['InvoiceId', 'CustomerId', 'SubTotal', 'TotalDiscount', 'VAT', 'NBT', 'Amount', 'Balance'],
//columns model
colModel: [
{ name: 'InvoiceId', index: 'InvoiceId' },
{ name: 'CustomerId', index: 'CustomerId',align:'center' },
{ name: 'SubTotal', index: 'SubTotal', align: 'right' },
{ name: 'FullDiscount', index: 'FullDiscount', align: 'right' },
{ name: 'Vat', index: 'Vat', align: 'right' },
{ name: 'Nbt', index: 'Nbt', align: 'right' },
//{ name: 'Total', index: 'Total', align: 'left' },
{ name: 'NetAmount', index: 'NetAmount', align: 'right' },
{ name: 'Balance', index: 'Balance', align: 'right' }
],
pager: '#jqgrid',
rowNum: 10,
sortname: 'InvoiceId',
sortorder: 'asc',
viewrecords: true,
width: 'auto',
height: 'auto',
gridview: true,
rowNum: 50,
rowTotal: 200,
rowList: [20, 30, 50, 100],
rownumbers: false,
rownumWidth: 40,
loadonce: true,
subGrid: true,
subgridtype: "json",
//subrid model
subGridModel: [{
//subgrid columns names
// name: ['InvoiceItemId', 'Quantity', 'Rate', 'DiscountAmount', 'Amount'],
name: ['InvoiceItemId', 'Quantity','Amount'],
width: [100, 100,100],
align: ['left', 'right','right'],
//postData: { id: 22 }
}],
//url from which subgrid data should be requested
subGridUrl: '/Sales/GetSalesItemsByInvoiceId/',
prmNames: {
subgridid: "InvoiceId",
},
jsonReader: {
id: 'InvoiceId'
}
});

Related

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 show paginationa in jqgrid?

I am trying to show pagination of the jq grid. But it is not working. It is not showing any data in the grid. I am new in jqgrid and i have tried, here is my example.
My action in controller
public ActionResult itemList(string sidx, string sord, int page, int rows)
{
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = db.tbl_Item.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var v = new
{
total = totalPages,
page,
records = totalRecords,
rows = (
from t in db.tbl_Item
select new
{
i = t.id,
cell = new string[]{
t.batchno,t.brand,t.buyingPrice.ToString(),
t.catg,
t.itemcode,
t.name,
t.qtyLimit.ToString(),
t.Quantity.ToString(),
t.sellingPrice.ToString(),t.supplier,t.unitType,t.vat.ToString()
}
}).ToArray()
};
return Json(v, JsonRequestBehavior.AllowGet);
}
And the javascript code are
jQuery("#list").jqGrid({
cache: false,
async: false,
url: '/Settings/itemList/',
datatype: 'json',
mtype: 'GET',
colNames: ['id','New Item', 'Batch No', 'Supplier', 'Unit', 'B. Price', 'S. Price','Item Code','Vat','Limit'],
colModel: [
{ name: 'id', index: 'id', width: 110, align: 'center',hidden:true },
{ name: 'name', index: 'name', width: 110, align: 'center' },
{ name: 'batchno', index: 'batchno', width: 110, align: 'center' },
{ name: 'supplier', index: 'supplier', width: 110, align: 'center' },
{ name: 'unitType', index: 'unitType', width: 110, align: 'center', editoptions: { readonly: 'readonly' } },
{ name: 'buyingPrice', index: 'buyingPrice', width: 110, align: 'center', editoptions: { readonly: 'readonly' } },
{ name: 'sellingPrice', index: 'sellingPrice', align: 'center' },
{ name: 'itemcode', index: 'itemcode', width: 110, align: 'center'},
{ name: 'vat', index: 'vat', width: 110, align: 'center', editoptions: { readonly: 'readonly' } },
{ name: 'qtyLimit', index: 'qtyLimit', align: 'center' }
],
pager: jQuery('#pager'),
rowNum: 2,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
width: 960,
height: 200,
loadOnce: false,
excelexport: true,
imgpath: '/scripts/themes/coffee/images',
caption: 'Stock Information'
});
Please help me.

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);

How to mantain filter row when sortable option is set to true in jqgrid?

Im using JQgrid with sortable option set to true and filter toolbar. The problem is that when i change a column order, the filter toolbar maintains the original position.
Example:
I have 2 columns: ID, Name
I change the place and y got Name, ID.
When i filter by name, the e parameter has ID="john"
im using jqgrid 4.4.0.
I change the column order with the mouse from the UI.
Jqgrid code:
grilla.jqGrid({
datatype: function (e) {
dataTypeGrillaEnServerConSort(grilla, actualizarDatos, e, getDatos, !primeraCarga);
},
rowNum: Math.max,
colNames: ['id', 'Apellido Y Nombre', 'Mail', 'Documento', 'Edad', 'Foto'],
colModel: [
{ name: 'id', index: 'id', align: 'right', hidden: true },
{ name: 'nombre', index: 'nombre', width: 60, align: 'left', sorttype: 'text' },
{ name: 'mail', index: 'mail', width: 60, align: 'left', sorttype: 'text' },
{ name: 'documento', index: 'documento', width: 10, align: 'left', sorttype: 'text' },
{ name: 'edad', index: 'edad', width: 10, align: 'right', sorttype: 'number' },
{ name: 'foto', index: 'foto', width: 30, align: 'left', sorttype: 'number', formatter: eliminarFormatter }
],
sortname: 'nombre',
sortorder: "asc",
sortable: true,
caption: "Personas",
emptyrecords: "No hay ninguna persona cargada.",
loadtext: "Cargando...",
autowidth: false,
height: 300,
cellsubmit: 'clientArray',
width: 1200,
pager: "#pager",
rowNum: CANTIDADDEFILASPORPAGINA,
viewrecords: true,
gridComplete: function () {
//mostrar la barra de filtros
grilla.filterToolbar();
grilla.find("img").error(function () {
$(this).attr('src', pathFotoNoEncontrada);
});
}
});

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); } }
}
});

Develop Reference

JavaScript is the programming language of the Web.

Pass Id to Subgrid of Jqgrid - javascript

Related

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

How to show paginationa in jqgrid?

Server Side Sort JQGrid Sort Button Not Working

How to mantain filter row when sortable option is set to true in jqgrid?

class in column jqgrid doesnt working

Categories

Resources