I want to use jqgrid with subgrids. I have created a jqgrid table. However, I want to display the descriptions and symbols in the subgrid .
I have also included JSOn data and my code snippet and the fiddle demo here
Can I create subgrids from the following JSON data with jqgrid with out having nested JSON data? Is there any example or demo I can refer to?
$(document).ready(function() {
var jsonData = {
"Name": "Julie Brown",
"Account": "C0010",
"LoanApproved": "12/5/2015",
"LastActivity": "4/1/2016",
"PledgedPortfolio": "4012214.00875",
"MaxApprovedLoanAmt": "2050877.824375",
"LoanBalance": "1849000",
"AvailableCredit": "201877.824375",
"Aging": "3",
"Brokerage": "My Broker",
"Contact": "Robert L. Johnson",
"ContactPhone": "(212) 902-3614",
"RiskCategory": "Yellow",
"rows": [{
"ClientID": "C0010",
"Symbol": "WEC",
"Description": "Western Electric Co",
"ShareQuantity": "20638",
"SharePrice": "21.12",
"TotalValue": "435874.56",
"LTVCategory": "Equities",
"LTVRatio": "50%",
"MaxLoanAmt": "217937.28"
}, {
"ClientID": "C0010",
"Symbol": "BBB",
"Description": "Bins Breakers and Boxes",
"ShareQuantity": "9623",
"SharePrice": "74.29125",
"TotalValue": "714904.69875",
"LTVCategory": "Equities",
"LTVRatio": "50%",
"MaxLoanAmt": "357452.349375"
}, {
"ClientID": "C0010",
"Symbol": "GPSC",
"Description": "Great Plains Small Cap Stock",
"ShareQuantity": "49612",
"SharePrice": "14.24",
"TotalValue": "706474.88",
"LTVCategory": "Mutual Funds - Small Cap",
"LTVRatio": "40%",
"MaxLoanAmt": "282589.952"
}]
},
mmddyyyy = "";
/*********************************************************************/
$("#output").jqGrid({
url: "/echo/json/",
mtype: "POST",
datatype: "json",
postData: {
json: JSON.stringify(jsonData)
},
colModel: [
/** { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
{
name: 'Symbol',
width: 65
}, {
name: 'Description',
width: 165
}, {
name: 'ShareQuantity',
align: 'right',
width: 85,
classes: "hidden-xs", labelClasses: "hidden-xs",
formatter: 'currency',
formatoptions: {
prefix: " ",
suffix: " "
}
}, {
name: 'SharePrice',
label: 'Share Price',
align: 'right',
width: 100,
classes: "hidden-xs", labelClasses: "hidden-xs",
template: "number",
formatoptions: {
prefix: " $",
decimalPlaces: 4
}
},
/*{ label: 'Value1',
name: 'Value1',
width: 80,
sorttype: 'number',
formatter: 'number',
align: 'right'
}, */
{
name: 'TotalValue',
label: 'Total Value',
width: 160,
sorttype: 'number',
align: "right",
formatter: 'currency',
formatoptions: {
prefix: " $",
suffix: " "
}
}, {
name: 'LTVRatio',
label: 'LTV Ratio',
width: 70,
sorttype: 'number',
align: "right",
formatter: 'percentage',
formatoptions: {
prefix: " ",
suffix: " "
}
}, {
name: 'LTVCategory',
label: 'LTV Category',
classes: "hidden-xs", labelClasses: "hidden-xs",
width: 120,
width: 165
},
{
name: 'MaxLoanAmt',
label: 'MaxLoanAmount',
width: 165,
sorttype: 'number',
align: "right",
formatter: 'currency',
formatoptions: {
prefix: " $",
suffix: " "
}
}
],
additionalProperties: ["Num1"],
/*beforeProcessing: function (data) {
var item, i, n = data.length;
for (i = 0; i < n; i++) {
item = data[i];
item.Quantity = parseFloat($.trim(item.Quantity).replace(",", ""));
item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", ""));
item.Value = parseFloat($.trim(item.Value).replace(",", ""));
item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
}
}, */
iconSet: "fontAwesome",
loadonce: true,
rownumbers: true,
cmTemplate: {
autoResizable: true,
editable: true
},
autoResizing: {
compact: true
},
autowidth: true,
height: 'auto',
forceClientSorting: true,
sortname: "Symbol",
footerrow: true,
caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>",
loadComplete: function() {
var $self = $(this),
sum = $self.jqGrid("getCol", "Price", false, "sum"),
sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");
//ltvratio = $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount");
$self.jqGrid("footerData", "set", {
LTVCategory: "Max Approved Loan Amount:",
Price: sum,
MaxLoanAmt: sum1
});
}
});
$("#output").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"});
$(window).on("resize", function () {
var newWidth = $("#output").closest(".ui-jqgrid").parent().width();
$("#output").jqGrid("setGridWidth", newWidth, true);
});
});
If I correctly understand your requirements, it's relatively easy. If you want to display "Symbol" and "Description" in subgrid, then you would like to remove the corresponding columns from the main grid. You use loadonce: true option to fill the local data with the data return from the server. The item, which represent every row of input data, will be filled with columns and the properties from additionalProperties option. Thus you should add
additionalProperties: ["Symbol", "Description"]
after removing "Symbol" and "Description" from the columns.
Now you should add subGrid: true option to create the "subrgid" column with "+" symbol, which allows to open the grid. On opening jqGrid create the div for the subrgid and the callback subGridRowExpanded is responsible to fill the grid with data. One can create subgrid inside of the div, but one can place any HTML fragments in any form. For example
subGridRowExpanded: function (subgridDivId, rowid) {
var item = $(this).jqGrid("getLocalRow", rowid);
$("#" + $.jgrid.jqID(subgridDivId)).html("Symbol: <em>" + item.Symbol +
"</em><br/>Description: <em>" + item.Description + "</em>");
}
The resulting demo https://jsfiddle.net/OlegKi/615qovew/75/ displays the data like on the picture below
You are absolutely free in the design of information displayed in the "subgrid"-div.
Related
How I create a table using DevExtreme js with multilevel summaries values. For example:
You can have two levels of Master Detil dxDataGrid
$(function(){
$("#gridContainer").dxDataGrid({
dataSource: employees,
keyExpr: "ID",
showBorders: true,
columns: [{
dataField: "Prefix",
caption: "Title",
width: 70
},
"FirstName",
"LastName", {
dataField: "Position",
width: 170
}, {
dataField: "State",
width: 125
}, {
dataField: "BirthDate",
dataType: "date"
}
],
masterDetail: {
enabled: true,
template: function(container, options) {
var currentEmployeeData = options.data;
$("<div>")
.addClass("master-detail-caption")
.text(currentEmployeeData.FirstName + " " + currentEmployeeData.LastName + "'s Tasks:")
.appendTo(container);
$("<div>")
.dxDataGrid({
columnAutoWidth: true,
showBorders: true,
//Here your second level of Master Detail
columns: ["Subject", {
dataField: "StartDate",
dataType: "date"
}, {
dataField: "DueDate",
dataType: "date"
}, "Priority", {
caption: "Completed",
dataType: "boolean",
calculateCellValue: function(rowData) {
return rowData.Status == "Completed";
}
}],
dataSource: currentEmployeeData.Tasks
}).appendTo(container);
}
}
});
});
I am trying to generate a JQgrid with Subgrid based on examples I came across online but instead of local data, I am using json service .
By Using nested JSON data, where the nested json data is used for the subgrid section.
When I try to create the grid, I keep getting this error "SyntaxError: Unexpected token i in JSON at position 26 200 OK"
What am I doing wrong or missing?
My code is below and my Fiddle is here
MY CODE
$(document).ready(function() {
var jsonData = {
id: 48803,
thingy: "DSK1",
number: "02200220",
status: "OPEN",
subgridData: [{
num: 1,
item: "Item 1",
qty: 3
}, {
num: 2,
item: "Item 2",
qty: 5
}]
},
{
id: 48769,
thingy: "APPR",
number: "77733337",
status: "ENTERED",
subgridData: [{
num: 3,
item: "Item 3",
qty: 5
}, {
num: 2,
item: "Item 2",
qty: 10
}]
},
mmddyyyy = "";
/*********************************************************************/
$("#grid").jqGrid({
url: "/echo/json/",
mtype: "POST",
datatype: "json",
postData: {
json: JSON.stringify(jsonData)
},
height: 'auto',
colNames: ['Inv No', 'Thingy', 'Number', 'Status'],
colModel: [{
name: 'id',
width: 60,
sorttype: "int",
key: true
}, {
name: 'thingy',
width: 90
}, {
name: 'number',
width: 80,
formatter: "integer"
}, {
name: 'status',
width: 80
}],
gridview: true,
autoencode: true,
pager: '#pagerId',
caption: "Stack Overflow Subgrid Example",
subGrid: true,
subGridOptions: {
plusicon: "ui-icon-triangle-1-e",
minusicon: "ui-icon-triangle-1-s",
openicon: "ui-icon-arrowreturn-1-e"
},
shrinkToFit: false,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id = subgrid_id + "_t",
pager_id = "p_" + subgrid_table_id,
localRowData = $(this).jqGrid("getLocalRow", row_id);
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table><div id='" + pager_id + "'></div>");
$("#" + subgrid_table_id).jqGrid({
datatype: "local",
data: localRowData.subgridData,
colNames: ['No', 'Item', 'Qty'],
colModel: [{
name: "num",
width: 80,
key: true
}, {
name: "item",
width: 130
}, {
name: "qty",
width: 70,
align: "right"
}],
rowNum: 20,
idPrefix: "s_" + row_id + "_",
pager: "#" + pager_id,
autowidth: true,
gridview: true,
autoencode: true,
sortname: "num",
sortorder: "asc",
height: "auto"
}).jqGrid('navGrid', "#" + pager_id, {
edit: false,
add: false,
del: false
});
}
});
});
MY Fiddle
First of all you have to fix the syntax error. The definition of the variable jsonData in the form
var jsonData = {
id: 48803,
...
},
{
id: 48769,
...
};
is false. You try to define jsonData as array of items. Thus the code fragment have to be fixed to
var jsonData = [{
id: 48803,
...
},
{
id: 48769,
...
}];
Then you define <table id="grid"></table>, but create the grid using $("#output").jqGrid({...}); in your demo. You have to use in both cases the same value if id.
Now, back to you main problem. You want to use subgridData property of the items of the data ($(this).jqGrid("getLocalRow", row_id).subgridData) filled via datatype: "json". The datatype: "json" means server based sorting, paging and filtering of the data. jqGrid don't fill local data (the data parameter). To fill data you have to inform jqGrid that the input data from the server contains full data (all the pages) and thus jqGrid should fill data option and to use local sorting, paging and filtering. Thus you should add
loadonce: true,
and
additionalProperties: ["subgridData"],
additionally to inform jqGrid to fill the items of local data with subgridData property together with the properties id, thingy, number and status (the columns of the main grid).
Finally you can remove unneeded pager divs and to use simplified form of the pager: pager: true. You should consider to use Font Awesome additionally: iconSet: "fontAwesome".
The modified demo is https://jsfiddle.net/OlegKi/615qovew/64/, which uses the following code
$(document).ready(function() {
var jsonData = [{
id: 48803,
thingy: "DSK1",
number: "02200220",
status: "OPEN",
subgridData: [{
num: 1,
item: "Item 1",
qty: 3
}, {
num: 2,
item: "Item 2",
qty: 5
}]
},
{
id: 48769,
thingy: "APPR",
number: "77733337",
status: "ENTERED",
subgridData: [{
num: 3,
item: "Item 3",
qty: 5
}, {
num: 2,
item: "Item 2",
qty: 10
}]
}],
mmddyyyy = "",
$grid = $("#output");
/*********************************************************************/
$grid.jqGrid({
url: "/echo/json/",
mtype: "POST",
datatype: "json",
postData: {
json: JSON.stringify(jsonData)
},
colNames: ['Inv No', 'Thingy', 'Number', 'Status'],
colModel: [{
name: 'id',
width: 60,
sorttype: "int",
key: true
}, {
name: 'thingy',
width: 90
}, {
name: 'number',
width: 80,
formatter: "integer"
}, {
name: 'status',
width: 80
}],
loadonce: true,
additionalProperties: ["subgridData"],
autoencode: true,
pager: true,
caption: "Stack Overflow Subgrid Example",
subGrid: true,
/*subGridOptions: {
plusicon: "ui-icon-triangle-1-e",
minusicon: "ui-icon-triangle-1-s",
openicon: "ui-icon-arrowreturn-1-e"
},*/
iconSet: "fontAwesome",
shrinkToFit: false,
subGridRowExpanded: function(subgridDivId, rowid) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
subgridData = $(this).jqGrid("getLocalRow", rowid).subgridData;
$("#" + subgridDivId).append($subgrid);
$subgrid.jqGrid({
data: subgridData,
colNames: ['No', 'Item', 'Qty'],
colModel: [{
name: "num",
width: 80,
key: true
}, {
name: "item",
width: 130
}, {
name: "qty",
width: 70,
align: "right"
}],
rowNum: 20,
idPrefix: "s_" + rowid + "_",
pager: true,
iconSet: "fontAwesome",
autowidth: true,
autoencode: true,
sortname: "num"
}).jqGrid('navGrid', {
edit: false,
add: false,
del: false
});
}
}).jqGrid('filterToolbar', {
stringResult: true,
searchOnEnter: false,
defaultSearch: "cn"
});
$(window).on("resize", function() {
var newWidth = $grid.closest(".ui-jqgrid").parent().width();
$grid.jqGrid("setGridWidth", newWidth, true);
}).triggerHandler("resize");
});
Hi I Have the following code which displays the table using jqgrid. But, i noticed
that none of the jqGrid is being responsive.
How can i make existing jqGrid responsive for tablet and smart phones
UPUDATE
I have updated my code with the following
$(window).on("resize", function () {
var newWidth = $("#loanGrid").closest(".ui-jqgrid").parent().width();
$("#loanGrid").jqGrid("setGridWidth", newWidth, true);
});
The respomnsiveness works but not completely.
Here is the code below and fiddle here
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-11">
<h3 class="subheader"> Sample Info </h4>
<div class="redmond">
<table id="output"></table>
</div>
</div>
</div>
</div>
jqGrid JavaScript
$("#output").jqGrid({
url: jsonData,
mtype: "GET",
datatype: "json",
/* postData: {
json: JSON.stringify(data)
},
*/
colModel: [
/** { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
{
name: 'Symbol',
label: 'Symbol',
align: 'left',
width: 65
}, {
name: 'Description',
label: 'Description',
align: 'left',
width: 165
}, {
name: 'ShareQuantity',
label: 'ShareQuantity',
align: 'right',
width: "85",
formatter: 'currency',
formatoptions: {
prefix: " ",
suffix: " "
}
}, {
name: 'SharePrice',
label: 'Share Price',
align: 'right',
width: 100,
template: "number",
formatoptions: {
prefix: " $",
decimalPlaces: 4
}
},
/*{ label: 'Value1',
name: 'Value1',
width: 80,
sorttype: 'number',
formatter: 'number',
align: 'right'
}, */
{
name: 'TotalValue',
label: 'Total Value',
width: 160,
sorttype: 'number',
align: "right",
formatter: 'currency',
formatoptions: {
prefix: " $",
suffix: " "
}
}, {
name: 'LTVRatio',
label: 'LTV Ratio',
width: 70,
sorttype: 'number',
align: "right",
formatter: 'percentage',
formatoptions: {
prefix: " ",
suffix: " "
}
}, {
name: 'LTVCategory',
label: 'LTV Category',
width: 120,
width: 165
},
{
name: 'MaxLoanAmt',
label: 'MaxLoanAmount',
width: 165,
sorttype: 'number',
align: "right",
formatter: 'currency',
formatoptions: {
prefix: " $",
suffix: " "
}
}
],
additionalProperties: ["Num1"],
/*beforeProcessing: function (data) {
var item, i, n = data.length;
for (i = 0; i < n; i++) {
item = data[i];
item.Quantity = parseFloat($.trim(item.Quantity).replace(",", ""));
item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", ""));
item.Value = parseFloat($.trim(item.Value).replace(",", ""));
item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
}
}, */
iconSet: "fontAwesome",
loadonce: true,
rownumbers: true,
cmTemplate: {
autoResizable: true,
editable: true
},
autoResizing: {
compact: true
},
forceClientSorting: true,
sortname: "Symbol",
footerrow: true,
caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>",
loadComplete: function() {
var $self = $(this),
sum = $self.jqGrid("getCol", "Price", false, "sum"),
sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");
//ltvratio = $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount");
$self.jqGrid("footerData", "set", {
LTVCategory: "Max Approved Loan Amount:",
Price: sum,
MaxLoanAmt: sum1
});
}
});
//jQuery("#loanGrid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
});
You can use Bootstrap classes .visible-* or hidden-* to hide/show some elements on the page depend on the window resolution (see the documentation). The properties classes, labelClasses or colModel can be used in free jqGrid (starting with version 4.8, see here and here) to assign the classes to the column. For example the demo https://jsfiddle.net/OlegKi/w7pxts0z/7/ uses
classes: "hidden-xs hidden-sm", labelClasses: "hidden-xs hidden-sm"
in LTVCategory column and the properties
classes: "hidden-xs", labelClasses: "hidden-xs"
in ShareQuantity and SharePrice columns. As the result the column LTVCategory will be hidden on "extra small devices" (width<768px) and "small devices" (width<992px, but width>=768px).
There is a concept that eludes me ... I can't figure out what is it I do wrong !!!
I have the following JSON:
{
"data":[
{
"amount":150.00,
"dealDate":"10/18/15 11:53 AM",
"dealName":"Deal 1",
"id":"1",
"parent":"null",
"level":"0",
"isLeaf":false,
"loaded":true
},
{
"amount":100.00,
"dealDate":"10/16/15 11:53 AM",
"dealName":"Deal 1a",
"id":"2",
"parent":"1",
"level":"1",
"isLeaf":true,
"loaded":true
},
{
"amount":-20.34,
"dealDate":"10/16/15 11:53 AM",
"dealName":"Deal 1b",
"id":"3",
"parent":"1",
"level":"1",
"isLeaf":true,
"loaded":true
},
{
"amount":25,
"dealDate":"10/16/15 11:53 AM",
"dealName":"Deal 2",
"id":"4",
"parent":"null",
"level":"0",
"isLeaf":false,
"loaded":true
}
]
}
And the jQgrid definition: (with the treeGrid options removed (commented out))
<script type="text/javascript">
$(function () {
var mydata ;
$.getJSON( "sampleData.json", function( data ) {
mydata=$.extend(true, [], data.data) ;
console.log("Initial JSON data:\n" + JSON.stringify(mydata));
$("#list").jqGrid({
data: mydata,
datatype: "local",
mtype: "GET",
colNames: ["id", "Title", "Amount", "Date", "","","",""],
colModel: [
{ name: "id", width: 55, hidden: true},
{ name: "dealName", width: 90, editable: true },
{ name: "amount", width: 80, align: "right",editable: true },
{ name: "dealDate", width: 80, align: "right", editable: true }
{ name: "parent", width: 80, align: "right", hidden: true },
{ name: "level", width: 80, align: "right", hidden: true },
{ name: "isLeaf", width: 80, align: "right", hidden: true },
{ name: "loaded", width: 80, align: "right", hidden: true }
],
editurl: 'clientArray',
cellsubmit : 'clientArray',
rowNum: 10,
rowList: [10, 20, 30, 50],
sortname: "id",
viewrecords: true,
gridview: true,
// treeGrid: true,
// ExpandColumn: 'dealName',
// treeGridModel:'adjacency',
width: $(window).width() *0.55,
caption: "Deal Test Grid"
});
$("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del:
false });
$("#list").jqGrid('gridResize');
});
});
</script>
And this produces perfectly fine grid !!
HOWEVER !!!
Once I remove comments from tree grid parameters, my grid is NOT loaded !!
I have tried with adding and with removing of quotes around null value of a parent where there is no parent
"parent":"null", vs. "parent":null,
No avail !! Same results !!
Please, help !! What is it called - that thing that I am doing wrong.
There are some problems in your code. First of all, it's the syntax error in colModel: no comma after the item which defines the column dealDate. The next problem: the input data should contains id, parent, level, isLeaf and isLeaf, but you should not define any columns in colModel with the names. The last important problem: you need include treeGrid: true, treeGridModel: "adjacency", ExpandColumn: "dealName" and optionally ExpandColClick: true to make the grid be TreeGrid.
The resulting code could be
$("#list").jqGrid({
data: mydata,
colNames: ["Title", "Amount", "Date"],
colModel: [
{ name: "dealName", width: 100 },
{ name: "amount", width: 80, template: "number" },
{ name: "dealDate", width: 180, align: "right", sorttype: "date",
formatter: "date",
formatoptions: { srcformat: "n/j/Y g:i A", newformat: "n/j/Y g:i A" } }
],
cmTemplate: { width: 80, autoResizable: true, editable: true },
iconSet: "fontAwesome",
treeGrid: true,
treeGridModel: "adjacency",
ExpandColumn: "dealName",
ExpandColClick: true,
inlineEditing: { keys: true },
ondblClickRow: function (rowid, iRow, iCol, e) {
var $self = $(this), savedRow = $self.jqGrid("getGridParam", "savedRow");
if (savedRow.length > 0 && savedRow[0].id !== rowid) {
$self.jqGrid("restoreRow", savedRow[0].id);
}
$self.jqGrid("editRow", rowid, { focusField: e.target });
}
}).jqGrid("gridResize");
where I included starting inline editing on double-click. The resulting demo can be find here. It uses free jqGrid 4.10.0, which I published today. The code is already available on CDNs (see the wiki article).
I am using jqGrid to display data. Data is in xml format.
I am unable to format date column (source format : yyyyMMdd, target format : dd-mm-yyy).
My Grid is unable to display text value from select, It shows values instead of text.
Strange thing is it is working in some other screen.
<SalesOpportunitiesLines>
<row>
<LineNum>0</LineNum>
<SalesPerson>1</SalesPerson>
<StartDate>20131126</StartDate>
<ClosingDate>20131126</ClosingDate>
<StageKey>1</StageKey>
<PercentageRate>0.000000</PercentageRate>
<MaxLocalTotal>1000000.000000</MaxLocalTotal>
<DocumentType>bodt_MinusOne</DocumentType>
<BPChanelName>ACCM Services</BPChanelName>
<BPChanelCode>CLINAC0709</BPChanelCode>
<SequenceNo>366</SequenceNo>
<DataOwnershipfield>1</DataOwnershipfield>
<BPChannelContact>1212</BPChannelContact>
</row>
</SalesOpportunities>
$("#uxStages").jqGrid({
datatype: 'xmlstring',
datastr: xmlstring,
mtype: 'GET',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
xmlReader: { repeatitems: false, root: "BO>SalesOpportunitiesLines", row: 'row' },
colNames: ['LineNum', 'Star tDate', 'Clos Date', 'Sales Employee', 'Stage', 'Percentage', 'Potential Amount', 'Document Type', 'Doc. No.', 'Owner'],
colModel: [
{ name: 'LineNum', key: true, index: 'LineNum', hidden: true, sortable: false, width: 60 },
{ name: 'StartDate', key: false, index: 'StartDate', sortable: false, align: "left", width: 90,
editable: true,
formatter: 'date',
formatoptions: { srcformat: 'yyyyMMdd', newformat: 'd-M-y' },
editoptions: {
dataInit: function (elem) {
$(elem).datepicker({ dateFormat: 'dd-M-yy' });
}
}
},
{ name: 'ClosingDate', key: false, index: 'ClosingDate', sortable: false, align: "left", width: 90,
editable: true,
formatter: 'date',
formatoptions: { srcformat: 'yyyyMMdd', newformat: 'd-M-y' },
editoptions: {
dataInit: function (elem) {
$(elem).datepicker({ dateFormat: 'dd-M-yy' });
}
}
},
{ name: 'SalesPerson', key: false, index: 'SalesPerson', sortable: false, width: 80,
editable: true,
edittype: "select"
},
{ name: 'StageKey', key: false, index: 'StageKey', hidden: false, sortable: false, width:80,
editable: true,
edittype: "select"
},
{ name: 'PercentageRate', key: false, index: 'PercentageRate', sortable: false, width: 60 },
{ name: 'MaxLocalTotal', key: false, index: 'MaxLocalTotal', sortable: false, width: 100,
editable: true,
edittype: "text",
formatter: 'currency',
formatoptions: { thousandsSeparator: ',' }
},
{ name: 'DocumentType', key: false, index: 'DocumentType', sortable: false, width: 90,
editable: true,
edittype: 'select',
formatter: 'select',
editoptions: { value: "bodt_MinusOne:;bodt_Quotation:Sales Quotations;bodt_Order:Sales Orders;bodt_DeliveryNote:Deliveries;bodt_Invoice:A/R Invoice" }
},
{ name: 'DocumentNumber', key: false, index: 'DocumentNumber', sortable: false, width: 40 },
{ name: 'DataOwnershipfield', key: false, index: 'DataOwnershipfield', hidden: false, sortable: false, width: 60,
editable: true,
edittype: "select"
}
],
rowNum: 100,
viewrecords: true,
gridview: true,
rownumbers: true,
height: 150,
loadonce: true,
width: 1120,
scrollOffset: 0,
ondblClickRow: function (rowid) {
var grid = $("#uxStages");
var selectedRowId = grid.jqGrid('getGridParam', 'selrow');
lastSelection = selectedRowId;
grid.jqGrid('editRow', selectedRowId, true, null, null, null, null, OnSuccessEdit_Stages);
$('#' + selectedRowId + "_StageKey").css('width', '100%');
$('#' + selectedRowId + "_SalesPerson").css('width', '100%');
$('#' + selectedRowId + "_DataOwnershipfield").css('width', '100%');
},
loadComplete: function () {
var ids = $("#uxStages").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
if (i < ids.length - 1) {
$('#' + $.jgrid.jqID(id)).addClass('not-editable-row');
$('#' + $.jgrid.jqID(id)).addClass('ui-state-error');
}
}
},
onSelectRow: function (id) {
if (id && id !== lastSelection) {
var grid = $("#uxStages");
$('#uxStages').saveRow(lastSelection);
}
}
}).jqGrid('navGrid', { edit: true, edit: true, add: true, del: true, searchOnEnter: false, search: false }, {}, {}, {}, { multipleSearch: false }).trigger('reloadGrid');
$("#uxStages").setColProp('SalesPerson', { edittype: "select", editoptions: { value: GetSalesValues()} }); //Here i m fetching values in namedvalue pairs
$("#uxStages").setColProp('StageKey', { edittype: "select", editoptions: { value: GetStagesValues()} }); //Here i m fetching values in namedvalue pairs
$("#uxStages").setColProp('DataOwnershipfield', { edittype: "select", editoptions: { value: GetDataOwnershipValues()} }); //Here i m fetching values in namedvalue pairs
Can anybody help me out?
The predefined formatter: "date" of jqGrid don't support input fields without separators. So you have to use custom formatter. The implementation could be something like the following
formatter: function (cellValue, opts, rawdata, action) {
if (action === "edit") {
// input data have format "dd-mm-yy" format - "20-03-2015"
var input = cellValue.split("-");
if (input.length === 3) {
return input[0] + "-" + input[1] + "-" + input[2];
}
} else if (cellValue.length === 8) {
// input data have format "yymmdd" format - "20150320"
var year = cellValue.substr(0,4), month = cellValue.substr(4,2),
day = cellValue.substr(6,2);
return day + "-" + month + "-" + year;
}
return cellValue; // for empty input for example
}
Depend on other options (like the usage of loadonce: true) and depend on exact version of jqGrid which you use, you could need to implement additional callbacks in the column. For example if you use loadonce: true then the editing data will be saved locally. To hold the data in the same format as input data one can use saveLocally callback of free jqGrid (see here). In the case you can implement saveLocally callback in the column as the following
saveLocally: function (options) {
var input = String(options.newValue).split("-");
options.newItem[options.cmName] = input.length === 3 ?
input[2] + input[1] + input[0] :
options.newValue;
}
See the corresponding demo uses the above code. It uses local input data in the same format. The date will be displayed in the desired format, but the edited data will be saved locally in the same format like original date.