SQL connection with scroll bar - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 2 replies, has 2 voices, and was last updated by Serdar 8 months, 3 weeks ago.

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

Author

SQL connection with scroll bar Posts

June 28, 2024 at 6:58 am SQL connection with scroll bar #134960

Serdar

Participant

Hi, I have a jqxgrid table with scrollbar enabled. How can I run a SQL query to the server after 50 rows during scrolling and get the next 50 rows, ie how can I run the ajax method. I saw the virtual scroll bar but I don’t understand what it is for, is it for sql connection? Can you please give an example. thanks

June 28, 2024 at 1:43 pm SQL connection with scroll bar #134975

admin

Keymaster

Hi Serdar.

Here’s a sample which you can use to achieve this:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> 
	<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>	
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>	
	<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>		
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>	
	<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>	
	<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>		
	<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>	
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var theme = 'classic';
      
            var source =
            {
                 datatype: "json",
                 datafields: [
					 { name: 'ShippedDate', type: 'date'},
					 { name: 'ShipName', type: 'string'},
					 { name: 'ShipAddress', type: 'string'},
					 { name: 'ShipCity', type: 'string'},
					 { name: 'ShipCountry', type: 'string'}
                ],
			    url: 'data.php',
				cache: false,
				filter: function()
				{
					// update the grid and send a request to the server.
					$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
				},
				sort: function()
				{
					// update the grid and send a request to the server.
					$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
				},
				root: 'Rows',
				beforeprocessing: function(data)
				{		
					source.totalrecords = data[0].TotalRows;					
				}
            };		
		    var dataadapter = new $.jqx.dataAdapter(source, {
					loadError: function(xhr, status, error)
					{
						alert(error);
					}
				}
			);
	
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {		
                source: dataadapter,
                theme: theme,
				filterable: true,
				sortable: true,
				virtualmode: true,
				showfilterrow: true,
				rendergridrows: function(obj)
				{
					  return obj.data;     
				},
			    columns: [
                      { text: 'Shipped Date', datafield: 'ShippedDate', cellsformat: 'yyyy-MM-dd', width: 200 },
                      { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                      { text: 'Address', datafield: 'ShipAddress', width: 180 },
                      { text: 'City', datafield: 'ShipCity', width: 100 },
                      { text: 'Country', datafield: 'ShipCountry', width: 140 }
                  ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

hope this helps.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

June 28, 2024 at 5:15 pm SQL connection with scroll bar #134980

Serdar

Participant

thank you so much

Author

Posts

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

You must be logged in to reply to this topic.