Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
matt
755
igGrid live upating
posted

Hi, I have a scenario where I use an igGrid that is initialised along with the page and hidden with the ng-show directive, and as data comes in over a Solace connection, the data source is updated. 

This should then show the grid correctly rendered with the information in the new rows. 

I've tried several approaches, but there seems to be issues with each attempt. 

  • Updating the $scope.data that is bound to the grid doesn't update the UI.
  • If the grid is wrapped in a Div, the add method does not work ($("#igniteGrid").igGridUpdating("addRow", row);)
  • If the grid is wrapped in a table, the add method works, but the data does not show in the cells, the headers are misplaced and the row takes up the entire height of the grid. 
  • If the grid is not hidden at all, the headers render properly, but the data still does not display

I'm using version 15.2.20152.2081 and need to support IE11

Is there a reliable cross browser way to get this working? 

<table id="igniteGrid" ng-show="rowCount > 0"></table>

I've added the relevant snippets of js code here

https://plnkr.co/edit/9kmBTiZHUtEm5k3EZMnY?p=catalogue

Parents
No Data
Reply
  • 755
    posted

    I've made some progress by explicitly styling the row height and some column widths, but there is something fundamental not working in IE. 

    In Chrome, the adding of the rows works ok. 

    I get rows appearing as they are published to the client. 

    In IE, I get a single row appear, with no data in it, then nothing else happens with subsequent messages. 

    EDIT: I've fixed this now. Turns out it was an issue with the DOMParser inspecting XML differently between browsers. 

    Another issue though, my users are very keen on the grouping and filtering on the Silverlight XamGrid, but the igGrid doesn't display the same behaviour. 

    If I group by a column header, and a new message comes in, it just adds the row to the bottom of the grid, and doesn't place it in the relevant grouping. 

    Is there a way to get this behaviour working without jumping through hoops? 

    EDIT: I've partially fixed this with a workaround posted elsewhere (saving layout, dataBind, load layout) but performance is very poor. Still open to suggestions on this one.

    As an aside, the whole dataBinding thing and having to both update the model + the grid seems counter intuitive from a separation of concerns POV. 

    As a comparison, the Handsontable allows you to bind a JSON array, and any changes to the data model immediately reflect in the UI through two way binding. Is this a feature that is in development? 

    Thanks, 

    Matt. 

Children