i have a grid using a row template to show images. i want to update the data source and have the row template update the row based on the new data. What is the best way to do this?
if you update the data source, you will need to rebind the grid in order to see the new changes rendered. Otherwise you need to use KnockoutJS, we have integration for it as CTP in 2012.1. In that case only the updated cells will be re-rendered, which is a lot better in terms of performance. you can find KnockoutJS samples with the igGrid here:
http://samples.infragistics.com/jquery/grid/grid-knockoutjs-integration
Hope it helps. Thanks,
Angel
is there a way to rebind without the rowindex being set to zero? must i remember the selected row and reset the index after bind?
Sure :)For things concerning our controls I generally stick to the API reference:http://help.infragistics.com/jQuery/2012.1/ and as for other jQuery magic, I use Google and StackOverflow :)Like in this case, the solution was already described at:http://stackoverflow.com/questions/1805808/how-do-i-scroll-a-row-of-a-table-into-view-element-scrollintoview-using-jquery
Hi,
I am trying to stop the grid scroll position jumping back to the top when I rebind. Based on this reply I thought I just need to do this:
pos = $("#gridChannelSchedule_scroll").scrollTop();
$("#gridChannelSchedule").igGrid("dataBind");
$("#gridChannelSchedule_scroll").scrollTop(pos);
But pos is always returned as undefined, what am I missing?
Thanks
Ian
Hi Ian,
Here is the approach I can recommend:
I'm pasting the suggested script below - you can see a demo of it in the HTML sample I'm attaching to this reply.
var verticalScrollPos; $(function () { $('#grid1').igGrid({ virtualization: false, autoGenerateColumns: false, width: '500px', height: '500px', columns: [ { headerText: "Product ID", key: "ProductID", width: "100px", dataType: "number" }, { headerText: "Units in Stock", key: "UnitsInStock", width: "150px", dataType: "number" }, { headerText: "Product Description", key: "ProductDescription", width: "150px", dataType: "string" }, { headerText: "Unit Price", key: "UnitPrice", width: "100px", dataType: "string" } ], dataSource: namedData, primaryKey: "ProductID", features: [ { name: "Selection", mode: "row" } ], dataBinding: function(evt, ui) { if(ui.owner.scrollContainer()[0]){ verticalScrollPos = ui.owner.scrollContainer().scrollTop(); } }, dataRendered: function(evt, ui) { if(verticalScrollPos) { $(ui.owner.scrollContainer()).scrollTop(verticalScrollPos); } } }); });
Let us know if you need more details.Beast Regards,Borislav
Thanks for the fast response, only just got the time to check this and it said that the UI object doesn't have an owner property. I am working TypeScript so I had to manually edit the .d.ts file to add that property and then it worked perfectly.
Thanks a lot
Regards
Just one subsequent problem.
This doesn't work corectly if virtualization is enabled, when the databind happens the display shows the top of the list again even though the scroll bar stays in the correct position. As soon as you move the mouse wheel again it refreshes and shows the correct data.
Is there anyway around this?
Also if I know I have only updated a single record in my local JSON array do I need to rebind the entire dataset or is there a way I can just tell the grid to upadet a single row?
And I'm not even from the customer support team :D(the guys there rock as well ;-))If you're having problems with calling updateRow and getting the desired results, I'd say it's either a mis-configuration issue or a bug (specific to the scenario) - I ought to know since testing the Updating feature is one of my responsibilities :).If I may suggest, why don't you try calling the updateRow method on some of the editing-related samples that we have?(just use the JS console of your browser without any worries) If that doesn't work for you, please provide us with a description (or code) of your scenario and if possible - a working sample with dummy data.(that'll help us demystify the issue in a jiff)Cheers!Bobby
Thanks for your detailed response, I must admit I am impressed with your customer support :-)
Given that 99% of the time I am updating the grid because of a state change on a single row then the UpdateRow method looks like the way to go. I have had an initial attempt to make this work but it didn't seem to update the UI. But I will do some more investigation to make sure its not my issue.
Hi Ian,First off, kudos for finding & fixing the TypeScript translation of the grid (if that's what you did?).
Second, restoring the vertical scroll position when any form of virtualization (fixed or continuous) is damn tricky and I'm afraid that there's no simple solution for that.Yes, the igGrid has a public API method called virtualScrollTo(), but it's not meant to be used to solve this particular problem/request.
Other forum members have struggled with this and I would like to give you the links to the particular thread(s) where my colleague, Martin Pavlov answered (and I back him up on this) that unfortunately there is no simple way of doing this without actually modifying the code of the igGrid that's responsible for virtualization.(sorry - with the revamp of the forum UI I can't find the forum thread(s) where this was discussed :( )There's a product idea submitted about making the virtualScrollTo() method a viable piece of achieving the desired outcome. You can submit it once again if you wish, but I'm afraid that that won't change much - our developers are looking into product ideas and development requests based on priority so this will be implemented once it moves up their queue.
Ian Fletcher said:Also if I know I have only updated a single record in my local JSON array do I need to rebind the entire dataset or is there a way I can just tell the grid to upadet a single row?
Hope you can take advantage of #1 or #2 - I think that they are the cleanest ones.Cheers!Borislav