jQuery UI Widgets Forums Grid Vertical layout

This topic contains 4 replies, has 3 voices, and was last updated by  Dimitar 6 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • 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

    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/

    Vertical layout #52783

    kakao
    Participant

    Thanks!

    Vertical layout #53523

    jan
    Participant

    Hello Dimitar,
    Please, could you show me an jqxGrid example with json data but i need to show different row names from datafields. Also each city need to be in new grid.
    grid1
    Name | Las Vegas
    State | Nevada
    Founded | 05-15-1905
    Area | 352
    Population | 596,424

    grid2
    Name | Los Angeles
    State | California
    Founded | 09-04-1781
    Area | 1,302
    Population | 3,857,799

    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"
    			}
    		]
    
    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/

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

You must be logged in to reply to this topic.