jQuery UI Widgets Forums Grid complete page data is not showing in grid

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 9 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • complete page data is not showing in grid #66310

    buddharaj
    Participant

    I am facing issue while loading data after click event. Its skipping 1st row and showing data from second row in some cases. Here is my code:

    var source = {
                    datatype: "json",
                    datafields: [                     
                                { name: 'sno' },
                                { name: 'bid' },
                                { name: 'city' },					 
                                { name: 'booking_date' },					 
                                { name: 'amount' },					 
                                { name: 'customer_contact' },					 
                                { name: 'user_name' },					 
                                { name: 'trip_type' },
                                { name: 'comments' },
                                { name: 'action' },
                    ],
                    cache: false,
                    url: 'order_details.php?flag=2&start_date='+start_date_param+'&end_date='+end_date_param,              //flag 2 - for past order
                    data: {
                        //filterscount:0,
                        //groupscount:0,
                        pagesize:3,
                        //recordstartindex:0,
                        //recordendindex:50
                    },
                    root: 'Rows',
                    //sortcolumn: 'area',
                   // sortdirection: 'asc',
                   beforeprocessing: function (data) {
                        source.totalrecords = data[0].TotalRows;
                        //console.log("beforeprocessing: "+source.totalrecords);
                    }
                };
    
                dataadapter = new $.jqx.dataAdapter(source);
               
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 1100,
                    source: dataadapter,
                    theme: 'classic',
                    autoheight: true,
                    pageable: true,
                    pagesize:3,
                    enablebrowserselection: true, 
                    selectionmode: 'singlecell',
                    scrollmode: 'deferred',
                    //sortable:true,
                    virtualmode: true,
                    rendergridrows: function (params) {
                        return params.data;
                    },
                    columns:
                    [   
                        { text: 'No', datafield: 'sno', width: 30 },
                        { text: 'Booking Id', datafield: 'bid', width: 90, align: 'center',cellsAlign: 'center' },
                        { text: 'City', datafield: 'city', width: 170 },
                        { text: 'Car Book Date', datafield: 'booking_date', width: 100, align: 'center',cellsAlign: 'center' },
                        { text: 'Amount', datafield: 'amount', width: 60, align: 'right',cellsAlign: 'right' },
                        { text: 'Customer Contact', datafield: 'customer_contact', width: 205 },
                        { text: 'User Name', datafield: 'user_name', width: 125 },
                        { text: 'Trip Type', datafield: 'trip_type', width: 160},
                        { text: 'Comments', datafield: 'comments', width: 80, align: 'center',cellsAlign: 'center'},
                        { text: 'Action', datafield: 'action', width: 80, align: 'center',cellsAlign: 'center'},
                    ]
                });
                                
                //dataadapter.dataBind();
                //display_records_grid();
                // event handling on select of date range and click on button show 
                $("#btn_show").on("click", function (e) {
                    e.preventDefault();
                    $("#in_search").val("");
                    //$("#jqxgrid").html("");
                    //$("#jqxgrid").GridUnload();
                    var start_date_param = $("#start_date").val();
                    var end_date_param = $("#end_date").val();
                    source.url = 'order_details.php?flag=2&start_date='+start_date_param+'&end_date='+end_date_param; 
                         dataadapter.dataBind();                
                });
                
                $("#btn_search").on("click", function (e) {
                    e.preventDefault();
                    var booking_id = $("#in_search").val();
                    if (booking_id !='') {
                        source.url = 'order_details.php?flag=2&booking_id='+booking_id;                   
                        //$("#jqxgrid").jqxGrid('clear');
                        //$("#jqxgrid").jqxGrid('gotopage', 0);
                        dataadapter.dataBind();
                        //$("#jqxgrid").jqxGrid('updatebounddata');                    
                    }
                });

    Here problem is data is getting loaded properly. But problem is in click event.
    Test Cases:
    Load the page–>data is getting desplay properly for page0
    Go to next page2–>data is getting loaded for next page
    click on search and input any wrong text “sdfhch”–>result into “no records display”
    click on show which has to display all the records starting from page0—> but its skipping first row and showing records from second row
    why so


    Peter Stoev
    Keymaster

    Hi,

    Your url should be only order_details.php. The parameters which I suppose should be dynamic should be applied within the source object’s formatData callback function.

    Best Regards,
    Peter Stoev

    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.