How can I make a clicked row element from a Datagrid be highlighted without refreshing the datagrid?

mogarick shared this question 5 years ago
Answered

How can I make a clicked row element from a Datagrid be highlighted and get the last one selected before to go unhighlighted without refreshing the datagrid?


Here my case:


Every row has a status so I need every bkg row color in the datagrid to be colored according to its respective record status (Unconfirmed, Confirmed, Started, Finished, Cancelled).


If I select one row to show detail I need this row to change its bkg to a specific color used for selected elements.


If any other element gets selected then the one that was previously selected must revert its bkg color to the one according to its status.


The way I tried was by coloring the rows bkgs onLoadPage. This works ok at the beginning because nothing is selected then but when I select one row and then another one, I can't make the originally selected to get back to its original bkg color according to status.


I added a set value event for refreshing the datagrid but when doing so all the rows lose the coloring I added to them with the onLoadPage.


Could you help me?

Comments (7)

photo
1

I think this tutorial might help you with that: http://www.justinmind.com/usernote/te...

photo
1

Hi,


I watched the tutorial and applied it to my case but it doesn't solve the problem.


The technique consists of 2 actions: one to reset/re render the datagrid styles (changes style of DagridName) and one to change the specific row bkg (changes style of Row_2)


The problem is with the first action the original bkg colors applied to the elements according to its status get reset also and I have no way to re apply them since it appears I can't select and modify other rows but the actual one (the one I clicked).

photo
1

I see... maybe if you define an on page load event on the row so it checks if the row is selected (using an attribute in the data master to control which one is selected) and, if it's not, then paint it in the color of the status. Then, on click in a row, execute a data master action that modifies the attribute 'selected' in the data master and then a link to the same screen so the data grid reloads and apply the on page load event.

photo
1

I already have an onPageLoad event and a column for the selection status additionally to the record status.


The problem with your suggested solution is that I'm not sure if re loading the page preserves the position of the selected element in the list. For example if there are 20 items and only the first 10 get showed at the beginning if I select the element 17 and then reload the page I'm afraid the list will be reset in position and I'm not gonna see the element 17. I'm gonna need to scroll down again.


I used a trick but I'm still not convinced. I have a focus in event in the row so when I click on any list element the event gets fired on row_2. Since all list elements have the ID row_2 this event fires on all those elements so I can repaint their backgrounds. The problem is it forces scroll to the last element always because that's where the last row_2 element is so I'm in the same scenario of your solution since the list doesn't stay at the element selected position.


I can put another fake input at top of list and fire a focus on it after focus in the row_2 but this only positions de list view on top. The problem of preserving the list in the selected element position doesn't get solved :(

photo
1

What if you use a variable to know the page of the data grid you are in? I think that, combined with an attribute in the data master to know which element is the one selected could work.

photo
1

sorry, I'm not using pagination. When I said position I was literally making reference to the position of the element in the screen.


The normal behavior is yo click the element and the list doesn't get moved neither vertical or horizontal but only the element backgorund color gets changed.


With your solution as well as mine the list can get moved either to the beginnning (in your solution I presume since yo reload the page an everything should reset to their initial position) or the end (the one where I use the focus in and don't use another fake input at top)

photo
1

I sent you an example by email.