jQuery UI Widgets Forums Layouts Panel and Responsive Panel Scroll bar only shows after page refresh for other row clicks

This topic contains 14 replies, has 2 voices, and was last updated by  Hristo 3 years, 9 months ago.

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

  • walker1234
    Participant

    Brief Overview of my code:

    There are 3 functions below:
    1) Onclick handler : There are multiple rows in a jqxgrid and when a user clicks on a particular row, details(document Id) are captured
    2) getMyDocumentContents : This basically makes an Ajax Call to get the document content by passung document ID as the parameter
    3) displayDocument: Used to display the document

    Problem I am Facing:

    When I click on a particular row(say for example Row #1), I can see the document in the panel with the scroll bar. However, as soon as I click on other rows(say for example Row #2,Row #3), the scroll bar disappears and I can only see the document till the height of the panel. There is no way to scroll down.

    After clicking Row #1 and seeing document with scrollbar, if I refresh the page and then click on Row #2, I can see the document content with scroll bar.
    Similarly, if I refresh again and then click on Row #3, I can see the document content with the scroll bar.

    How can I view the full document content whenever I click on other rows without refreshing the page?

     $("#mydoclist").on('rowclick', function (event) {
    
                row = event.args.rowindex;
    			datarow = $("#mydoclist").jqxGrid('getrowdata', row);
    			var response = JSON.stringify(datarow, null, 10);
    			var docID  = datarow["document_id"];
    		   self.getMyDocumentContents(docID);
    
            });
    		
    		
    
     this.getMyDocumentContents = function (documentID_) {
    
                   
            var url = https://documentlookup.com:8443/getmydocuments
            var ajaxRequest = jQuery.ajax({
               
                data: {
                    doc_id: documentID_
                },
                dataType: "json",
                method: "GET",
                url: url
            })
    
    		.done(function (data_, textStatus_, jqXHR_) {
               self.displayDocument(data_.myDocList);
    			})
                .fail(function (jqXHR_, textStatus_, errorThrown_) {
                    alert("Error in getMyDocumentContents(): " + errorThrown_);
                    return false;
                });
    		};	
    
     this.displayDocument = function (information_) {
    
            
    
            var source = {
                localdata: information_,
                datafields: [{
                    name: 'doc_content',
                    type: 'string'
                }],
                datatype: "array"
    		};
    
            var dataAdapter = new $.jqx.dataAdapter(source, {
    
                loadComplete: function (records) {
                var html;
                //Get data
                var records = dataAdapter.records;
                var length = records.length;
                html = "<div style='margin: 10px;'><pre>" + records[0].doc_content + "</pre></div>";
               
                $("#myDocPanel").html(html);
                },
                loadError: function (xhr, status, error) { },
                beforeLoadComplete: function (records) {
    			}
            });
            // perform data binding
            dataAdapter.dataBind();
    
           var panel = $("#myDocPanel");
           var content = panel.html();
    
           
            panel.jqxPanel({
                width: '750',
                height: '500',
                scrollBarSize: 20
            });
    
            
    
        }; 

    Hristo
    Participant

    Hello walker1234,

    The size of the jqxPanel is the same as the first time you ‘init’ (width: '750', height: '500').
    It looks the content is changed by your function and different has different size and this determines the appearance of the scrollbar.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    walker1234
    Participant

    Hello Histro,

    I can understand that the scroll bar presence is determined by the size of the content. You are right, size of the jqxPanel is same. However, I can only see the scroll bar for the very first time I click on a particular row and after that if I try to click on any other row to view another document content, I can only see the content till the size of the jqxPanel. So the rest of the document content is not visible to me with no scroll bar.

    Thanks


    Hristo
    Participant

    Hello walker1234,

    Could you try with this approach?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    walker1234
    Participant

    Hi Histro,

    As I can see in the approach you mentioned, I believe you are focusing on the following lines of code which is not making the scrollbar disappear? :

    `$(‘#jqxPanel’).jqxPanel(‘clearcontent’);
    $(“#jqxPanel”).jqxPanel(‘append’, html);`

    Please correct me if I am wrong.

    So, in my code, I believe I would have to make some adjustments on the following line of code?

    $("#myDocPanel").html(html);

    Because I tried doing the following and it was just printing the append word:

    `$(“#myDocPanel”).html(‘clearcontent’);
    $(“#myDocPanel”).html(‘append’,html);`

    • This reply was modified 3 years, 10 months ago by  walker1234.

    Hristo
    Participant

    Hello walker1234,

    I recommend you to use the widget API.
    About mentioned case that print ‘append’ word is because use ‘$(“#myDocPanel”).html(‘append’, html);’ instead of $("#myDocPanel").jqxPanel('append', html);
    I am not sure to understand you on the right way.
    You do not want the “scrollbar”. In this case need to set content that fit jqxPanel or to set suitable width and height.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    walker1234
    Participant

    Hi Histro,

    I have some questions based on your reply:

    I recommend you to use the widget API.

    Am I not using the widget API in my code above or are you referring to something else?

    About mentioned case that print ‘append’ word is because use ‘$(“#myDocPanel”).html(‘append’, html);’ instead of $(“#myDocPanel”).jqxPanel(‘append’, html);

    I tried using the following two lines of code $("#myDocPanel").html(clearcontent); and $("#myDocPanel").jqxPanel('append',html);,however, it ended up printingclearcontent in the panel this time.

    I am not sure to understand you on the right way.

    I want the scroll bar as I mentioned above in my problem description. Please let me know if something is not clear as far as my question is concerned.

    Thanks

    • This reply was modified 3 years, 10 months ago by  walker1234.
    • This reply was modified 3 years, 10 months ago by  walker1234.

    Hristo
    Participant

    Hello walker1234,

    As I mentioned before you could use this approach.
    You should create the jqxPanel just once with the desired size. After this, you could reload data.
    And depends on the data that you try to set in the container jqxPanel will have vertical, horizontal or both scrollbars.
    $('#myDocPanel').jqxPanel('clearcontent'); – this will clear the content. Otherwise, will when you set new data this will be stacked.
    $("#myDocPanel").jqxPanel('append', html); – with this row set new data in the container.
    Hope this helps.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    walker1234
    Participant

    Hi Histro,

    As we discussed above, trying following lines of code didn’t make any difference for me at my end:

    $("#myDocPanel").html(html);
    $("#myDocPanel").jqxPanel('clearcontent');
    $("#myDocPanel").jqxPanel('append',html);

    Hence, as you mentioned above in your approach that I should be declaring the jqxPanel only once and then test how it goes. Here is what I saw after testing:
    1) The blank jQXPanel was initialized before even user clicks on any of the row of a mydoclistjqxGrid. And upon clicking on the rows, the scroll bar didn’t show up for any of the documents at all. Here is just my javascript code to show what exactly I did. As you can see, I have initialized the jQXPanel just above the click handler inside documentListProcessing function. I am pasting my whole code here as well just in case its more convenient for you :

     this.documentListProcessing = function (collection_) {
    				var source = {
    					localdata: collection_,
    					datatype: "array"
    				};
    				var dataAdapter = new $.jqx.dataAdapter(source, {
    					loadComplete: function (data) { },
    					loadError: function (xhr, status, error) { }
    				});
           
    				$("#mydoclist").jqxGrid({
    					source: dataAdapter,
    					width: '1000',
    					height: 150,
    					pageable: true,
    					columns: [{
    						text: 'Type',
    						datafield: 'type'
    						
    					}, {
    						text: 'OtherType',
    						datafield: 'othertype'
    						
    					},  {
    						text: 'Date',
    						datafield: 'doc_date'
    					
    					 }
    
    					]
    				});
    				
    				 var panel = $("#myDocPanel");
    				 var content = panel.html();
    
           
    				panel.jqxPanel({
    					width: '750',
    					height: '500',
    					scrollBarSize: 20
    				});
    
    				$("#mydoclist").on('rowclick', function (event) {
    					row = event.args.rowindex;
    					datarow = $("#mydoclist").jqxGrid('getrowdata', row);
    					var response = JSON.stringify(datarow, null, 10);
    					var docID  = datarow["document_id"];
    				   self.getMyDocumentContents(docID);
    
    				});
    
          };
    
    this.getMyDocumentContents = function (documentID_) {
    
                   
            var url = https://documentlookup.com:8443/getmydocuments
            var ajaxRequest = jQuery.ajax({
               data: {
                    doc_id: documentID_
                },
                dataType: "json",
                method: "GET",
                url: url
            })
    
    	   .done(function (data_, textStatus_, jqXHR_) {
               self.displayDocument(data_.myDocList);
    	})
                
    	};	
    
     this.displayDocument = function (information_) {
    
            var source = {
                localdata: information_,
                datafields: [{
                    name: 'doc_content',
                    type: 'string'
                }],
                datatype: "array"
    		};
    
            var dataAdapter = new $.jqx.dataAdapter(source, {
    
                loadComplete: function (records) {
                var html;
                //Get data
                var records = dataAdapter.records;
                var length = records.length;
                html = "<div style='margin: 10px;'><pre>" + records[0].doc_content + "</pre></div>";
               
                $("#myDocPanel").html(html);
    	    $("#myDocPanel").jqxPanel('clearcontent'); // Adding this line didn't make any difference
                $("#myDocPanel").jqxPanel('append',html);// Adding this line didn't make any difference
                },
                loadError: function (xhr, status, error) { },
                beforeLoadComplete: function (records) {
    			}
            });
            // perform data binding
            dataAdapter.dataBind();
    
           // var panel = $("#myDocPanel");
           // var content = panel.html();
    
           
            // panel.jqxPanel({
                // width: '750',
                // height: '500',
                // scrollBarSize: 20
            // });
    
            
    
        }; 
    
    • This reply was modified 3 years, 9 months ago by  walker1234.
    • This reply was modified 3 years, 9 months ago by  walker1234.

    walker1234
    Participant

    Can anyone answer my question above?


    Hristo
    Participant

    Hello walker1234,

    You should use $("#myDocPanel").jqxPanel('append',html); instead of ‘$(“#myDocPanel”).html(html);’ (remove this).
    (no need to use it – .html(html) is jQuery method and in this case just use our API – “append” method).
    If everything else from your code is ok just try to use this code (with a small change in row 95).

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    walker1234
    Participant

    Thanks Histro. Finally I see it working but I am noticing one more strange thing. Suppose there are 4 rows and each rows have documents associated with each of them.

    1) When I click on first row, I see blank in the jQXPanel
    2) when I click on 2nd, 3rd and 4th row, I can see the document content with the scrollbars.
    3) When I click on 1st row again, I can see the document this time in the jqxPanel.

    Basically, for the first time (irrespective of any row number), I had to click it two times to see the document content.


    Hristo
    Participant

    Hello walker1234,

    I am not sure I understand what you mean.
    Could you provide an example and more details?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    walker1234
    Participant

    Hi Histro,

    I will try to explain in a simple manner. Let me know if it’s still unclear, I will try to work on replicating the same problem in fiddle.

    Here is the problem:

    For the first time when I click on any row(say for example 1st row), the jqxPanel contents are empty. I have to click on the same row again and then only I can see the document contents.

    This only happens for the first time, after this, it doesn’t matter if I click on any other rows, I can see the document content in one click.

    Thanks


    Hristo
    Participant

    Hello walker1234,

    If I understand you correctly – when you click on (particular row) the Grid this should fill the jqxPanel.
    But first time when you click on the concrete row nothing happens and need to click again.
    Please, take a look at this example:
    https://www.jseditor.io/?key=grid-and-panel

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.