Client Side Binding

Answered (Not Verified) This post has 0 verified answers | 29 Replies | 8 Followers Thread's RSS feed.

bpg730
Points 520
Replied On: Tue, Oct 19 2010 3:42 PM Reply

Can someone please provide me with a sample demonstrating how to bind to a WebDataGrid client side NOT using a datasource like in the samples browser? I would like to make a web service call using JSON and bind the data client side, but the only example I can find is the one in the samples browser connecting to a database.

  • Post Points: 20

All Replies

Replied On: Tue, Oct 26 2010 2:47 AM Reply

Hello bpg730,

If you use 10.3 version of the toolset there are sample showing this. But keep in mind that this feature is still CTP: 

Client side binding

Hope this helps

Rado,
Senior Manager \ Engineering Services
ASP.NET MCPD
Twitter | @radoslavMinchev
  • Post Points: 20
bpg730
Points 520
Replied On: Thu, Oct 28 2010 12:04 PM Reply

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?

  • Post Points: 20
Replied On: Fri, Oct 29 2010 4:32 AM Reply

Hello bpg730,

Thank you for your interest regarding ClientBinding.

In order to use it you should :

1)       Include the JQuery scripts:

<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>

    <script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>

 

2)       Set EnableClientRendering = true in the code behind:

 

this.WebDataGrid1.EnableClientRendering = true;

 

3)       Set any datasource to the WebDataGrid. It can be an empty list :

 

 this.WebDataGrid1.EnableClientRendering = true;

                  List<Product> list = new List<Product>();

                  this.WebDataGrid1.DataSource = list;

 

4)       Set json array as a datasource  on the client side. In this sample I am using Initialize client event for the purpose.

You can add items to the json with push function.

 

function Initialize(sender, args) {

            var grdPipeline = $find('<%=WebDataGrid1.ClientID%>');

 

            var jsonString = { "PipeLineNoteEntry":

             [{ "Product_ID": "117", "Product_Name": "Luyba", "Unit_Price": "123.56" },

             { "Product_ID": "118", "Product_Name": "Radoslav", "Unit_Price": "345.56" },

             { "Product_ID": "119", "Product_Name": "Tsvetelina", "Unit_Price": "456.56" },

             { "Product_ID": "120", "Product_Name": "Hristo", "Unit_Price": "567.56" },

             { "Product_ID": "121", "Product_Name": "Vladimir", "Unit_Price": "678.56"}

             ]

            };

            var dataSource = grdPipeline._get_dataSource();

 

            var arr = jsonString.PipeLineNoteEntry;

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

                dataSource.push(jsonString.PipeLineNoteEntry[i]);

            }

 

            grdPipeline._set_dataSource(dataSource);

            grdPipeline._pi.show(grdPipeline);

            grdPipeline._applyClientBinding();

            grdPipeline._pi.hide(grdPipeline);

        }

 

The client binding functionality is CTP and it is not still supported officially in 10.3 version.

Let us know if you need further assistance.

Kind Regards,

Tsvetelina Georgieva

Infragistics, Inc.

  • Post Points: 38
bpg730
Points 520
Replied On: Fri, Oct 29 2010 11:41 AM Reply

Thank you for the step-by-step response. However, when I try enabling client binding, I get an error saying that I am missing 

Infragistics.Web.UI.GridControls.WebDataGrid.js_obf.igWebDataGridClientBinding.js

I then tried the code with that commented it out and it runs through the code successfully but does not display anything in the grid.

 

NOTE: Since your solution required the grid's _applyClientBinding() function that is not available in the 10.3 release, I had to grab it off the samples page. The code runs through without error, but I am not sure if there are any other functions that are necessary.

 

  • Post Points: 20
Replied On: Tue, Nov 2 2010 9:38 AM Reply

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.

Kind Regards,

Tsvetelina Georgieva

Infragistics, Inc.

  • Post Points: 20
bpg730
Points 520
Replied On: Tue, Nov 2 2010 12:43 PM Reply

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

                }

            });

        }

 

 

 

  • Post Points: 20
Alexander Todorov
Points 24,626
Infragistics Employee
Answered (Not Verified) Replied On: Tue, Nov 2 2010 12:52 PM Reply

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

 

  • Post Points: 35
bpg730
Points 520
Replied On: Thu, Nov 4 2010 12:07 PM Reply

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.

  • Post Points: 20
Replied On: Fri, Nov 5 2010 6:06 AM Reply

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.

Kind Regards,

Tsvetelina Georgieva

Infragistics, Inc.

  • Post Points: 20
Alexander Todorov
Points 24,626
Infragistics Employee
Replied On: Fri, Nov 5 2010 6:35 AM Reply

Everything should be working fine in the CTP, this is not related to that. I suppose this could be related to something else specific to the javascript code / project. Also please note that the correct API call is called _applyClientBindings(), not _dataBind(). Even though _dataBind() exists, it should not be called as the logic there it is not based on jQuery but MS AJAX. We will of course refactor this cleanly for the RTM release. 

Hope it helps,

Angel 

  • Post Points: 20
bpg730
Points 520
Replied On: Fri, Nov 5 2010 8:48 AM Reply

After calling _applyClientBindings(), grid._get_rows() still contains no rows.

Also, I am still having trouble clearing the old rows before re-binding data to the grid. When I try to rebind a second chunk of data to the grid, it is just appending it to the bottom of the previous data.

  • Post Points: 35
Alexander Todorov
Points 24,626
Infragistics Employee
Replied On: Fri, Nov 5 2010 9:08 AM Reply

please do not use _get_rows() for now. You should probably have got the JSON on the client-side, so you can check how many rows are there by doing jsonData.length. 

Our online sample about client binding does clear the rows after every rebinding which happens within a specific time interval, so i am not sure what could be wrong in your case. You can follow up with dev support or attach a sample project to me and i'll resolve the issue

Thank you

Angel 

  • Post Points: 5
Replied On: Fri, Nov 5 2010 10:01 AM Reply

Hello bpg730,

I created a new support ticket on your behalf.

CAS-55857-5X0RX8

You can update the case it with your isolated sample.

Hope hearing from you.

Kind Regards,

Tsvetelina Georgieva

Infragistics, Inc.

  • Post Points: 5
DaveStuart
Points 517
Replied On: Wed, May 4 2011 10:14 PM Reply

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

  • Post Points: 20
Page 1 of 2 (30 items) 1 2 Next > | RSS