jQWidgets Forums

Tagged: column, grid, Header, jqxgrid, layout, reverse, vertical

This topic contains 4 replies, has 3 voices, and was last updated by Dimitar 11 years, 1 month ago.

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

Author

Vertical layout Posts

April 9, 2014 at 9:37 am Vertical layout #52776

kakao

Participant

Now we use this:

Header Header Header Header
cell cell cell cell
cell cell cell cell
cell cell cell cell

Does jqxGrid have vertical layout like below?

Header cell cell cell
Header cell cell cell
Header cell cell cell
Header cell cell cell

April 9, 2014 at 9:40 am Vertical layout #52778

Dimitar

Participant

Hello kakao,

This is demonstrated in the demo Custom Row Editor.

Best Regards,
Dimitar

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

April 9, 2014 at 10:23 am Vertical layout #52783

kakao

Participant

Thanks!

April 24, 2014 at 9:01 am Vertical layout #53523

jan

Participant

grid3
… and more.

"city":
		[	
			{	
				"c":"Las Vegas",
				"s":"Nevada",
				"f":"05-15-1905",
				"a":"352",
				"p":"596,424"
			},
			{	
				"c":"Los Angeles",
				"s":"California",
				"f":"09-04-1781",
				"a":"1,302",
				"p":"3,857,799"
			}
		]

April 25, 2014 at 6:11 am Vertical layout #53563

Dimitar

Participant

Hello jan,

This data format is not suitable for the kind of grid in Custom Row Editor. Here is how to modify the demo to display your data in two grids:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            // prepare the data
            var data = new Array();
            data.push({ "Name": "State", "Las Vegas": "Nevada", "Los Angeles": "California" });
            data.push({ "Name": "Founded", "Las Vegas": "05-15-1905", "Los Angeles": "09-04-1781" });
            data.push({ "Name": "Area", "Las Vegas": "352", "Los Angeles": "1302" });
            data.push({ "Name": "Population", "Las Vegas": "596424", "Los Angeles": "3857799" });

            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                },
                datafields:
                [
                    { name: 'Name', type: 'string' },
                    { name: 'Las Vegas', type: 'string' },
                    { name: 'Los Angeles', type: 'string' },
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgridLV").jqxGrid(
            {
                width: 300,
                autoheight: true,
                source: dataAdapter,
                editable: true,

                selectionmode: 'singlecell',
                columns: [
                  {
                      text: 'Name', pinned: true, editable: false, datafield: 'Name', width: 150
                  },
                  {
                      text: 'Las Vegas', columntype: 'custom', datafield: 'Las Vegas', width: 150
                  }
                ]
            });

            $("#jqxgridLA").jqxGrid(
            {
                width: 300,
                autoheight: true,
                source: dataAdapter,
                editable: true,

                selectionmode: 'singlecell',
                columns: [
                  {
                      text: 'Name', pinned: true, editable: false, datafield: 'Name', width: 150
                  },
                  {
                      text: 'Los Angeles', columntype: 'custom', datafield: 'Los Angeles', width: 150
                  }
                ]
            });

        });
    </script>
</head>
<body class='default'>
    <div id="jqxgridLV" style="margin-bottom: 10px;">
    </div>
    <div id="jqxgridLA">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.