I have been looking at this example, but it appears as though it is calling methods not available in 10.3. Specifically, I am getting an error on the grid._applyClientBinding() line. Is there an updated version or hotfix that has these methods for the WebDataGrid?

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");

                }

            });

        }

$(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

Hi,

I tried $(grid.tableTemplate).render(newData).appendTo(grid._elements.dataTbl.lastChild); but it's throwing an exception. Object doesn't support this property or method. I am using JQuery 1.4.2, so should I be using a more newer version?

Dave

If you're running into the problem of _tableTemplate being null, you might have done the stupid thing I did and didn't enable or misspelled the attribute EnableClientRendering="True". I had mispelled "Rendering" as "Rednering"....

Anyways, this webpage https://es.infragistics.com/samples/aspnet/data-grid/jquery-client-template is comprehensive on how to accomplish this. Everything in here is overly complex, but to be fair, it's been six years since the last post.

Not much point if no-one can get it to work. I have tried everything I can think of and so have others. It appears that the Infragistics team are not willing to get involved in the conversation either so you may as well try other controls out there. Sorry to be the bringer of bad news.

Dave