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>

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");

            });

        });

Hi,

just FYI, the correct classes to add are "ui-ig-altrecord ui-iggrid-altrecord", not oddrow.

Thanks,

Angel

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

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

Thanks,
Tony

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,

That works. Thanks for checking into it.