jQWidgets Forums

jQuery UI Widgets Forums Grid Pagination and selection

This topic contains 1 reply, has 2 voices, and was last updated by  ivailo 10 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Pagination and selection #71858

    aser
    Participant

    Hi, I have next question, my Grid has selectionmode = ‘checkbox’, when I’m click on “select all”, it selects all rows, then I’m unselect all rows by clicking “select all” again, go to the next page, and all rows are selected on this page why it’s happening.

    Thanks.

    Pagination and selection #71866

    ivailo
    Participant

    Hi aser,

    Update to the latest version 3.8.0
    Try this code. It works fine.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>This example illustrates Rows Selection with a Checkbox.
        </title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.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.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
       <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {       
                var url = "../sampledata/orders.xml";
    
                // prepare the data
                var source =
                {
                    datatype: "xml",
                    datafields: [
                        { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                        { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                        { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
                        { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                        { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                        { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                    ],
                    root: "entry",
                    record: "content",
                    id: 'm\\:properties>d\\:OrderID',
                    url: url
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                // create jqxgrid.
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    height: 450,
                    source: dataAdapter,
                    pageable: true,
                    autoheight: true,
                    sortable: true,
                    filterable: true,
                    ready: function()
                    {
                        // called when the Grid is loaded. Call methods or set properties here.         
                    },
                    selectionmode: 'checkbox',
                    altrows: true,
                    columns: [
                      { text: 'Ship Name', datafield: 'ShipName', width: 250 },
                      { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' },
                      { text: 'Freight', datafield: 'Freight', width: 150, cellsformat: 'F2', cellsalign: 'right' },
                      { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                      { text: 'Ship Country', datafield: 'ShipCountry'}
                   ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.