How to Fill the grid with dynamic data from java's arraylist with ajax call

[RanchsMember]

I am trying to fill the data dynamically inside the grid when ‘Ranchs’ tab is selected through .

Primarily the data i recieve making a ajax call to a servlet is to fill the searchBean’s setter method with a ArrayList.
Which i have to access and poulate the an array which serves as source data to the grid which i wish to do it in “success:” of ajax call.

$(‘#tab1’).bind(‘selected’, function (event) {
var tabSelected = $(‘#tab1’).jqxTabs(‘getTitleAt’, event.args.item);
var count;
if(tabSelected == ‘Ranchs’){
$.ajax({ type: “GET”,
url: “/ePax/servlet/Controller?handler=10&obid= ” + param1,
data: “param2=true&nameddata=reports&queryParam=” + param1,
success: function(data){
count = “”;

// Need to access Arraylist of java and filln the array to be used as source to the grid
Please Help me on getting to the solution
}
});
}

});

Please help me out in getting to the solution.

[Peter StoevKeymaster]

Hi Ranchs,

If in the success callback, you receive an array of data, then you can build the Grid from that array by using the same approach as in this demo: bindingtoarray.htm.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[RanchsMember]

Hi Peter,

Thanks for the quick response.

I have tried to get the java’s ArrayList through the bean.getter() method, my intention is to access the data within the ArrayList and
interate it to fill in to the Array of client side i.e javascript array and use this Jscript array as source for binding to the grid.

But I beleive to access the ArrayList of java within ajax calback i.e success isn’t possible.I mean using a scriptlet like below where i am not able to store the values into the jsArray.

success: function(msg){
<%
ArrayList alSearchData = jqSearchResultBean.getReportsData() ;
for(int i=0 ;i
jsArray = “”;

}

Please suggest or correct me how to get to assign the data from ArrayList to jsArray.

Thanks
Ranchs

[Peter StoevKeymaster]

Hi Ranchs,

I think these posts will help you in your scenario: http://stackoverflow.com/questions/8091392/how-can-we-tell-jquery-to-access-a-java-arraylist-in-javaservlets and http://stackoverflow.com/questions/6528234/passing-an-array-from-java-jsp-to-jquery. Having the data in JSON, you will be able to bind the Grid.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[RanchsMember]

Hi Peter,

Thanks very much for the suggestion.

Now that i have been successful in converting the ArrayList of java which is indeed an collection of ArrayList holding the rows of data to be populated to the grid as json object (through Gson) using the below code as :

With in the Servlet :

// ArrayList of ArrayList containing row data
ArrayList <ArrayList > alSearchData = new ArrayList <ArrayList > ();

// ArrayList containing individual row data as Strings
ArrayList alRowData = new ArrayList ();

// I have put the data such a way into the arraylist to be easily retrieved to javascript array as below:

1st row
alRowData.(“Name:”+”Ranchs”);
alRowData.(“Type:”+”Search”);
alRowData.(“Dept:”+”Support”);
alRowData.(“ID:”+”0WRT12”);

alSearchData .add(alRowData);

2nd row
alRowData.(“Name:”+”Klips”);
alRowData.(“Type:”+”Search”);
alRowData.(“Dept:”+”Support”);
alRowData.(“ID:”+”0WRT456”);

alSearchData .add(alRowData);

After which i have done the below code to convert to json:

response.setContentType(“application/json”);
response.setCharacterEncoding(“UTF-8″);
response.getWriter().write(new Gson().toJson(alSearchData));

I have problem in retreiving the data with in the below jquery code:

$(‘#tab1′).bind(‘selected’, function (event) {
var tabSelected = $(‘#tab1′).jqxTabs(‘getTitleAt’, event.args.item);

if(tabSelected == ‘Ranchs’){
$.ajax({
type: “GET”,
url: “/ePax/servlet/Controller?handler=10&obid= ” + param1,
data: “param2=true&nameddata=reports&queryParam=” + param1,
datatype:”json”,
success: function(data){
// Kindly help me out in retrieving the data from the json object here.
}
});
}

});

Kindly help me out in retreiving the data inside the ajax success call back method.

[Peter StoevKeymaster]

In the success callback function, you can initialize and bind the Grid to your JSON data. If the JSON data is in a similar format:

[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B's Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}];

Then you can set it to the source object’s localdata property. In the source object’s initialization, define the datafields and set the ‘datatype’ to ‘json’.

            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'CompanyName' },
                    { name: 'ContactName' },
                    { name: 'ContactTitle' },
                    { name: 'Address' },
                    { name: 'City' },
                    { name: 'Country' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columns: [
                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                    { text: 'City', datafield: 'City', width: 120 },
                    { text: 'Country', datafield: 'Country', width: 120 }
                ]

Hope this helps you.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts