jQWidgets Forums

jQuery UI Widgets Forums Grid Trying to fit loadstate and savestate in my code

This topic contains 7 replies, has 2 voices, and was last updated by  Hristo 7 years, 11 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • walker1234
    Participant

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

    Hristo
    Participant

    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 from savestate 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 Hristov

    jQWidgets team
    http://www.jqwidgets.com


    walker1234
    Participant

    Hi 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


    Hristo
    Participant

    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 Hristov

    jQWidgets team
    http://www.jqwidgets.com


    walker1234
    Participant

    Hi Histro,

    I see. Could you tell me if the following approach looks good then:

    1) Saving the state in a state variable inside onclick handler.

    2) Loading the state in the ready function which is defined inside options variable.

    I am using a back button to come back to this page after onclick handler event, something like this javascript:history.back() in the anchor tag. So, do I need to bind this state variable with something or just clicking back 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


    Hristo
    Participant

    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.htm

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    walker1234
    Participant

    I 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 definedA,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 the SECOND CODE gets executed where I am doing all the savestate and loadstate logic.

    In the “SECOND CODE” below, as mentioned by you before, I have defined state parameter for loadstate method inside the ready function and also defined state 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 from SECOND CODE to FIRST CODE. Do you thin in my scenario, it would be possible to load the state in the First 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();
    };

    Hristo
    Participant

    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 set state 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 one console.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 Hristov

    jQWidgets team
    http://www.jqwidgets.com

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.