I'm using MVC3 and the Razor View engine.
I have a jquery grid defined in my view. When not using rowtemplating the styles apply correctly and I have alternating row colors. However, once I apply row templating I loos that and even the field borders aren't right as they only appear around fields that have data. I suspect they are white around non-data containing fields.
If I could figure out the appropriate styles to apply with my row tempate so that the rows/cells appear the same as without, that would be great, but I'm a little lost in the mountain of CSS that is used by all of the jquery controls.
If any one can point me in the right direction, I would appreciate it.
Thanks,Tony
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) {
Let me know if this solution satisfies you.
Thanks,
No, this one is fine.
We are looking into the issue.
Do I need to open a different forum thread for this? (see last post).
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?