Hello bpg730,

Regarding your first question you neeed to set Width, DefaultColumnWidth and Height of the WebDataGrid in order to force scrollbars to show when is needed.

Regarding the second one you need to call  _dataBind() in order to get the proper rows count.

But at this time this method is not working as expected because the functionality is still CTP.

Let us know if you need further assistance regarding this.

I'm not sure if you are supposed to call the line to clear the previous data at a specific point before the data is loaded, but it does not work when called before the ajax call. It visually clears the data from the table, but when the new data is bound, it is appended to the old data.

I can't get the line above that is supposed to let you pass the whole data element in to work at all. It just makes the grid blank.

$(grid._elements.dataTbl.lastChild).empty(); // call that before you load the new data

in fact you don't need to call tmpl() or render for every record, it should work fine if you pass the whole array, too:

  $(grid.tableTemplate).render(newData).appendTo(grid._elements.dataTbl.lastChild);

Hope it helps,

Angel

I managed to get it working. The problem with the methods not being available was because inside of one solution, I had a project with IG version 10.2 and another project with IG version 10.3 and it caused some problem with the GAC. I moved the project to a new solution and it fixed the GAC issue.

I now have it successfully binding to the grid, but it is causing 3 problems with the rendering:

1. It is not putting the scroll bar on the side of the grid when it should.

2. When I attempt to retrieve the number of rows after the client binding, it returns 0.

3. I have the grid bound to  a button as in the sample. But whenever I press reload again, it appends the data to what is already in the grid. How do I clear the previous data?

Here is the javascript code for binding the data:

        function reloadGrid() {

            var grid = $find("<%=WebDataGrid1.ClientID %>");

            //Show ajax loading

            grid._pi.show(grid);

            $.ajax({

                url: 'WebServices/GetJSONData.asmx/getIGGridData',

                type: "POST",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function(data, st) {

                    if (st == "success") {

                        var newData = JSON.parse(data.d);

                        var item;

                        var dataSource = grid._get_dataSource();

                        if (!grid.tableTemplate)

                            grid.tableTemplate = grid._elements.dataTbl.lastChild.cloneNode(true);

                        for (var i = 0; i < newData.length; i++) {

                            item = newData[i];

                            $(grid.tableTemplate).render(item).appendTo(grid._elements.dataTbl.lastChild);

                            dataSource.push(newData[i]);

                        }

                        grid._set_dataSource(dataSource);

                        grid._applyClientBinding();

                        //Hide ajax loading

                        grid._pi.hide(grid);

                        //numRows always gets set to 0, it should be 200

                        var numRows = grid.get_rows().get_length();

                    }

                },

                error: function() {

                    alert("Error with AJAX callback");

                }

            });

        }

Hello bpg730,

I am a little bit confused about this.

As I am not able to reproduce the issue ,

can you please share the code snippet regarding your sample

in a zipped attachment to the forum thread?

Hope hearing from you.