Can jqGrid's columns be displayed vertically?

I think the answer to my question is "no"....jqGrid's columns can't be displayed vertically...but I just wanted to double check.

I have it like this now

grid
LVL 8
CamilliaAsked:
Who is Participating?
 
MishaConnect With a Mentor ProgrammerCommented:
There is  simple example with simple json data from official site.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Your page title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>
    <script>
        $(function () {

            InputData: 
            "use strict";
            $("#grid").jqGrid({
                colModel: [
                    { name: "firstName" },
                    { name: "lastName" }
                ],
                data: [
                    { id: 10, firstName: "Angela", lastName: "Merkel" },
                    { id: 20, firstName: "Vladimir", lastName: "Putin" },
                    { id: 30, firstName: "David", lastName: "Cameron" },
                    { id: 40, firstName: "Barack", lastName: "Obama" },
                    { id: 50, firstName: "Francois", lastName: "Hollande" }
                ]
            });
        });
        //]]>
    </script>
</head>
<body>
    <table id="grid"></table>
</body>
</html>

Open in new window


I assume something like this. If you make json data from server, you can use colModel property of JqGrid to make it more beautiful and without headers "col1, col2 etc". Also you can experiment with style on the first column

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Your page title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>
    <script>
        $(function () {
            $("#grid").jqGrid({
                colModel: [
                    { name: "col1" },
                    { name: "col2" },
                    { name: "col3" },
                    { name: "col4" },
                    { name: "col5" },
                    { name: "col6" },
                ],
                data: [
                    { col1: "firstName", col2: "Angela", col3: "Vladimir", col4: "David", col5: "Barack", col6: "Francois" },
                    { col1: "lastName", col2: "Merkel", col3: "Putin", col4: "Cameron", col5: "Obama", col6: "Hollande" },
                ]
            });
        });
    </script>
</head>
<body>
    <table id="grid"></table>
</body>
</html>

Open in new window

0
 
MishaProgrammerCommented:
No, JQGrid can't be displayed vertically, but you can put headers in the first column. In second column put data, corresponding with headers, etc, etc.
0
 
CamilliaAuthor Commented:
ah, you have an example of that?
0
All Courses

From novice to tech pro — start learning today.