I thought that perhaps I could use something like this, but it either doesn't work or I have the syntax wrong. It may be that this is a bad idea anyway.

    <script type="text/javascript">
        $(document).ready(function () {

            $("#igGrid1").live("iggridrendered", function (event, args) {
                // right-justify text in the seventh column
                args.owner.element.find("tr:nth-child(even)").className = "ui-ig-altrecord ui-iggrid-altrecord"
            });
    </script>

I found part of the issue to be a missing meta line in the layout.

<meta http-equiv="X-UA-Compatible" content="IE=9" >

After applying this, I no longer get the areas without boarders. However, Alternating row colors is still an issue.

Hello Tony,

You should use the following code snippet: 

   .oddrow

        {

            background-color: #E5E5E5;

        }

  $(document).ready(function () {

            $("#grid1").live("iggridrendered", function (event, args) {              

                args.owner.element.find("tr:even").addClass("oddrow");         

            });

 });

Let me know if you need further assistance

Fantastic!

Thank you!

Hi Tony,

Just to make an additional note that if you'd like this to be persisted across paging/sorting/filtering,

you can use the "iggriddatarendered" event instead of the "iggridrendered" one.  

   $(document).ready(function () {

            $("#grid1").live("iggriddatarendered", function (event, args) {

                args.owner.element.find("tr:even").addClass("oddrow");

            });

        });

That works. Thanks for checking into it.

Hi Tony,

The rowTemplate option is not compatible with the column hiding feature as the template is static and will not change and if you hide/unhide columns only the headers will actually change. The rows will always be the same as defined by the template.

I see however that you want columns that are always hidden and this scenario will indeed work with the rowTemplate as long as you don't provide cells for the columns you have hidden.

The issue you are experiencing is happening because when you have initially hidden columns the initial data rendering is postponed and the data is rendered after the dataRendered event, which is a problem we are looking into.

You can however solve your problem by applying the alternating row style on the "rendered" event as well. It will always be called after the data is rendered and this will give you the chance to apply the style on the initially rendered rows. Subsequent renderings will be handled by the "dataRendered" event and it should all work fine.

Your code should look like this.

$(document).ready(function () {

            $("#grid1").live("iggriddatarendered", function (event, args) {

                args.owner.element.find("tr:even").addClass("oddrow");

            });

            $("#grid1").live("iggridrendered", function (event, args) {

                args.owner.element.find("tr:even").addClass("oddrow");

            });

        });

Let me know if this solution satisfies you.

Thanks,

No, this one is fine.

We are looking into the issue.

Thanks,

Do I need to open a different forum thread for this? (see last post).

Thanks,
Tony

After upgrading to 2011.2 and adding the Hiding feature to the grid, this solution for alternating row colors no longer works.

If I take out the following code from the features section for the grid, then alternate colors using the code in the above posts works:

features.Hiding().ColumnSettings(settings => {
settings.ColumnSetting().ColumnKey("Field1").Hidden(false).AllowHiding(false);
settings.ColumnSetting().ColumnKey("Field2").Hidden(false).AllowHiding(false);
settings.ColumnSetting().ColumnKey("Field3").Hidden(false).AllowHiding(false);
settings.ColumnSetting().ColumnKey("Field4").Hidden(false).AllowHiding(false);
settings.ColumnSetting().ColumnKey("Field5").Hidden(false).AllowHiding(false);
settings.ColumnSetting().ColumnKey("Field6").Hidden(false).AllowHiding(false);
settings.ColumnSetting().ColumnKey("Field7").Hidden(false).AllowHiding(false);
settings.ColumnSetting().ColumnKey("Field8").Hidden(false).AllowHiding(false);
settings.ColumnSetting().ColumnKey("Field9").Hidden(false).AllowHiding(false);
settings.ColumnSetting().ColumnKey("Field10").Hidden(true).AllowHiding(false);
settings.ColumnSetting().ColumnKey("Field11").Hidden(true).AllowHiding(false);
});

When I add this code back in to hide columns, the alternating row colors no longer works.

I verified that the "iggriddatarendered" event is being fired.

Any ideas?

Thanks,
Tony