jQWidgets Forums

Tagged: grid, grid to json, gridview, gridview virtual mode, javascript grid, jquery grid

This topic contains 7 replies, has 5 voices, and was last updated by rtessler 9 years, 7 months ago.

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

Author

Virtual Scrolling with JSON data Posts

February 27, 2012 at 12:39 pm Virtual Scrolling with JSON data #2453

Member

I hold contests for my students and I use your widgets to allow them to view the scoreboard online. Their whole data is stored on a mysql database and I’m using JSON to retrieve the necessary data for the view.

My table is now 80 rows * 40 columns which makes it a little heavy to be viewed. I was wondering what are the modifications that I need to make on your virtual scrolling demo in order to make it work with JSON data.

February 27, 2012 at 1:08 pm Virtual Scrolling with JSON data #2454

ma7ashish

Member

Also, it seems that I can’t enable the dragging of the scroll bars even in simple and sparse grids. And I have to click a lot on the left/right arrows.

February 27, 2012 at 1:09 pm Virtual Scrolling with JSON data #2455

Peter Stoev

Keymaster

Hi ma7ashish,

In order to use the jqxGrid in virtual data mode, you need to set its virtualmode property to true. Then the Grid will render the records returned from the rendergridrows callback function.

The following example code is a modification of our Binding to JSON demo and the Grid is in virtual mode.


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from JSON data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.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.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var url = "../sampledata/beverages.txt";
            var parentsLength = $("#jqxWidget").parents().length;
            if (parentsLength > 3) {
                url = 'demos/sampledata/beverages.txt';
            }
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name' },
                    { name: 'type' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat' },
                    { name: 'protein' },
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true });
            var records = dataAdapter.records;
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                virtualmode: true,
                rendergridrows: function (params) {
                    var start = params.startindex;
                    var end = params.endindex;
                    var array = new Array();
                    for (i = start; i < end; i++) {
                        array[i] = records[i];
                    }
                    return array;
                },
                columns: [
                  { text: 'Name', datafield: 'name', width: 250 },
                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                  { text: 'Calories', datafield: 'calories', width: 180 },
                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                  { text: 'Protein', datafield: 'protein', minwidth: 120 }
              ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

However, as you have a Grid with 40 columns, I suggest you to consider using the jqxGrid in Paging mode.

Best Regards,
Peter Stoev

jQWidgets Team

February 27, 2012 at 1:15 pm Virtual Scrolling with JSON data #2457

Peter Stoev

Keymaster

Regarding the second post:

– Also, it seems that I can’t enable the dragging of the scroll bars even in simple and sparse grids. And I have to click a lot on the left/right arrows.

– Can you post the Grid configuration code or send us the sample to support@jqwidgets.com ? This will help me to reproduce the reported behavior.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 4, 2014 at 10:20 am Virtual Scrolling with JSON data #57988

jrppl

Participant

Hi, I’m using jqxgrid with grouping and grouping renderer on a large set of data, and I notice that it has low performance while scrolling. I’m interested to use the vitual mode with json data, so I tried to use your examples with json and virtual mode, but I’m getting the error “Error: jqxGrid: “grouping” in “virtualmode” without paging is not supported!”. I dont want to use pagging on my grid, all I need is to use the virtual mode to get better performance on scrolling and stick with grouping. What should I do? I already disabled the animations, updated the library of jqwidgets but it stills lagging on scroll…

Thank you in advance,

John

August 4, 2014 at 7:10 pm Virtual Scrolling with JSON data #58001

Peter Stoev

Keymaster

Hi John,

Grouping in Virtual Scrolling mode is not supported. I am sorry, but we cannot do anything about changing this.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 22, 2015 at 8:22 pm Virtual Scrolling with JSON data #72854

alexbible

Participant

Hi, I’m advancing in my understanding of these great widgets.

So far, I’ve accomplished this:
http://talmidimedition.x40x.net/_jQwidgets/mobiledemos/jqxgrid/_grid.htm?(blackberry)&=fullscreen

But the virtual scrolling is not working for me
Here’s what I’m trying:
http://talmidimedition.x40x.net/_jQwidgets/mobiledemos/jqxgrid/_grid_virtual_scrolling.htm?(blackberry)&=fullscreen

Also, for some reason, I can’t get it to render in fullscreen mode, and the filtering and sorting are no longer working as before.

Thank you!
Alex

August 19, 2015 at 1:19 am Virtual Scrolling with JSON data #74945

rtessler

Participant

in your virtualmode example http://jsfiddle.net/jqwidgets/j8JUh/
if pageable is set to false it stops working
i wanted to scroll vertically through the data rather than use a pager

Author

Posts

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

You must be logged in to reply to this topic.