jQWidgets Forums
Forum Replies Created
-
Author
-
February 11, 2015 at 9:30 pm in reply to: Nested Grid in tab of Row details Nested Grid in tab of Row details #66948
The grid can even have it’s own seperate datasource, just can’t figure out how to display it on the 2nd tab in the row details.
January 9, 2015 at 3:04 pm in reply to: Value of cell of expanded row filtered Value of cell of expanded row filtered #65212Perfect! Thank you! I couldn’t find the correct index.
January 9, 2015 at 1:44 pm in reply to: Value of cell of expanded row filtered Value of cell of expanded row filtered #65206January 9, 2015 at 1:42 pm in reply to: Value of cell of expanded row filtered Value of cell of expanded row filtered #65205I’m not sure how to save and share my fiddle, but here is an example. This forked from here so if you use it with your generatedata you should be able to see it happen. If you don’t apply any filters and click on a row, it will return the correct first name of the xapnded row in the expand event. If you filter by part of a last name and then click on a row, the first name being displayed is wrong. If in the filtered dataset you expand the 3rd row, it is displaying the first name from the 3rd row of the entire dataset and not the filtered data set. How do I get the data from the filtered row? Thanks! Julie
<div id='jqxWidget'> <div id="jqxgrid"></div> </div> <input type="button" style="margin: 10px;" id="jqxbutton" value="Get row data by id" />
var data = generatedata(500); var source = { localdata: data, datafields: [{ name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'date', type: 'date' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }], datatype: "array" }; var adapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid({ width: 500, theme: 'energyblue', source: adapter, sortable: true, selectionmode: 'singlecell', columns: [{ text: 'First Name', datafield: 'firstname', columngroup: 'Name', width: 90 }, { text: 'Last Name', columngroup: 'Name', datafield: 'lastname', width: 90 }, { text: 'Product', datafield: 'productname', width: 170 }, { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }], showfilterrow: true, filterable: true, rowdetails: true, autoloadstate: false, autosavestate: false, rowdetailstemplate: { rowdetails: "more info here" } }); $('#jqxgrid').on('rowexpand', function (event) { // event arguments. var args = event.args; // row details. var details = args.details; // row's bound index. selectedRowIndex = args.rowindex; // var index = $('#jqxgrid').jqxGrid('getrowboundindex', 0); var val = $('#jqxgrid').jqxGrid('getcellvalue', selectedRowIndex, "firstname"); alert("First Name of expanded row is " + val); }); $("#jqxbutton").jqxButton({ theme: 'energyblue', height: 30 }); $('#jqxbutton').click(function () { // get row ID. var rowID = $('#jqxgrid').jqxGrid('getrowid', 0); // get row Data by ID. var data = $('#jqxgrid').jqxGrid('getrowdatabyid', rowID); alert(data.firstname + " " + data.lastname + " " + data.productname + " " + data.date + " " + data.quantity + " " + data.price); });
Nevermind – I got it to work. I’ll post my code in case anyone else is trying something similar. I will say, that the grid I am loading it to is identical to the one that it is saved from.
$("#jqxgrid").jqxGrid({ theme: 'OriasBlue', width: '100%', height: 550, source: gridDataAdapter, sortable: true, pageable: true, autoheight: true, columnsresize: true, pagesize: 20, pagesizeoptions: ['10', '20', '30','50','100','250','500','1000'], pagermode: 'default', localization: getLocalization(), showfilterrow: true, filterable: true, altrows: true, editable: false, enablekeyboarddelete: false, showrowdetailscolumn: true, selectionmode: 'singlerow', rowdetails: true, autoloadstate: false, autosavestate: false, rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li class='capaNotesTitle'></li></ul><div class='capaDetails'></div><div class='capaNotes'></div></div>", rowdetailsheight: 350 }, initrowdetails: initrowdetails, columns: [ { text: '', datafield: 'PriorityImagePath', width: '2%', cellsrenderer: imagerenderer }, { text: vIDTitle, dataField: 'CAPAID', width: '6%', cellsalign: 'left', align: 'left' }, { text: vDescriptionTitle, dataField: 'ShortCADesc', width: '32%', cellsalign: 'left', align: 'left' }, { text: vDateAddedTitle, dataField: 'DateAdded', filtertype: 'date', width: '12%', cellsalign: 'right', cellsformat: 'd' }, { text: vDueDateTitle, dataField: 'DueDate', filtertype: 'date', width:'12%', cellsalign: 'right', cellsformat: 'd' }, { text: vResponsibleTitle, dataField: 'RespPersonShortName', width: '12%', cellsalign: 'left', align: 'left' }, { text: vModuleTitle, dataField: 'CAModule', filtertype: 'list', filteritems: [vInspection, vIncident, vHazard, vMOC, vRRS, vNCMR, vDiscrete], width: '10%', cellsalign: 'left', align: 'left' }, { text: vSiteTitle, dataField: 'SiteDesc', width: '14%', cellsalign: 'left', align: 'left' } ], ready: function () { var MyResult; $.ajax({ async: false, type: "post", contentType: "application/json; charset=utf-8", dataType: "json", data: JSON.stringify({ EmpID: cs_EmpID }), url: "WebServices/OriasWcfService.svc/GetGridState", success: function (result) { alert("OC S=" + result.d); MyResult = result.d; if (MyResult != '') { var thisstate = JSON.parse(MyResult); $("#jqxgrid").jqxGrid('loadstate', thisstate); } }, error: function (xhr, status, error) { } }); } });
` $(“#saveStateToDB”).on(‘click’, function () {
var myresult = ClearGridState(cs_EmpID);
var state = $(‘#jqxgrid’).jqxGrid(‘getstate’);
theSavedState = JSON.stringify(state);
alert(theSavedState);
myresult = SetGridState(cs_EmpID,theSavedState);
});
//`The webservice function returns a string containing the state from the database if one was saved.
Rajamalik – were you ever able to get this situation to work? I am trying to do the same thing – I need to exit the page when editing a grid row and would like to “save the state” to a database entry upon leaving and then when I come back to the page after editing (which reloads the page with a new grid as you described) load the saved state from the database so that the grid is back to the same position and condition it was before leaving to edit. I have everything working, except that the loadstate does not work when the page has been loaded again vs refreshreshed which would make sense if it is seeing it as a different gird as Peter says. Just wondering if you found another work around that might work for my situation as well. Thanks!
December 17, 2014 at 4:46 pm in reply to: Grid JS error on LoadState Grid JS error on LoadState #64337After 4 hours, I give up – when I open JSFiddle with my account to try to create a demo it does not recognize the jqwidgets includes. If I try to add them as external attachments – even uploading them to a website I have so I can reference them that way – I still get an error that it doesn’t recognize $. If I edit the example version there is no way to save and share.
What version of the widgets and what version of javascript are being used on the example in jsfiddle for grid state and I’ll try to set mine to match exactly? http://jsfiddle.net/jqwidgets/nyPsV/ For some reason _colunns is returning 2 columns more than what is actually in the grid. When it tries to loop through it causes an error as soon as it gets to the index for the columns that don’t actually exist. I don’t know what it is about my grid or the version of files that causes it to think there are more columns than exist. If I subtract 2 from the index loop it works perfectly.
I’ve commented out all by one column on my grid and nearly all the features and still am getting the same error so something is still off, but since my data is pulling from a webservice and class I need to recreate it as an array or something to upload it for you, but I can’t even recreate the example one you have on a version I can save so I can’t go any further.http://jsfiddle.net/sjkcwatson/8m0qyqrm/
December 17, 2014 at 2:36 pm in reply to: Grid JS error on LoadState Grid JS error on LoadState #64330I’m trying to recreate it in fiddle – it was working with the -all.js reference so I’m trying to remove it and add in all the same references I have. However, now it says the dataAdaptor can’t be found, but I have the jqxData.js referenced. Can you see what I am missing and I’ll continue trying to recreate the issue. http://jsfiddle.net/jqwidgets/nyPsV/
… never mind – it didn’t save it so I have to start over.
December 17, 2014 at 1:20 pm in reply to: Grid JS error on LoadState Grid JS error on LoadState #64318I’m not completely sure how to do that with my data originating from a database. I’ll see if I can figure it out.
December 16, 2014 at 5:28 pm in reply to: Grid JS error on LoadState Grid JS error on LoadState #64269references
<script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxcore.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxmenu.js"></script> <link rel="stylesheet" href="javascript/jQWidgets_v3_5/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="javascript/jQWidgets_v3_5/styles/jqx_oriasmenu.css" type="text/css" /> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxdata.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxbuttons.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxscrollbar.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxcheckbox.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxgrid.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxgrid.edit.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxgrid.selection.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxlistbox.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxdropdownlist.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxdropdownbutton.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxcalendar.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxnumberinput.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxdatetimeinput.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxgrid.sort.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxgrid.filter.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxgrid.storage.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxgrid.pager.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/localization.js"></script> <script type="text/javascript" src="javascript/jQWidgets_v3_5/jqxtabs.js"></script>
I did try commenting all these out and use the ‘all.js’ one since that is what is used in fiddler, but same error.
December 16, 2014 at 5:14 pm in reply to: Grid JS error on LoadState Grid JS error on LoadState #64267As a further note – if I change
if (F._columns) {
for (var H = 0; H < F._columns.length; H++) {to
if (F._columns) {
for (var H = 0; H < F._columns.length-2; H++) {It works perfectly – loading the saving state with no problem. It sure seems like there is something I’m doing to cause this though since it works fine in all your demos, etc and I would like to fix it correctly if possible.
December 16, 2014 at 5:08 pm in reply to: Grid JS error on LoadState Grid JS error on LoadState #64266I made columns that are hidden for all the fields – however now it fails on column 32 … when I debug the code (with now 32 columns), it shows the error on column 32 (I’m assuming the first column is 0 since it loops from 0 to H < F.Columns.length. When it launches the debugger, F.Columns.Length=33 and H has a value of 32 when it fails – which makes since because I only have 32 columns which would make 0-31 valid. Before, it was failing on column 8 because I only had 7 columns. I thought maybe it was because I didn’t have all the datafields from my datasource represented in my grid, but I don’t think that is the case. Why is it getting the columns.length as more than the # of columns I have?
$("#jqxgrid").jqxGrid({ theme: 'OriasBlue', width: '100%', height: 550, source: gridDataAdapter, sortable: true, pageable: true, autoheight: true, columnsresize: true, pagesize: 20, pagesizeoptions: ['10', '20', '30','50','100','250','500','1000'], pagermode: 'default', localization: getLocalization(), showfilterrow: true, filterable: true, altrows: true, editable: false, enablekeyboarddelete: false, showrowdetailscolumn: true, selectionmode: 'singlerow', rowdetails: true, autoloadstate: false, autosavestate: false, rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li class='capaNotesTitle'></li></ul><div class='capaDetails'></div><div class='capaNotes'></div></div>", rowdetailsheight: 350 }, initrowdetails: initrowdetails, columns: [ { text: '', datafield: 'PriorityImagePath', width: '2%', cellsrenderer: imagerenderer }, { text: vIDTitle, dataField: 'CAPAID', width: '6%', cellsalign: 'left', align: 'left' }, { text: vDescriptionTitle, dataField: 'ShortCADesc', width: '32%', cellsalign: 'left', align: 'left' }, { text: vDateAddedTitle, dataField: 'DateAdded', filtertype: 'date', width: '12%', cellsalign: 'right', cellsformat: 'd' }, { text: vDueDateTitle, dataField: 'DueDate', filtertype: 'date', width:'12%', cellsalign: 'right', cellsformat: 'd' }, { text: vResponsibleTitle, dataField: 'RespPersonShortName', width: '12%', cellsalign: 'left', align: 'left' }, { text: vModuleTitle, dataField: 'CAModule', filtertype: 'list', filteritems: [vInspection, vIncident, vHazard, vMOC, vRRS, vNCMR, vDiscrete], width: '10%', cellsalign: 'left', align: 'left' }, { text: vSiteTitle, dataField: 'SiteDesc', width: '14%', cellsalign: 'left', align: 'left' }, { text: '', dataField: 'Priority', width: '0%', cellsalign: 'left', align: 'left',hidden:true}, { text: '', dataField: 'CAPADesc', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'ExtraCADescLine', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'IDTitleTrans', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'LocationTitleTrans', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'ModuleDateTitleTrans', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'ModuleItemTitleTrans', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'ModuleItemNumberStr', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'LocationDesc', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'ModuleItem', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'FModuleItemDate', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'ModuleItem2NumberStr', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'ModuleItem2', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'IsAdmin', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'AddedByEmpID', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'AddedByEmpName', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'RespPersonEID', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'RespPersonEmail', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'RespPersonName', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'ModuleName', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'NumAffected', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'WhoAffected', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'fDateAdded', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, { text: '', dataField: 'fDueDate', width: '0%', cellsalign: 'left', align: 'left', hidden: true }, ], handlekeyboardnavigation: function (event) { rowindex = $('#jqxgrid').jqxGrid('getselectedrowindex'); key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0; //ignore jslint if (key == 46) { $('#jqxgrid').jqxGrid('deleterow', rowindex); return true; } } });
error from jqxgrid.storage.js
if (F._columns) { for (var H = 0; H < F._columns.length; H++) { if (F._columns[H].datafield == this.datafield) { if (i.hidden !== undefined) { F._columns[H]["hidden"] = i.hidden } if (i.width !== undefined) { F._columns[H]["width"] = i.width } } } }
Unable to get property ‘datafield’ of undefined or null reference
[Locals]
this [object(c)]
arguments [object (Arguments)]
I 1
i [object]
H 32
[scope] _loadselectionandcolumnwidths
G [object]
F [object (b[c])]
g false
d []
n undefined
y undefined
December 16, 2014 at 2:59 pm in reply to: Grid JS error on LoadState Grid JS error on LoadState #64262I believe I may have found the issue –
My datasource has fields that I do not have assigned to columns in the grid (because I reference them in the row details). When it hits datafield #8 which is the first w/out a column, it throws the error. I’ll try testing and putting the remaining fields in hidden columns to see if it solves the problem, but was curious if this is a known issue.
gridSource = { datatype: "json", datafields: [ { name: 'Priority', type: 'integer' }, { name: 'CAPAID', type: 'string' }, { name: 'ShortCADesc', type: 'string' }, { name: 'DueDate', type: 'date' }, { name: 'DateAdded', type: 'date' }, { name: 'RespPersonShortName', type: 'string' }, { name: 'CAModule', type: 'string' }, { name: 'SiteDesc', type: 'string' }, { name: 'PriorityImagePath', type: 'string' }, { name: 'CAPADesc', type: 'string' }, { name: 'ExtraCADescLine', type: 'string' }, { name: 'IDTitleTrans', type: 'string' }, { name: 'LocationTitleTrans', type: 'string' }, { name: 'ModuleDateTitleTrans', type: 'string' }, { name: 'ModuleItemTitleTrans', type: 'string' }, { name: 'ModuleItemNumberStr', type: 'string' }, { name: 'LocationDesc', type: 'string' }, { name: 'ModuleItem', type: 'string' }, { name: 'FModuleItemDate', type: 'string' }, { name: 'ModuleItem2NumberStr', type: 'string' }, { name: 'ModuleItem2', type: 'string' }, { name: 'IsAdmin', type: 'integer' }, { name: 'AddedByEmpID', type: 'string' }, { name: 'AddedByEmpName', type: 'string' }, { name: 'RespPersonEID', type: 'string' }, { name: 'RespPersonEmail', type: 'string' }, { name: 'RespPersonName', type: 'string' }, { name: 'ModuleName', type: 'string' }, { name: 'NumAffected', type: 'string' }, { name: 'WhoAffected', type: 'string' }, { name: 'fDateAdded', type: 'string' }, { name: 'fDueDate', type: 'string' } ], cache: false, id: 'CAPAID', url: url, async: false };
$("#jqxgrid").jqxGrid({ theme: 'OriasBlue', width: '100%', height: 550, source: gridDataAdapter, sortable: true, pageable: true, autoheight: true, columnsresize: true, pagesize: 20, pagesizeoptions: ['10', '20', '30','50','100','250','500','1000'], pagermode: 'default', localization: getLocalization(), showfilterrow: true, filterable: true, altrows: true, editable: false, enablekeyboarddelete: false, showrowdetailscolumn: true, selectionmode: 'singlerow', rowdetails: true, autoloadstate: false, autosavestate: false, rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li class='capaNotesTitle'></li></ul><div class='capaDetails'></div><div class='capaNotes'></div></div>", rowdetailsheight: 350 }, initrowdetails: initrowdetails, columns: [ { text: '', datafield: 'PriorityImagePath', width: '2%', cellsrenderer: imagerenderer }, { text: vIDTitle, dataField: 'CAPAID', width: '6%', cellsalign: 'left', align: 'left' }, { text: vDescriptionTitle, dataField: 'ShortCADesc', width: '32%', cellsalign: 'left', align: 'left' }, { text: vDateAddedTitle, dataField: 'DateAdded', filtertype: 'date', width: '12%', cellsalign: 'right', cellsformat: 'd' }, { text: vDueDateTitle, dataField: 'DueDate', filtertype: 'date', width:'12%', cellsalign: 'right', cellsformat: 'd' }, { text: vResponsibleTitle, dataField: 'RespPersonShortName', width: '12%', cellsalign: 'left', align: 'left' }, { text: vModuleTitle, dataField: 'CAModule', filtertype: 'list', filteritems: [vInspection, vIncident, vHazard, vMOC, vRRS, vNCMR, vDiscrete], width: '10%', cellsalign: 'left', align: 'left' }, { text: vSiteTitle, dataField: 'SiteDesc', width: '14%', cellsalign: 'left', align: 'left' }, ], handlekeyboardnavigation: function (event) { rowindex = $('#jqxgrid').jqxGrid('getselectedrowindex'); key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0; //ignore jslint if (key == 46) { $('#jqxgrid').jqxGrid('deleterow', rowindex); return true; } } });
December 15, 2014 at 9:47 pm in reply to: Grid JS error on LoadState Grid JS error on LoadState #64223In case it is of any help …
ran again – error thrown here:
if(F._columns[H].datafield==this.datafieldWith this info:
> Anonymous function [jqxgrid.storage.js] Line 7 Script
each [jquery-1.11.1.min.js] Line 2 Script
_loadselectionandcolumnwidths [jqxgrid.storage.js] Line 7 Script
loadstate [jqxgrid.storage.js] Line 7 Script
a.jqx.invoke [jqxcore.js] Line 7 Script
a.jqx.jqxWidgetProxy [jqxcore.js] Line 7 Script
Anonymous function [jqxcore.js] Line 7 Script
each [jquery-1.11.1.min.js] Line 2 Script
m.prototype.each [jquery-1.11.1.min.js] Line 2 Script
a.fn[g] [jqxcore.js] Line 7 Script
Anonymous function [ca_sitemain_open.js] Line 430 Script
m.event.dispatch [jquery-1.11.1.min.js] Line 3 Script
r.handle [jquery-1.11.1.min.js] Line 3 ScriptUnhandled exception at line 7, column 3989 in http://localhost/orias/javascript/jQWidgets_v3_5/jqxgrid.storage.js
0x800a138f – JavaScript runtime error: Unable to get property ‘datafield’ of undefined or null reference
The thread ‘Win32 Thread’ (0x2ef0) has exited with code 0 (0x0).December 15, 2014 at 9:13 pm in reply to: Grid JS error on LoadState Grid JS error on LoadState #64222I’ve also tried changing to
<script type=”text/javascript” src=”javascript/jquery-1.11.1.min.js”></script>
/jQWidgets_v3_5/and still have the same issue.
-
AuthorPosts