Develop Reference

JqGrid set column width not working

I am trying to implement an grid with JqGrid.
I am not able to align the column width with the header width As the column data is too big to accommodate there. Is it possible to hide the column value if it exceeded the Header width. Below is my code snippet.
$("#tblscheduleScan").jqGrid({
data: data,
datatype: 'local',
width: 1025,
colNames: ['Chosen Repo', 'Protex Project Name', 'Next Scheduled Scan', 'Recurrence Pattern', 'Modify'],
colModel: [{
name: 'scannedPath',
shrinkToFit: false
}, {
name: 'projectName',
shrinkToFit: false
}, {
name: 'nextScanDate',
shrinkToFit: false
}, {
name: 'scheduleType',
shrinkToFit: false
}, {
name: 'Modify',
align: 'center',
classes: 'clickGridLink',
shrinkToFit: false
}],
sortname: 'projectName',
viewrecords: true,
sortorder: "asc",
caption: '<h3>Scan Schedules</h3>',
height: 'auto',
gridview: true,
autoencode: true,
onCellSelect: function(rowid, iRow, iCol, e) {
//var rowData = $(this).jqGrid("getRowData", rowid);
if (iCol === 'Edit') {
modifyScheduleScan(data[rowid - 1]);
}
}
});
If I try to set the width Manually it is not working in google chrome browser but works fine in Firefox.
colModel: [
{name: 'scannedPath', width: 50, shrinkToFit: false},
{name: 'projectName', width: 95, shrinkToFit: false},
{name: 'nextScanDate', width: 30, shrinkToFit: false},
{name: 'scheduleType', width: 27, shrinkToFit: false},
{name: 'Modify', align: 'center', classes: 'clickGridLink', width: 10, shrinkToFit: false}
]

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>

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

extJS Chart auto width/height

I have the following extJs window which has two tabs in it. One of the tab has got a column chart and the other one has a grid. Everything is working fine but what i want to accomplish here is that if i maximize the window the tabs size+ the charts size in the tabs should too. How can i accomplish it. I also have two calendar fields in the window above the tabs..
var win = Ext.create('Ext.Window', {
width: eachWindowWidth,
height: eachWindowHeight,
hidden: false,
maximizable: true,
title: 'Registered Hosts',
renderTo: Ext.getBody(),
items: [
{
xtype: 'datefield',
name: 'time',
fieldLabel: 'From',
anchor: '90%'
},
{
xtype: 'datefield',
name: 'time',
fieldLabel: 'To',
anchor: '90%'
},
{
xtype: "label",
fieldLabel: text,
name: 'txt',
text: text
},
{
xtype: 'tabpanel',
activeTab: 0,
width: eachTabWidth,
height: eachTabHeight,
plain: true,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [
{
title: 'Normal Tab',
items: [
{
id: 'chartCmp',
xtype: 'chart',
height: 300,
width: 300,
style: 'background:#fff',
animate: true,
shadow: true,
store: store1,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
grid: true,
fields: ['name']
}
],
series: [
{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data1'
}
]
}
]
},
{
title: 'Table View',
xtype: 'grid',
width: 200,
height: 200,
collapsible: false,
store: store1,
multiSelect: true,
viewConfig: {
emptyText: 'No information to display'
},
columns: [
{
text: 'Devices',
flex: 50,
dataIndex: 'name'
},
{
text: 'Pass',
flex: 50,
dataIndex: 'data1'
}
]
}
]
}
]
});

On resize event of window, change width of tabs size and the charts size however you want. Write a function which will execute on window resize event, In function you can access your fields like below :
var tab = Ext.getCmp('tabId');
var chart = Ext.getCmp('chartId');
change lengths of tab and chart according to your requirement.
Check out window resize event here.