Grid data refresh

Top of the evening to you!!

I’m currently evaluating the hierarchical grid and I’m stuck trying to implement a simple data source refresh.

I’m using json as data source for the grid. I then have handlers for events like adding a row and updating a row, etc. That works fine. I’m not using/interested in the transactional operations.

What I have to implement is regular updating of the grid data. I get new json every 30 seconds but when I try to use dataSourceObject option of the grid nothing happens. If I call dataBind after setting new data source I get exceptions (i.e. “length is null or undefined”). (I only get this exception when one of the grid records is in expanded state).

Is there an example of how to achieve refreshing of the grid data source after the grid has been initialised? WIll I have to put in logic to expand/reselect the records to hide the refreshing from the user?

Any help is super greatly appreciated:)

Kyryll

Hello  casper01,

 

Thank you for posting in the Infragistics community.  I’ve been looking at your question  and I put together a simple test to see if any error comes up. I’ve used our demos distributed along with the installation of jQuery product  found in my C drive (C:\Program Files (x86)\Infragistics\NetAdvantage 2011.2\jQuery\demos\igHierarchicalGrid)  LoadOnDemand sample. In the sample is demonstrated binding the grid to local as well to remote data source. I’ve just extended it with one button in order to refresh the data like this:

 

1. <script type="text/javascript">
2.     function refreshGrid() {
3.         console.log('grid refresh');
4.         $("#gridLoadOnDemand").igHierarchicalGrid("dataBind");
5.         $("#gridAllData").igHierarchicalGrid("dataBind");
6.     }
7. </script>
8.  
9.   <inputtype="button" value="refresh" onclick="refreshGrid()"/>

I confirm that after pressing  the button to refresh the grids the grids are collapsed and then re-rendered  without any issues.

In your case if you simply call      $("#gridLoadOnDemand").igHierarchicalGrid("dataBind");,  does it help?

If you still have any issues can you package a running sample and attach please in order to be able to investigate it further.

 

Hi Radoslav!

Thanks for your reply:)

What you recommended to try, works as you suggested. Unfortunately it's not what I want to do:)

I have two current issues that I would like to solve/work around:

ISSUE 1:

I want to implement hierarchical grid updating while visually preserving the selected/expanded/sorted rows.

For example, a user is working with a list of tasks. A task can have documents and notes attached to it. Documents and notes are child grids for each task record. A user is able to add, update and delete notes using the in-grid updating. New tasks come in on regular basis. What I want is make the grid accommodate the new tasks without collapsing any existing records and preferably not interrupting user's note edit. So the user just sees a new record come up but no other visual changes.

While I was waiting for your response I started implementing a routine that would save "state" of every record and try to restore that state for each record after calling dataBind. Please advise me if there is a better way.

ISSUE 2:

I seem to be unable to style a row when the template contains expressions.

I try to set a row template like "${formatDate(ReviewDate)}" where "formatDate(dte)" is a function present in my script. According to jQuery templating API this should work but I get and exception similar to "replace is not a valid function on the object". If use "${ReviewDate}" everything works fine.

Thank you very much for your help.

Looking forward to hearing from you soon:)

Kyryll

Hello Kyryll,

Attached is a small sample demonstrating how to refresh  the igHierarchicalGrid per band basis.

1. $(window).load(function () {
3.      var jsonData = { “d”: [
4.          {
5.              “ID”: 0,
6.              “Name”: “Food”,
7.              “Products”: [
8.                  { “ID”: 0, “Name”: “Bread”, “Price”: “2.5” }
9.              ]
10.          },
11.          {
12.              “ID”: 1,
13.              “Name”: “Beverages”,
14.              “Products”: [
15.                  { “ID”: 1, “Name”: “Milk”, “Price”: “3.5” },
16.                  { “ID”: 2, “Name”: “Vint soda”, “Price”: “20.9” }
17.              ]
18.          },
19.          {
20.              “ID”: 2,
21.              “Name”: “Electronics”,
22.              “Products”: [
23.                  { “ID”: 7, “Name”: “DVD Player”, “Price”: “35.88” },
24.                  { “ID”: 8, “Name”: “LCD HDTV”, “Price”: “1088.8” }
25.              ]
26.          }
27.      ]
28.      }
31.      $(“#hierarchicalGrid”).igHierarchicalGrid({
32.          initialDataBindDepth: 1,
33.          dataSource: jsonData,
34.          dataSourceType: “json”,
35.          responseDataKey: “d”,
37.          autoGenerateColumns: false,
38.          primaryKey: “ID”,
39.          columns: [
40.              { headerText: “ID”, key: “ID”, width: “50px”, dataType: “number” },
41.              { headerText: “Name”, key: “Name”, width: “130px”, dataType: “string” }
42.          ],
43.          autoGenerateLayouts: false,
44.          defaultChildrenDataProperty: “Products”,
45.          columnLayouts: [
46.              {
47.                  key: “Products”,
48.                  responseDataKey: “”,
49.                  childrenDataProperty: “Products”,
50.                  autoGenerateColumns: false,
51.                  primaryKey: “ID”,
52.                  columns: [
53.                      { key: “ID”, headerText: “ID”, width: “25px” },
54.                      { key: “Name”, headerText: “Product Name”, width: “90px” },
55.                      { key: “Price”, headerText: “Price”, dataType: “number”, width: “55px” }
56.                  ]
57.              }
58.          ]
59.      });
60.  });
62.  function refreshGrid() {
64.      /*
65.      * Get a reference to the first child of the igHierarchcal grid
66.      * and assign new datasource
67.      */
68.      $(‘#hierarchicalGrid’)
69.          .igHierarchicalGrid(‘allChildrenWidgets’)[0]
70.              .dataSourceObject([{ “ID”: 1, “Name”: “DVD Player”, “Price”: “35.88”}]);
72.      /*rebind the grid*/
73.      var firstChildGrid = $(‘#hierarchicalGrid’)
74.          .igHierarchicalGrid(‘allChildrenWidgets’)[0];
75.      firstChildGrid.dataBind();
77.  }
78.  </script>

About your second issue I do not know what causes it, can you send me a code snippet  of the grid definition to investigate it further.

Hope it helps.

Attachments:

1. childGridRefresh.zip

Hi Kyryll,

Have you checked my example? Let me know if you need further assitance with this matter.

Thanks,

Hi Kyryll,

I've got a word from our developers and it turns out to be not support feature for now.

Hello Rado:

I am looking for igHierarchicalGrid refresh function and I found this post.

I am using knockout observableArray to bind to igHierarchicalGrid datasource.

When the Json data in my observableArray has been changed, i tried to call:

$("#my_table").igHierarchicalGrid("dataBind");

But the my UI didn't get refresh. The table still showing the old data.

Anything that i missed out?

I am using IgniteUI.Free -Version 13.1.20131.2292.

Appreciate for your reply.

KM

OKay i am able to make it working by assign the same data source file again:

$("#my_table").igHierarchicalGrid('option', 'dataSource', <myknockoutarray>);
$("#my_table").igHierarchicalGrid("dataBind");

Not sure if there is any other better solution?

Thanks,

KM

Hello KOK MANG TANG ,

 If you’re using KnockoutJS then I recommend that you also take advantage of our knockout js extensions , which support KnockoutJS bindings with the igHierarchicalGrid widget.

You can refer to the following sample from our samples browser, which demonstrates the configuration for achieving two-way data-binding between your model and the grid:

http://www.igniteui.com/hierarchical-grid/bind-hgrid-with-ko

 

Note that if anything in the model changes then the grid will automatically reflect the changes.

 

Let me know if you have any questions.

 

Best Regards,

Maya Kirova

Infragistics, Inc.

http://www.infragistics.com/support