jQWidgets Forums

Tagged: jqxgrid with ajax

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

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

Author

databinding in grid-with-ajax Posts

July 7, 2012 at 8:39 am databinding in grid-with-ajax #5744

Ranchs

Member

Hi Peter,

I too have same problem which i wasn’t able to figure out but fortunaltely I found your suggestion to Nick.

http://www.jqwidgets.com/community/topic/data-binding-in-grid-via-ajax/

As per the reply i have done the same way , i too have the same problem with the grid and ajax as it works only the first time.

Scenario:

I have two Tabs namley tab1 – “Attribute Details” and tab2 – “Customer Details” , on selection of tab1 it loads its data and on selection of tab2 it has to make a ajax call and get the data amd populate the grid.

Please find the code done while selection of tab2 – “Customer Details”.

if(tabSelected == ‘Customer Details’){

var cid = “”;
alert(‘ cid >>> ‘ + cid);

var loadGrid = function () {
$.ajax({
type: “POST”,
url: “/app1/servlet/CustServlet?obid=” + cId ,
dataType: ‘json’,
beforeSend: function() {
console.log(“Set the spiiner image until data loads “);
$(“#jqxgridCust”).html( ‘

‘ ); },
error: function(json, textStatus, errorThrown){
console.log(textStatus + ” | ” + errorThrown);
},
success: function (data) {
console.log(“Success… “);
// initailize Cust grid
var repData = data;
var repSource =
{
localdata: repData,
datatype: “json”,
};
var reportDataAdapter = new $.jqx.dataAdapter(repSource);
$(“#jqxgridCust”).jqxGrid(
{
width: 800,
source: reportDataAdapter,
editable: true,
pageable: true,
autoheight: true, selectionmode: ‘singlecell’,
columns: [
text: ‘Cust ID’, datafield: ‘ID’, columntype: ‘textbox’, width: 177, editable: false },
text: ‘Dept Type’, datafield: ‘DepType’, columntype: ‘textbox’, width: 80, editable: false },
text: ‘Code’, datafield: ‘DepCode’, columntype: ‘textbox’, width: 80, editable:
false },
text: ‘Designation’, datafield: ‘Grade’, columntype: ‘textbox’, width: 80 , editable:
false }
]
});
},
complete: function(data) {
// Remove the spinner after data loads in grid.
$(‘#spinner’).hide();
}

}); }

console.log(“Calling loadGrid … “);
loadGrid();
console.log(“Called loadGrid … “);

}

As the tab2 is selected the first time it gets the data and renders it on to the grid, and later i move to tab1 and again select the tab2 , it does make the ajax call and i could see the logs on the console with all the data printed.But for some reasons the grid is not able to show the data.

Please suggest me if i am doing something wrong with the data population to the grid which i cudn’t figure out.

Thanks
Ranchs

July 7, 2012 at 8:49 am databinding in grid-with-ajax #5745

Peter Stoev

Keymaster

Hi Ranchs,

Have you tried the code from the other post? It shows how to reload the Grid with Ajax. Do you use jQuery 1.7.2 and jQWidgets 2.2.1?

<!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.7.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/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.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var loadGrid = function () {
                $.ajax({
                    url: "../sampledata/beverages.txt",
                    dataType: 'json',
                    beforeSend: function () {
                        $("jqxgrid").html('');
                    },
                    error: function (json, textStatus, errorThrown) {
                        alert(' Error :' + errorThrown);
                    },
                    success: function (data) {
                        // initailize grid
                        var gridData = data;
                        var gridSource =
                        {
                            localdata: gridData,
                            datatype: 'json'
                        };
                        var gridDataAdapter = new $.jqx.dataAdapter(gridSource);
                        $("#jqxgrid").jqxGrid(
                        {
                            width: 670,
                            source: gridDataAdapter,
                            editable: true,
                            pageable: true,
                            autoheight: true,
                            selectionmode: 'singlecell',
                            columns: [
                              { text: 'Name', datafield: 'name', width: 250 },
                              { text: 'Beverage Type', datafield: 'type', width: 250 },
                              { text: 'Calories', datafield: 'calories', width: 180 },
                              { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                              { text: 'Protein', datafield: 'protein', minwidth: 120 }
                          ]
                    });
                    }
                });
            }
            loadGrid();
            $("#Button").click(function () {
                loadGrid();
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <input type="button" value="Button" id="Button" />
</body>
</html>

If the above code does not help, please send a sample to support@jqwidgets.com which shows the issue in your scenario.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.