JqxGrid width in % - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

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

Author

JqxGrid width in % Posts

February 28, 2013 at 11:29 am JqxGrid width in % #16020

NYC207

Participant

Hello,

I am currently using version 2.7 of JqxWidget.
My problem is the following:
when I create a JqxGrid with a percentage size, it is not displayed correctly. I do not want to have a fixed size, I would like the size of the component adapts to the screen size.

Thank you for your help.

February 28, 2013 at 11:34 am JqxGrid width in % #16021

Peter Stoev

Keymaster

Hi NYC207,

Please, post a code which demonstrates this behavior.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 28, 2013 at 11:47 am JqxGrid width in % #16028

NYC207

Participant

JqxGrid code:

var url = "/DashBoard/getAllProjectLateDelivery";
    var theme = getPersonalTheme() ;
    var source = {
        datatype: "json",
        datafields: [
                { name: 'objet' },
                { name: 'natureDepense' }
            ],
        url: url
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#lateDeliveryGridView").jqxGrid(
        {
            width:'98%',
            height:500,
            source: dataAdapter,
            theme: theme,
            pageable: false,
            pagesize: 5,
            showemptyrow: false,
            columnsresize: true,
            columns: [
                { text: 'Objet du marché', datafield: 'objet'},
                { text: 'Type', datafield: 'natureDepense'}
            ]
        });

result is :

February 28, 2013 at 11:56 am JqxGrid width in % #16029

Peter Stoev

Keymaster

Hi NYC207,

I am unable to reproduce the issue, but it could be related to your HTML structure. jqxGrid should be rendered from a visible DIV tag.

Below is a working sample:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from JSON string.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.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.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 = getDemoTheme();
            var data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'CompanyName', type: 'string' },
                    { name: 'ContactName', type: 'string' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: '98%',
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                    { text: 'Company Name', datafield: 'CompanyName' },
                    { text: 'Contact Name', datafield: 'ContactName' }
                 ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 28, 2013 at 12:15 pm JqxGrid width in % #16033

NYC207

Participant

Hi Peter,

This example does not work for me
JqxGrid size is equal to 98% but all the columns are not visible

February 28, 2013 at 12:22 pm JqxGrid width in % #16034

Peter Stoev

Keymaster

Hi NYC207,

Here’s the Demo online: http://jsfiddle.net/jqwidgets/EUU7J/1/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 1, 2013 at 4:36 pm JqxGrid width in % #16217

NYC207

Participant

Hi Peter,

I still have not found a solution to my problem.
However I was wondering if the problem did not come from the fact that my page is built dynamically.
Let me explain:
Each page of my application is built from different views (Asp. NET MVC). When you click on a menu item, a request ajax load the content of a partial view in the main page and then I call the function that will build the JqxGrid.

Thank you for your understanding and your help

March 1, 2013 at 5:40 pm JqxGrid width in % #16227

Peter Stoev

Keymaster

Hi NYC207,

That could be a problem. You can also try to refresh the Grid in your application by calling its “refresh” or “render” methods.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.