jQuery UI Widgets Forums Grid SQL connection with scroll bar

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • 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

    • This topic was modified 3 weeks ago by  Serdar.
    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/

    SQL connection with scroll bar #134980

    Serdar
    Participant

    thank you so much

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

You must be logged in to reply to this topic.