jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Grid – VirtualMode=true not refreshing

Tagged: ,

This topic contains 4 replies, has 2 voices, and was last updated by  Peter Stoev 12 years, 11 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Grid – VirtualMode=true not refreshing Posts
  • June 15, 2012 at 4:17 pm Grid – VirtualMode=true not refreshing #4984

    fmcorreia
    Member

    Hi,

    I’m using the grid with VirtualMode=On and i have set the rendergridrows function.

    But the grid is rendered before my source is loaded (i retrieve it from server).

    When I set the grid source I also invoke all this methods:

    $(‘#grid’).jqxGrid(‘refreshdata’);
    $(‘#grid’).jqxGrid(‘updatebounddata’);
    $(‘#grid’).jqxGrid(‘refresh’);
    $(‘#grid’).jqxGrid(‘render’);

    But not of this invoke my rendergridrows function.

    What am I missing??

    Best Regards,

    Francisco Correia

    June 17, 2012 at 3:43 pm Grid – VirtualMode=true not refreshing #4999

    Peter Stoev
    Keymaster

    Hi Francisco,

    Could you provide more information about the code that you use for setting up the Grid in virtual mode?

    I have a simple test sample of a Grid in virtual mode. When the button is clicked an alert box defined in the ‘rendergridrows’ is displayed.

    <!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.7.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/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>	
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>	
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var theme = 'classic';
            
                var source =
                {
                     datatype: "json",
                     datafields: [
    					 { name: 'CompanyName'},
    					 { name: 'ContactName'},
    					 { name: 'ContactTitle'},
    					 { name: 'Address'},
    					 { name: 'City'},
    					 { name: 'Country'}
                    ],
    			    url: 'data.php',
    				root: 'Rows',
    				beforeprocessing: function(data)
    				{		
    					source.totalrecords = data[0].TotalRows;
    				}
                };		
    			
    		    var dataadapter = new $.jqx.dataAdapter(source);
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 600,
    			    source: dataadapter,
                    theme: theme,
    			    autoheight: true,
    				pageable: true,
    				virtualmode: true,
    				rendergridrows: function()
    				{
    				alert('test');
    					  return dataadapter.records;     
    				},
                    columns: [
                          { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                          { text: 'Contact Name', datafield: 'ContactName', width: 200 },
                          { text: 'Contact Title', datafield: 'ContactTitle', width: 200 },
                          { text: 'Address', datafield: 'Address', width: 180 },
                          { text: 'City', datafield: 'City', width: 100 },
                          { text: 'Country', datafield: 'Country', width: 140 }
                      ]
                });
    			$("#Button").click(function()
    			{
    				$("#jqxgrid").jqxGrid('updatebounddata');
    			});
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'">
            <div id="jqxgrid"></div>
    		<input type="button" value="Button" id="Button"/>
       </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    June 18, 2012 at 10:21 am Grid – VirtualMode=true not refreshing #5028

    fmcorreia
    Member

    Hi,

    I figured out that my problem was with a cellsrenderer, that fails only when in virtual mode (don’t ask me why 🙁 ), and after the event was unable to fire.

    Now it works fine 😀

    Thanks!

    Best Regards,

    Francisco Correia

    June 18, 2012 at 1:45 pm Grid – VirtualMode=true not refreshing #5053

    fmcorreia
    Member

    Hi,

    I think that there is a problem with the virtual mode.

    If I get 20 results and scroll down to the bottom, after that I click my button to get more records and set the source of the grid now with 30 results, when i scroll up, all my data disappear. (it also fail to trigger my rendergridrows)

    If you try to do this you’ll see the problem.

    June 18, 2012 at 1:51 pm Grid – VirtualMode=true not refreshing #5055

    Peter Stoev
    Keymaster

    Take a look at this topic which illustrates how to dynamically change the totalrecords property. http://www.jqwidgets.com/community/topic/jqxgrid-with-large-dataajax/

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.