jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Trying to fit loadstate and savestate in my code
Tagged: #jqwidgets-grid, grid, javascript grid, jquery grid
This topic contains 7 replies, has 2 voices, and was last updated by Hristo 7 years, 11 months ago.
-
Author
-
I was going through this example mentioned in the link below by Dimitar which shows how to automatically save the grid state before the window goes to another page and load it when the grid has initialized. I would like to know whether I am applying the same logic correctly in my scenario below where I have an on click even attached. I tried in the following manner (as shown in the code below) but it didn’t work for me when I clicked on the back button in a hope to see
the same state from where I clicked.http://www.jqwidgets.com/community/topic/action-back-i-lose-the-paging/
// Initialize the JQX grid object. self.grid = $_("myGRID").jqxGrid({ altrows: true, autoshowloadelement: true, showemptyrow: false, pageable: true, pagesizeoptions:['25','50','100','150'], pagesize: 50, autoheight: true, theme: 'classic', columnsresize: true, columns: [ { text: 'Name', datafield: 'full_name', filterable: false, width: 200 }, { text: 'ID', datafield: 'id', filterable: false, width: 100 }, { text: 'First Reviewed', datafield: 'firstReviewDate', filterable: false }, { text: 'Last review', datafield: 'last_review_date', filterable: false }, ], ready: function(){ $("myGRID").jqxGrid('loadstate'); }, selectionmode: 'multiplecells', showdefaultloadelement: true, sortable: true, source: dataAdapter, width: 1130 }); window.onbeforeunload = function (e){ $("myGRID").jqxGrid('savestate'); }; // Handle cell selection $_("myGRID").on('cellselect', function (event_) { var state = null; var tabbedGridSelector = "myGRID"; // Get the data from the selected row. var rowIndex = event_.args.rowindex; var rowData = $_("myGRID").jqxGrid('getrowdata', rowIndex); var id = rowData["id"]; var patient_name = rowData["full_name"]; var selectedField = event_.args.datafield; // My code logic to go on to next page in a Single Page application which I haven't included here }); };
Hello walker1234,
I would suggest you to review the topic that you mentioned:
http://www.jqwidgets.com/community/topic/action-back-i-lose-the-paging/
You could find out there how could save all data in one object or to use received data fromsavestate
method of the Grid.
After that you could used this to load or create a new one from this object, that you could save before that in global variable.Also, I would say you use jQuery (“$” it looks that and some other library or some customization “$_”) and this could produce bugs. On some places the selector looks wrong ‘$(“myGRID”).jqxGrid();’ – it needs to be
$("#myGRID").jqxGrid();
I would suggest you an approach. Please, take a look at the example below:// It should be global variable var options = { pageable: true, pagesizeoptions:['25','50','100','150'], pagesize: 50, columnsresize: true, columns: [ { text: 'Name', datafield: 'full_name', filterable: false, width: 200 }, { ... } ], ready: function(){ }, selectionmode: 'multiplecells', showdefaultloadelement: true, sortable: true, source: dataAdapter, width: 1130 }; $(document).ready(function () { $('#myGRID').jqxGrid(options); $('#myGRID').on('cellselect', function () { // Load default settings $('#myGRID').jqxGrid(options); }); });
Also, I would like to suggest you look at the example below, it is part of our “Showcase” demo section:
http://www.jqwidgets.com/jquery-widgets-demo/demos/interactivedemos/businessdashboard
It could be helpful for your interest to create a “Single Page Application”.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHi Histrov,
Thanks for your response. I was following your suggestion and used the
options
variable as you mentioned.I was wondering if the following place is the correct place to put the
windows.onbeforeunload
that was mentioned in the previous example I mentioned above which I think you forgot to mention in your suggestion if I am correct?I tried the following but that didn’t work for me while using browser back button or manual back button in the second page. I am wondering if I am doing something wrong?
$(document).ready(function () { $('#myGRID').jqxGrid(options); $('#myGRID').on('cellselect', function () { // Load default settings $('#myGRID').jqxGrid(options); window.onbeforeunload = function (e){ $('#myGRID').jqxGrid('savestate'); }; }); });
Thanks
Hello walker1234,
About
windows.onbeforeunload
– unfortunately, we do not have such example, but you could try to use it.
I would like to say that to include one event into another is not an appropriate approach.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHi Histro,
I see. Could you tell me if the following approach looks good then:
1) Saving the state in a
state
variable insideonclick
handler.2) Loading the state in the
ready
function which is defined insideoptions
variable.I am using a
back
button to come back to this page after onclick handler event, something like thisjavascript:history.back()
in the anchor tag. So, do I need to bind thisstate
variable with something or just clickingback
link which is taking me to the previous page would load the saved state?// It should be global variable var options = { pageable: true, pagesizeoptions:['25','50','100','150'], pagesize: 50, columnsresize: true, columns: [ { text: 'Name', datafield: 'full_name', filterable: false, width: 200 }, { ... } ], ready: function(){ $('#myGRID').jqxGrid('loadstate'); }, selectionmode: 'multiplecells', showdefaultloadelement: true, sortable: true, source: dataAdapter, width: 1130 }; $(document).ready(function () { $('#myGRID').jqxGrid(options); $('#myGRID').on('cellselect', function () { var state = null; // Load default settings $('#myGRID').jqxGrid(options); state = $('#myGRID').jqxGrid('savestate'); }); });
Thanks
Hello walker1234,
Your approach does not look correct. It is not possible to load something that does not exist in that moment. Also, the ‘loadstate’ method need an aditional argument – “state”.
You could use your server to communicate when loading another part from your project (another page) and set the settings of the Grid then.1. Click on some reference -> save state (it should stay in global variable) 2. Click 'Back' (and will invoke the page with the Grid again) then load state (or set "options" that you create in the beginning)
If your case looks like this I recommend you to use our jqxRibbon or jqxTabs. Please, take a look these few demos below, they do not need to save the state of the Grid:
http://www.jqwidgets.com/jquery-widgets-demo/demos/interactivedemos/ticketingsystem/
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxribbon/javascript-ribbon-integration.htm?light
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/defaultfunctionality.htm?light
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/bootstrap/jqwidgets-bootstrap-app.htmBest Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comI would like to explain little bit more which might help me in explaining my issue. The following piece of code (
//FIRST CODE) in my Single page application is the one which is executed first. I have three tabs defined
A,B,C` and when a user clicks on a particular tab, grid with different records on the tab is displayed.As seen below, there is a default tab defined by this line
this.defaultTab = "tab_a";
in the code below. When a row in the grid is clicked,
the function in theSECOND CODE
gets executed where I am doing all thesavestate
andloadstate
logic.In the “SECOND CODE” below, as mentioned by you before, I have defined
state
parameter forloadstate
method inside the ready function and also definedstate
variable as a global variable.Many of the code I have ommited to show the relavent code only.
1) Could you tell me if it’s the default tab functionality which is set to tab 1 that is not allowing the saved state to load when I click on browser back button or a back button?
2) When you say
Click 'Back' (and will invoke the page with the Grid again) then load state (or set "options" that you create in the beginning)
,
it will be like moving fromSECOND CODE
toFIRST CODE
. Do you thin in my scenario, it would be possible to load the state in theFirst Code
?<strong>//FIRST CODE</strong>
jQuery(window).trigger(jQuery.mywebapp.app.events.builder_initializing, (function ($_, app_) { // The WebApp home page builder return new function () { var self = this; this.defaultTab = "tab_a"; // This object's key this.key = "webapp_home_page"; this.tabsInfo = [ { index: "TAB_A", key: "tab_a" }, { index: "TAB_B", key: "tab_b" }, { index: "tab_c", key: "tab_c" } ]; this.tabbedDataGrids = null; this.urlKey = "getwebservicedata"; // Initialize the virtual page this.initialize = function () { self.tabbedDataGrids = {}; // Setup the data grids $_.each(self.tabsInfo, function (index_, tabInfo_) { // Initialize the tabbed data grid and maintain it in a collection. self.tabbedDataGrids[tabInfo_.key] = new TabbedDataGrid($_, tabInfo_.key, tabInfo_.index, self.urlKey); }); // Load the default tab var defaultDataGrid = self.tabbedDataGrids[self.defaultTab]; $_(defaultDataGrid.tabSelector).trigger("click"); }; }; })(jQuery, jQuery.mywebapp.app));
<strong>//SECOND CODE</strong>
function TabbedDataGrid($_, key_, tabIndex_, urlKey_) { var self = this; this.key = null; // The JQX grid object this.grid = null; // The jQuery selector for the grid. this.gridSelector = null; // The jQuery selector for the tab's panel. this.panelSelector = null; // The source will contain data retrieved by an AJAX web service. this.source = { localdata: new Array(), datatype: "array" }; this.tabIndex = null; // The jQuery selector for the tab. this.tabSelector = null; // The URL key (provided as a parameter) used to lookup the URL of an AJAX web service. this.urlKey = null; // STATE VARIABLe GLOBALLY DEFINED var state = null; this.initialize = function () { // (Re)initialize the source. self.source = { localdata: new Array(), datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(self.source, { loadComplete: function(data){}, loadError: function(xhr,status,error) {}, }); //Defining global variable options var options = { pageable: true, pagesizeoptions:['25','50','100','150'], pagesize: 50, columnsresize: true, columns: [ { text: 'Name', datafield: 'full_name', filterable: false, width: 200 }, { ... } ], ready: function(){ $('#myGRID').jqxGrid('loadstate',state); }, selectionmode: 'multiplecells', showdefaultloadelement: true, sortable: true, source: dataAdapter, width: 1130 }; // Initialize the JQX grid object with the options defined as above self.grid = $(self.gridSelector).jqxGrid(options); // Handle cell selection $(self.gridSelector).on('cellselect', function (event_) { var tabbedGridSelector = self.gridSelector; state = $(self.gridSelector).jqxGrid('savestate'); console.log("SAVING STATE INSIDE TABBEDDATAGRID"); console.log(state); // Get the data from the selected row. var rowIndex = event_.args.rowindex; var rowData = $_(self.gridSelector).jqxGrid('getrowdata', rowIndex); } }); }; self.gridSelector = "#jqxgrid_" + key_; // Begin initialization self.initialize(); };
Hello walker1234,
I did not say to use ‘loadstate’ in the ready callback of the jqxGrid. I am talking about
$(document).ready
callback.
Also, that I saw you setstate
variable but it is not global you defined it in the “SECOND CODE” and it is re-initialize every time when you invoke this function.
About your second point “2)” it is not possible because this is encapsulated block.Could you give more details why you need to save state when you click on some row? What do you expect to save?
You could check the received “state” with oneconsole.log(state);
in the desired moment (before you loaded it) and will understand it is ok or not.If you want to be selected one particular cell when you back to a particular Grid I would suggest you use simple two arguments in your function – “rowIndex” and “columnfield” (
datafield
). After that, you could use selectcell method.In conclusion, I would like to say “save/load” state works fine. However that things that you do are customizations.
Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.