All Apps and Add-ons

Splunk Dashboard Examples - Table Row highlighting bug ?

greggz
Communicator

Splunk Dashboard Examples

The first time you enter the page or refresh the page, the table will not have the rows highlighted. As seen here

alt text

After you go to page 2 , then back to 1 the highlight appears

alt text

This happens because render is called twice, but the event rendered only happens once, between the two renders.

Is this the behaviour expected ? I'll just move the table row highlighting to render for the time being, but I wanted to understand if I'm missing something

Thanks

0 Karma
1 Solution

niketn
Legend

@cmerriman @greggz, refer to one of my older answer with a workaround with this issue: https://answers.splunk.com/answers/588394/change-the-color-of-rows-in-a-table-based-on-text-1.html . I had used setTimeout() function inside tableView's rendered() function to ensure that custom row render is applied.

     tableView.on('rendered', function() {
         // Add a delay to ensure Custom Render applies to row without getting overridden with built in reder.            
         setTimeout(function(){    
             // Apply class of the cells to the parent row in order to color the whole row
             tableView.$el.find('td.range-cell').each(function() {
                 $(this).parents('tr').addClass(this.className);
             });
         },100);
     });
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@cmerriman @greggz, refer to one of my older answer with a workaround with this issue: https://answers.splunk.com/answers/588394/change-the-color-of-rows-in-a-table-based-on-text-1.html . I had used setTimeout() function inside tableView's rendered() function to ensure that custom row render is applied.

     tableView.on('rendered', function() {
         // Add a delay to ensure Custom Render applies to row without getting overridden with built in reder.            
         setTimeout(function(){    
             // Apply class of the cells to the parent row in order to color the whole row
             tableView.$el.find('td.range-cell').each(function() {
                 $(this).parents('tr').addClass(this.className);
             });
         },100);
     });
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

niketn
Legend

@greggz. please try out and confirm! Also add a BUG tag to your question 🙂

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

niketn
Legend

@greggz if the workaround resolved your issue please accept to mark this question as answered.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

cmerriman
Super Champion

What version of Splunk are you using? I think there as a change in Splunk 6.6, maybe, that affected this. We just noticed this issue in one of our dashboards we use this in, and we changed td to tr in the js and css.

0 Karma

greggz
Communicator

Im using 7.01

0 Karma

gnangia
Explorer

Answer by niketnilay is correct. We struggled for sometime before looking at answers and added the code that was provided and it works like a charm. Thank you so much.

0 Karma

greggz
Communicator

can you specify where you changed that ? thanks for answering

0 Karma

cmerriman
Super Champion

the files are located in the app's appserver/static directory.

0 Karma

greggz
Communicator

Im not asking for the directory. Im asking where in the files specifically. Because I'm not seeing how that would help seeing that the problem is that the built-in render overwrites the custom one

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...