jQWidgets Forums

Tagged: ajax, custom, filter, grid, json, Pagination, rows, selection

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 12 years ago.

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

Author

Grid with pagination(ajax:json), filter and custom rows selection(checkbox) Posts

April 23, 2013 at 4:10 pm Grid with pagination(ajax:json), filter and custom rows selection(checkbox) #19842

omar86

Member

Hello Everybody,

i’m trying to implement Custom Rows Selection as it described in the tuto: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/customrowsselection.htm. the particularity that i’ve is my data are fetched by ajax(json). so that not works for me. I’m asking if anyone did it before?Grid with pagination, filter and custom rows selection with checkbox?

Thanks in advane.

April 24, 2013 at 6:35 am Grid with pagination(ajax:json), filter and custom rows selection(checkbox) #19876

Dimitar

Participant

Hello omar86,

Here is an example (based on the Sorting) with Ajax loading and custom row selection using checkbox column:

<!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.8.3.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.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/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.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/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            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: 'available', map: 'm\\:properties>d\\:available', type: 'bool' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url,
                sortcolumn: 'ShipName',
                sortdirection: 'asc'
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create jqxgrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 450,
                source: dataAdapter,
                theme: theme,
                enablehover: false,
                editable: true,
                filterable: true,
                selectionmode: 'none',
                altrows: true,
                pageable: true,
                sortable: true,
                autoheight: true,
                columns: [
                {
                    text: '', menu: false, sortable: false,
                    datafield: 'available', columntype: 'checkbox', width: 40,
                    renderer: function () {
                        return '<div style="margin-left: 10px; margin-top: 5px;"></div>';
                    },
                    rendered: function (element) {
                        $(element).jqxCheckBox({ theme: theme, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
                        columnCheckBox = $(element);
                        $(element).on('change', function (event) {
                            var checked = event.args.checked;
                            var pageinfo = $("#jqxgrid").jqxGrid('getpaginginformation');
                            var pagenum = pageinfo.pagenum;
                            var pagesize = pageinfo.pagesize;
                            if (checked == null || updatingCheckState) return;
                            $("#jqxgrid").jqxGrid('beginupdate');
                            // select all rows when the column's checkbox is checked.
                            if (checked) {
                                $("#jqxgrid").jqxGrid('selectallrows');
                            }
                            // unselect all rows when the column's checkbox is checked.
                            else if (checked == false) {
                                $("#jqxgrid").jqxGrid('clearselection');
                            }
                            // update cells values.
                            var startrow = pagenum * pagesize;
                            for (var i = 0; i < pagesize; i++) {
                                // The bound index represents the row's unique index. 
                                // Ex: If you have rows A, B and C with bound indexes 0, 1 and 2, afer sorting, the Grid will display C, B, A i.e the C's bound index will be 2, but its visible index will be 0.
                                // The code below gets the bound index of the displayed row and updates the value of the row's available column.
                                var boundindex = $("#jqxgrid").jqxGrid('getrowboundindex', i);
                                $("#jqxgrid").jqxGrid('setcellvalue', boundindex, 'available', event.args.checked);
                            }
                            $("#jqxgrid").jqxGrid('endupdate');
                        });
                        return true;
                    }
                },
                  { text: 'Ship Name', editable: false, datafield: 'ShipName', width: 250 },
                  { text: 'Shipped Date', editable: false, datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' },
                  { text: 'Freight', editable: false, datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right' },
                  { text: 'Ship Address', editable: false, datafield: 'ShipAddress', width: 350 },
                  { text: 'Ship City', editable: false, datafield: 'ShipCity', width: 100 },
                  { text: 'Ship Country', editable: false, datafield: 'ShipCountry', width: 101 }
                ]
            });
            $('#events').jqxPanel({ width: 300, height: 80, theme: theme });
            $("#jqxgrid").on("sort", function (event) {
                $("#events").jqxPanel('clearcontent');
                var sortinformation = event.args.sortinformation;
                var sortdirection = sortinformation.sortdirection.ascending ? "ascending" : "descending";
                if (!sortinformation.sortdirection.ascending && !sortinformation.sortdirection.descending) {
                    sortdirection = "null";
                }
                var eventData = "Triggered 'sort' event <div>Column:" + sortinformation.sortcolumn + ", Direction: " + sortdirection + "</div>";
                $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
            });
            $('#clearsortingbutton').jqxButton({ height: 25, theme: theme });
            $('#sortbackground').jqxCheckBox({ checked: true, height: 25, theme: theme });
            // clear the sorting.
            $('#clearsortingbutton').click(function () {
                $("#jqxgrid").jqxGrid('removesort');
            });
            // show/hide sort background
            $('#sortbackground').on('change', function (event) {
                $("#jqxgrid").jqxGrid({ showsortcolumnbackground: event.args.checked });
            });
            var updatePageState = function (pagenum) {
                var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
                var pagenum = datainfo.paginginformation.pagenum;
                var pagesize = datainfo.paginginformation.pagesize;
                var startrow = pagenum * pagesize;
                // select the rows on the page.
                $("#jqxgrid").jqxGrid('beginupdate');
                var checkedItemsCount = 0;
                for (var i = 0; i < pagesize; i++) {
                    var boundindex = $("#jqxgrid").jqxGrid('getrowboundindex', i);
                    var value = $("#jqxgrid").jqxGrid('getcellvalue', boundindex, 'available');
                    if (value) checkedItemsCount++;
                    if (value) {
                        $("#jqxgrid").jqxGrid('selectrow', boundindex);
                    }
                    else {
                        $("#jqxgrid").jqxGrid('unselectrow', boundindex);
                    }
                }
                $("#jqxgrid").jqxGrid('endupdate');
                if (checkedItemsCount == pagesize) {
                    columnCheckBox.jqxCheckBox({ checked: true });
                }
                else if (checkedItemsCount == 0) {
                    columnCheckBox.jqxCheckBox({ checked: false });
                }
                else {
                    columnCheckBox.jqxCheckBox({ checked: null });
                }
            }
            // update the selection after sort.
            $("#jqxgrid").on('sort', function (event) {
                updatePageState();
            });
            // update the selection after page change.
            $("#jqxgrid").on('pagechanged', function (event) {
                updatePageState();
            });
            // select or unselect rows when a checkbox is checked or unchecked. 
            $("#jqxgrid").on('cellvaluechanged', function (event) {
                if (event.args.value) {
                    $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
                }
                else {
                    $("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
                }
                // update the state of the column's checkbox. When all checkboxes on the displayed page are checked, we need to check column's checkbox. We uncheck it,
                // when there are no checked checkboxes on the page and set it to intederminate state when there is at least one checkbox checked on the page.  
                if (columnCheckBox) {
                    var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
                    var pagesize = datainfo.paginginformation.pagesize;
                    var pagenum = datainfo.paginginformation.pagenum;
                    var selectedRows = $("#jqxgrid").jqxGrid('getselectedrowindexes');
                    var state = false;
                    var count = 0;
                    $.each(selectedRows, function () {
                        if (pagenum * pagesize <= this && this < pagenum * pagesize + pagesize) {
                            count++;
                        }
                    });
                    if (count != 0) state = null;
                    if (count == pagesize) state = true;
                    if (count == 0) state = false;
                    updatingCheckState = true;
                    $(columnCheckBox).jqxCheckBox({ checked: state });
                    updatingCheckState = false;
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div id="eventslog" style="margin-top: 30px;">
            <div style="float: left; margin-right: 10px;">
                <input value="Remove Sort" id="clearsortingbutton" type="button" />
                <div style="margin-top: 10px;" id='sortbackground'>
                    Sort Background</div>
            </div>
            <div style="margin-left: 100px; float: left;">
                Event Log:
                <div style="border: none;" id="events">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

April 24, 2013 at 3:49 pm Grid with pagination(ajax:json), filter and custom rows selection(checkbox) #19930

omar86

Member

Hello,

Thank you very much Dimitar, my grid works better. Istill have a problem: when i check one or many checkbox in my grid and then i user the filter, the cheked checkbox are unchecked. i can’t find why, do you have any idea?

Thnaks again.

April 25, 2013 at 10:26 am Grid with pagination(ajax:json), filter and custom rows selection(checkbox) #19990

Dimitar

Participant

Hi omar86,

We could not reproduce the reported behaviour using the example we provided you and jQWidgets 2.8.1.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.