locked
HTML Grid Row Color RRS feed

  • Question

  • Using the HTML table, I'm trying to apply a background color to certain rows based on a value in one of the columns.  I'm using Rohit Agrawal's approach in his blog post, Spice Up Your HTML Client UI With Code.   Basically I'm setting the css background attribute for the row element to the desired color.  The problem I am having is that there is a default alternating row color  being applied of a very light grey.  That is overriding the red color I am trying to set.  In the screen shot below, the first two rows should be colored.  The second row is fine, because it normally does not have a background color due to an alternating row.  The first row, however, is not being colored as desired.  The alternating light grey color is overriding the color I am setting.  Does anyone have any help or insight into this issue?  


    Thank you,

    Binu Agrawal

    


    Tuesday, December 16, 2014 7:28 PM

Answers

  • I restored the default light theme and it still working well.

    As you noticed the rows are alternating also. If PRIORITY is a boolean try to put a condition if(value == true) or something like that

    • Marked as answer by binu.agrawal Friday, December 19, 2014 6:37 PM
    Friday, December 19, 2014 5:19 PM

All replies

  • Can you post your code? we can look into further.
    Wednesday, December 17, 2014 9:20 AM
  • myapp.ReceivedItems.rows_postRender = function (element, contentItem) {
        
        var entity = contentItem.value;
        
        
        function refresh() {
        
            if (entity.PRIORITY) {            
                var color = "#F5858B";
                $(element).closest("tr").css("background", color);
            }
            
        }
        refresh();        
    };

    Wednesday, December 17, 2014 3:07 PM
  • Hi Binu,

    You can use the following approach within the postRender of the Table Row: -

    myapp.ReceivedItems.rows_postRender = function (element, contentItem) {
        contentItem.dataBind("value.PRIORITY", function (value) {
            if (value) {
                $(element).css("background", "#F5858B");
            }
        });
    };

    The 'LightSwitch Mobile Business Apps Succinctly' book by Jan Van der Haegen available for free from Syncfusion has a great section which covers this area (p63+ 'Custom controls: PostRendering').  

    If you haven't read Jan's excellent book I'd strongly recommend 'picking up' a copy - it's great :-)

    HTH,

    Chris


    • Edited by ChrisCookDev Thursday, December 18, 2014 12:32 PM
    Thursday, December 18, 2014 12:31 PM
  • Chris.

    Thank you for the response.  I am still getting the same results.  I don't know if you can see with the screen shot below.  I blocked out the Vendor column.  The first six rows should all be colored with the same reddish background.  Unfortunately, due to an alternating row color scheme of a very light grey, alternating rows have a different background color.  I do not have this issue if I color the foreground or text color.  Then it works on all six rows. 

    Thank you for the link to the eBooks.  I will explore.

    Thursday, December 18, 2014 4:23 PM
  • Hi Binu,

    PostRender your Table Row and put this code inside:

    contentItem.dataBind("value.PRIORITY", function (value) {
            if (value) {
                $(element).css("background", "#F5858B");
            }else{
                $(element).css("background", "transparent");   
            }
    });

    Anas,

    Friday, December 19, 2014 1:53 PM
  • myapp.ReceivedItems.rows_postRender = function (element, contentItem) {        
        contentItem.dataBind("value.PRIORITY", function (value) {
            if (value) {
                $(element).css("background", "#F5858B");
            } else {
                $(element).css("background", "transparent");
            }
        });
    
    };

    I am doing exactly that, postRender the Table Row.  The alternating color scheme is still overriding any attempt to manually paint the background.  This is likely a simple test for anyone to try.  Place a table on an HTML Client screen that has a few rows.  Instead of doing a conditional background painting, try painting every row with a color?  

    myapp.ReceivedItems.rows_postRender = function (element, contentItem) {            
        $(element).css("background", "#F5858B");
    };

    Does it work?  Or does it only paint alternating rows?  It is as if the default alternating row color scheme takes effect after the postRender method.

    Please let me know your results.

    Thank you,

    Binu Agrawal

    Friday, December 19, 2014 3:46 PM
  • Hi,

    When I gave you my answer, I have already test it on a table test and it worked.

    Here is the code that I've used and the result.

    contentItem.dataBind("value.Amount", function (value) {
            if (value > 100) {
                $(element).css("background", "#F5858B");
            } else {
                $(element).css("background", "transparent");
            }
    });


    Friday, December 19, 2014 4:16 PM
  • Yes, I do see that yours is a little different.  You are also coloring your other rows something other than the stock default with the light css color scheme template that you get out of the box.  How are you setting the color of the rows that are assigned the "transparent" color (value<100)?

    Thank you,

    Binu Agrawal

    Friday, December 19, 2014 4:20 PM
  • It's just the default bakcground color, I've changed the dark lightswitch theme with the Jquery mobile themeroller
    Friday, December 19, 2014 4:26 PM
  • Thanks again for your response.  I'm just not getting the same results.  I take it then that you don't have any sort of default alternating color scheme in place on your tables (grids)?  If you didn't conditionally color those three rows red, would all of the rows be the same color?  If so, then your css is different from what comes out of the box.

    Binu Agrawal

    Friday, December 19, 2014 4:33 PM
  • I restored the default light theme and it still working well.

    As you noticed the rows are alternating also. If PRIORITY is a boolean try to put a condition if(value == true) or something like that

    • Marked as answer by binu.agrawal Friday, December 19, 2014 6:37 PM
    Friday, December 19, 2014 5:19 PM
  • Hi Binu,

    I'd also successfully tested the following approach before posting and suggesting it: -

    myapp.ViewCategory.rows_postRender = function (element, contentItem) {
        contentItem.dataBind("value.Imported", function (value) {
            if (value) {
                $(element).css("background", "#F5858B");
            }
        });
    };

    As you can see in the following example: -

    This is using the default light theme in VS2013 with update 4 (msls-2.5.2) and without any css customization.

    I've also tried the original approach you posted which also worked fine in my test case.  

    Which version of VS/LS are you using and have you made any css alterations or included any external js libs? (which may have introduced css changes).

    Kind regards,

    Chris

    Friday, December 19, 2014 6:35 PM
  • I think I figured it out.  It is browser dependent.  I was using IE9 and got the results I reported.  I tried using Chrome and it works perfectly.  What browser are you using?  I appreciate all of your help with this matter and showing me a working copy.  That made me think of the browser dependency.  I'll mark it as answered.  Thanks again.

    Binu Agrawal

    Friday, December 19, 2014 6:37 PM
  • Hi Binu,

    I'd tested with IE11 and Chrome so I'm guessing you're right that the issue is with older versions of IE.

    Thankfully, in our situation, we're able to ensure that our users are on the latest versions which makes things easier.  

    Having said this, we are finding a few quirks between the different browsers such as the one discussed in the post Command bar icons offset after update to VS 2013 Update 4.

    Glad you've solved the prob,

    Chris

    Friday, December 19, 2014 6:51 PM
  • I have IE11 and  it works fine, this why I didn't mention to check your browser.

    Glad that it worked

    Friday, December 19, 2014 7:15 PM