Grid for mobile - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: font size, jqxgrid, mobile grid

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

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

Author

Grid for mobile Posts

October 23, 2012 at 7:27 pm Grid for mobile #9959

welby

Member

Hi,

I am new to using Jquery and Jqwidgets so I would like some advice about a couple of things.

I wish to create a “fluid” table to suit mobile devices.

I have tried to use the grid element, but I can’t seem to make the grid output fluid to suit different mobile devices.

Firstly is this possible and secondly if so how please?

Been scratching my head on this one, even looked at the mobile examples but am I missing the obvious?

Thanks in advance and I appreciate the hard work that has gone into creating Jqwidgets.

Welby

ps I am planning on using it for a searchable/filtered grid of karaoke tracks I hold in Mysql and CSV.

October 23, 2012 at 7:50 pm Grid for mobile #9960

welby

Member

I also forgot that the Bind to CSV does not support the use of ” qualifiers so my data appears as:

my code is:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Comma-delimited text also known as comma-separated values (CSV).</title>
    <link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="./scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxdata.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="./scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var url = './karaoke.txt';
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Artist', type: 'float' },
                    { name: 'Title', type: 'float' },
                    { name: 'ID', type: 'float' }
                ],
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 800,
                source: dataAdapter,
                theme: theme,   
                columnsresize: true,
                filterable: true,
                autoshowfiltericon:false,
                columns: [
                  { text: 'Artist', datafield: 'Artist', width: 300},
                  { text: 'Title', datafield: 'Title', width: 300},
                  { text: 'ID', datafield: 'ID', width: 200}
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

October 24, 2012 at 6:54 am Grid for mobile #9973

Dimitar

Participant

Hello welby,

Please check out the source code of the mobile jqxGrid demo.

As you can see, the width and height of the grid are set to 100%.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 25, 2012 at 5:58 pm Grid for mobile #10045

welby

Member

hi,

great thanks – worked that one out! 🙂

October 26, 2012 at 10:22 am Grid for mobile #10066

welby

Member

Is it possible to adjust the font size without editing the style CSS?

October 29, 2012 at 6:52 am Grid for mobile #10135

Dimitar

Participant

Hello welby,

The only way to adjust the font size of a widget is through CSS.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.