In a previous blog entry we showed how to add buttons to move rows in a Repeating Table up and down. We were playing with that solution again and realized it was hard to visually track the items as they moved – each row looks similar so after a click to move the row your eyes have to scan the view to find it again. This is especially problematic if you’re trying to move the row several slots up or down.
Fortunately, there’s an easy tweak you can make that takes advantage of the View OM.
Most operations in InfoPath are data-centric – you cause changes in the view by manipulating the data, which causes a view update. The XDocument.View object provides some view-centric functionality:
Another blog entry discussed the usage of SelectText and SelectNodes for driving selection within the view. In this case, we’ll take advantage of SelectNodes to provide visual feedback to the user when a row is moved.
In the Move Up/Move Down example, there were blocks of code responsible for moving the XML node corresponding to the row by manipulating the DOM. In the Move Up case it looked like this:
oParent.insertBefore oItem, oPrevious
Simply add this line following those (within the same if block):
Make a similar change in the MoveDown case. After you’ve made these changes, Preview, and you should see that when a row is moved it becomes selected. Now it’s easier to tell which row was moved.