jQWidgets Forums

Tagged: grid, jqxgrid, page, pageable, pager, paging, row

This topic contains 5 replies, has 2 voices, and was last updated by reggaeone13 11 years, 8 months ago.

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

Author

Grid with data for different months of year Posts

October 4, 2013 at 4:13 pm Grid with data for different months of year #30252

Participant

I need to use the jqxGrid to display data of different months of year without using the build-in filtering functionality.
For example I have the requirement to display the data for the current month at the beginn (current month button in the middle deactivated), then when the user click on a buttton of Menu (left to the current month button), the Grid will display data for the previous month and if the user click on another button (right to the current month button) on the jqxMenu (or a Table Header) the Grid should display the data for that month (also 3 buttons on Menu with 3 months: previous, current and next).
Is it possible to have such a behaviour by using the jqxGrid?
Please, let me know!
Thanks in advance.

October 7, 2013 at 5:08 am Grid with data for different months of year #30321

Dimitar

Participant

Hello reggaeone13,

Yes, this can be achieved. Here are some suggestions on how to approach the solution:

1) grid with paging, one row (month) per page;
2) grid with custom pager , one row (month) per page;
3) grid with custom navigation buttons in statustbar or toolbar which reload the grid with the data for the new month.

Of course, the easiest way would be to use the built-in paging.

Best Regards,
Dimitar

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

October 9, 2013 at 9:04 pm Grid with data for different months of year #30513

reggaeone13

Participant

Thank you, thank you very much for the prompt answer.
I will try with the built-in paging.

October 18, 2013 at 9:55 am Grid with data for different months of year #30998

reggaeone13

Participant

Hello Dimitar,

please, can you help me with an example to start with the solution 1 (grid with paging, one row (month) per page)?

I will appreciate this!

I don’t understand, what you mean by “one row (month) per page” and I don’t know, how can I implement the “pager” callback function (pagenum, pagesize, oldpagenum) to achieve this (I’am begginer regarding Javascript).

I don’t want any change of page size by the user, only “pagechanged” event should be treated.
Should I take “virtual mode” for the Grid?

Thank you, thank you in advance!

October 21, 2013 at 11:31 am Grid with data for different months of year #31105

Dimitar

Participant

Hi reggaeone13,

Here is an example:

<!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/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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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 = "";
            var url = "months.txt";
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name', type: 'string' },
                    { name: 'days', type: 'int' }
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 500,
                pageable: true,
                pagesize: 1,
                pagesizeoptions: ["1", "3", "6", "12"],
                autoheight: true,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'Name', datafield: 'name', width: 350 },
                  { text: 'Days', datafield: 'days', width: 150 }
              ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

And here is the contents of the file months.txt:

[{
    "id": "1",
    "name": "January",
    "days": 31
}, {
    "id": "2",
    "name": "February",
    "days": 28
}, {
    "id": "3",
    "name": "March",
    "days": 31
}, {
    "id": "4",
    "name": "April",
    "days": 30
}, {
    "id": "5",
    "name": "May",
    "days": 31
}, {
    "id": "6",
    "name": "June",
    "days": 30
}, {
    "id": "7",
    "name": "July",
    "days": 31
}, {
    "id": "8",
    "name": "August",
    "days": 31
}, {
    "id": "9",
    "name": "September",
    "days": 30
}, {
    "id": "10",
    "name": "October",
    "days": 31
}, {
    "id": "11",
    "name": "November",
    "days": 30
}, {
    "id": "12",
    "name": "December",
    "days": 31
}]

Best Regards,
Dimitar

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

October 23, 2013 at 5:18 pm Grid with data for different months of year #31267

reggaeone13

Participant

Hi Dimitar,

thank you very very much!
I am happy!

Author

Posts

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

You must be logged in to reply to this topic.