jQWidgets Forums

This topic contains 2 replies, has 3 voices, and was last updated by Peter Stoev 12 years, 4 months ago.

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

Author

Bug in custom page sizes in grid? Posts

November 5, 2012 at 10:44 am Bug in custom page sizes in grid? #10533

Member

Hi,

was experimenting with the Grid. Everything worked fine except when one used custom page sizes. I am fetching JSON data from the server via an Ajax call. The data is then passed to the grid.

It works fine the first time, but when one changes the search criteria and again “fetches” data from server, the the web-page freezes. What could be the issue…?

Please see code below –

<!DOCTYPE html>

<html lang="en">
<head>
        <meta charset="utf-8" />
        <title>
        Company Data
        </title>

<!-- required JS references -->
<link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.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.columnsreorder.js"></script> 
<script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script> 
<script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script> 
<script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script> 
<script type="text/javascript" src="../jqwidgets/jqxgrid.grouping.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script> 
<script type="text/javascript" src="../jqwidgets/jqxgrid.export.js"></script> 
<script type="text/javascript" src="../jqwidgets/jqxdata.export.js"></script> 
<!-- end of required JS references -->

</head>

<body>
        <h1>Company Data</h1>
        </br>
        <div id="company_data">  
        <form name="company_data_form" action="" id="company_data_form">  
        <fieldset>  
            Code like: <input type="text" name="codelike" id="codelike" /> </br> 
            <input type="submit" name="fetch" class="button" id="fetch" value="Fetch" />  
        </fieldset>  
        </form>  
        </div>  
        </br>
        <div id="error_message"> 
        </div>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
        <input type="submit" name="export" class="button" id="export" value="Export to Excel" /> 
        </div>

<script type="text/javascript">
    // jquery scripts
    $(document).ready(function () {
        try {
            $('#export').click(function (event) {

            $("#jqxgrid").jqxGrid('exportdata', 'xls','MyExcel');

            });

            $('#fetch').click(function (event) {

                //validation shd be done for input boxes!!

                var dataString = $('#company_data_form').serialize(); //serialize all input fields in form id login.

                $.post("../Classes/CompanyData_class.php", dataString, SuccessFunction).error(ErrorFunction);

                function SuccessFunction(data) {

                    if (data.slice(0, 5).toLowerCase() == "error") {

                        $('#error_message').html("<div id='error_message'></div>")
                    .append("<p>Error message: <strong>" + data + "</strong> </p>");

                     $('#jqxgrid').jqxGrid('clear');

                    }
                    else {
                        //set ajax returned JSON string (data variable) to JQWidgets source variable.

                        var source =
                                    {
                                        datatype: "json",
                                        datafields: [
                                            { name: 'Company_Code' },
                                            { name: 'Company_Desc' },
                                            { name: 'ShortCode' }
                                        ],
                                        localdata: data
                                    };
                        var dataAdapter = new $.jqx.dataAdapter(source);

                        $("#jqxgrid").jqxGrid(
                        {
                            source: dataAdapter,
                            width: 1000,
                            theme: 'energyblue',
                            filterable: true,
                            sortable: true,
                            pageable: true,
                            autoheight: true,
                            columnsresize: true,
                            columnsreorder: true,
                            pagesizeoptions: ['10', '25', '100'], //appears to have a bug, page hangs!!
                            columns: [
                                { text: 'Company Code', datafield: 'Company_Code', width: 150 },
                                { text: 'Company Desc', datafield: 'Company_Desc', width: 300 },
                                { text: 'Short Code', datafield: 'ShortCode', width: 100 }
                            ]
                        });

                        $('#error_message').html("<div id='error_message'></div>");

                    };

                };

                function ErrorFunction() {
                    $('#error_message').html("<div id='error_message'></div>")
                 .append("<p>Error in Javascript submission to Web-Server. Check your internet connection</p>");

                };

                return false;
                event.preventDefault();

            }); // end submit
        } // end try
        catch (err) {
            txt = "Error description: " + err.message + "\n\n";
            txt += "Click OK to continue.\n\n";
            alert(txt);
        } // end catch
    }); //end ready
</script>
<noscript>
   <h2>JavaScript must be enabled for this site to work!</h2>
</noscript>
</body>
</html>

November 5, 2012 at 11:39 am Bug in custom page sizes in grid? #10538

hardcode

Member

Hello, I faced the same problem and I could not overcome it. However, I solved it by using Iframes. so the grid is a different file so when search button on the parent form is click just pass all values in the url to the Iframe url and reload the frame. It also becomes difficult for the frame to adjust to the height of the grid in the parent window so I got a plugin that automatically does the adjustment. In all you will achieve the same objectives of searching and your users will not really notice the difference so much else you can wait for the Jwidget team to respond

November 5, 2012 at 3:04 pm Bug in custom page sizes in grid? #10541

Peter Stoev

Keymaster

Hi guys,

We can’t reproduce the reported issue with the latest version – 2.5.

The code from our test page is:

<!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.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            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' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url,
                pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                selectionmode: 'multiplerowsextended',
                sortable: true,
                pageable: true,
                pagesizeoptions: ['10', '25', '100'], autoheight: true,
                filterable: true,
                sortable: true,
                pageable: true,
                autoheight: true,
                columnsresize: true,
                columnsreorder: true,
                columns: [
                  { text: 'Ship Name', datafield: 'ShipName', width: 250 },
                  { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
                  { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
                  { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
                  { text: 'Ship City', datafield: 'ShipCity', width: 100 },
                  { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
                ]
            });
            $('#events').jqxPanel({ width: 300, height: 300, theme: theme });
            $("#jqxgrid").bind("pagechanged", function (event) {
                $("#eventslog").css('display', 'block');
                if ($("#events").find('.logged').length >= 5) {
                    $("#events").jqxPanel('clearcontent');
                }
                var args = event.args;
                var eventData = "pagechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + "</div>";
                $('#events').jqxPanel('prepend', '<div class="logged" style="margin-top: 5px;">' + eventData + '</div>');
                // get page information.
                var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
                $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount);
            });
            $("#jqxgrid").bind("pagesizechanged", function (event) {
                $("#eventslog").css('display', 'block');
                $("#events").jqxPanel('clearcontent');
                var args = event.args;
                var eventData = "pagesizechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + ", Old Page Size: " + args.oldpagesize + "</div>";
                $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
                // get page information.          
                var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
                $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount);
            });
        });
    </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="display: none; margin-top: 30px;">
            <div style="float: left;">
                Event Log:
                <div style="border: none;" id="events">
                </div>
            </div>
            <div style="float: left;">
                Paging Details:
                <div id="paginginfo">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.