jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by oneeyeman 11 years, 5 months ago.

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

Author

Blank page when using jqxGrid + django Posts

January 9, 2014 at 10:43 am Blank page when using jqxGrid + django #47617

Participant

Hi, ALL,
This is my first post here, so please bear with me.
I am trying to use jqxGrid with Django and mySQL to present the data in the nice tabular form.
I made a project and application in Django, it connects to the mySQL DB and retrieves data. But now I’m trying to connect it to jqxGrid and it does not work.
Here is what I have:

In Django (views.py):


def displayusbtable(request):
    usb_list = USB.objects.all()
    return render_to_response('html/index.html', {"usb_data": usb_list} )

In html/index.html:


<html>
<head>
<title>Test</title>
{% load staticfiles %}
<script type="text/javascript" src="{% static "jquery-1.10.2.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxcore.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxdata.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxscrollbar.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.sort.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.filter.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.aggregates.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.selection.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.pager.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.grouping.js" %}"></script>
<script type="text/javascript">
    var data = "{{usb_data}}";
    $(document).ready(function(){
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'device_name', type: 'string' },
                { name: 'vid_pid', type: 'string' },
                { name: 'install', type: 'string' },
                { name: 'disk_device', type: 'string' },
                { name: 'volume_device', type: 'string' },
                { name: 'usb_type', type: 'string' },
                { name: 'vid', type: 'string' },
                { name: 'pid', type: 'string' },
                { name: 'hub', type: 'number' }
            ]
        };
        var dataAdapter = new $.jqx.dataAdapter(source)
        //initialize jqxGrid
        $("#grid").jqxGrid(
        {
            source: dataAdapter,
            showstatusbar: true,
            editable: false,
            columns:
            [
                { text: 'Device Name', columntype: 'textbox', datafield: 'device_name', width: 100 },
                { text: 'VID/PID', columntype: 'textbox', datafield: 'vid_pid', width: 50 },
                { text: 'Install', columntype: 'textbox', datafield: 'install', width: 50 },
                { text: 'Disk Device', columntype: 'textbox', datafield: 'disk_device', width: 50 },
                { text: 'Volume Device', columntype: 'textbox', datafield: 'volume_device', width: 50 },
                { text: 'Type', columntype: 'textbox', datafield: 'usb_type', width: 100 },
                { text: 'VID', columntype: 'textbox', datafield: 'vid', width: 100 },
                { text: 'PID', columntype: 'textbox', datafield: 'pid', width: 100 },
                { text: 'Hub', datafield: 'hub', cellsalign: 'right', cellsformat: 'n2' }
            ]        
            caption: "Test"
        });
    });
</script>
</head>
<body>
<div id='jqxWidget'>
    <div id="grid"></div>
</div>
</body>
</html>

This code runs without any errors, but does not produce anything on the screen, not even an empty grid.
I can go to the “View->Source” and am able to see the data that is being pulled out from the DB in the “data”, but the page is blank.

Could somebody please help?

Thank you in advance.

January 9, 2014 at 10:56 am Blank page when using jqxGrid + django #47618

Peter Stoev

Keymaster

Hi oneeyeman,

I have not used Django, but an obvious thing that is missing on this page is jqx.base.css and DOCTYPE.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 10, 2014 at 2:36 am Blank page when using jqxGrid + django #47652

oneeyeman

Participant

Hi, Peter,
I added what is missing on the index.html.
Now going to the “View->Source” I see following:


<!DOCTYPE html>
<html>
<head>
<title>Test</title>
 
<link rel="stylesheet" href="/static/jqwidgets-ver3.1.0/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="/static/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.aggregates.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.grouping.js"></script>
<script type="text/javascript"> 
    var data = "[<USB: other>, <USB: other>, <USB: other>, <USB: other>, <USB: other>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, '...(remaining elements truncated)...']";
    $(document).ready(function(){
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'device_name', type: 'string' },
                { name: 'vid_pid', type: 'string' },
                { name: 'install', type: 'string' },
                { name: 'disk_device', type: 'string' },
                { name: 'volume_device', type: 'string' },
                { name: 'usb_type', type: 'string' },
                { name: 'vid', type: 'string' },
                { name: 'pid', type: 'string' },
                { name: 'hub', type: 'number' }
            ]
        };
        var dataAdapter = new $.jqx.dataAdapter(source)
        //initialize jqxGrid
        $("#grid").jqxGrid(
        {
            source: dataAdapter,
            showstatusbar: true,
            editable: false,
            columns:
            [
                { text: 'Device Name', columntype: 'textbox', datafield: 'device_name', width: 100 },
                { text: 'VID/PID', columntype: 'textbox', datafield: 'vid_pid', width: 50 },
                { text: 'Install', columntype: 'textbox', datafield: 'install', width: 50 },
                { text: 'Disk Device', columntype: 'textbox', datafield: 'disk_device', width: 50 },
                { text: 'Volume Device', columntype: 'textbox', datafield: 'volume_device', width: 50 },
                { text: 'Type', columntype: 'textbox', datafield: 'usb_type', width: 100 },
                { text: 'VID', columntype: 'textbox', datafield: 'vid', width: 100 },
                { text: 'PID', columntype: 'textbox', datafield: 'pid', width: 100 },
                { text: 'Hub', datafield: 'hub', cellsalign: 'right', cellsformat: 'n2' }
            ]        
            caption: "Test"
        });
    });
</script>
</head>
<body>
<div id='jqxWidget'>
    <div id="grid"></div>
</div>
</body>
</html>

and the page is still blank.
What I think is happening is that I need to bind the “data” array to the columns data.

Any idea?
Thank you.

Author

Posts

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

You must be logged in to reply to this topic.