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
One more piece of information; The missing boarders for empty cells (mentioned above) is only seen using IE7 standards. I'm using IE 8, but using the developer tools (F12) to set standards to IE7. This emulates what we see in the web browser control.
I'm using MVC3, JQuery, Razor, and the latest infragistics fix for 11.1
I'm also using a theme from themeroller: Cupertino
Here is a screen shot. I do notice that some of the fields without data DO have borders, but in the name column and the column that contains the D, as well as the 4 columns to the right of the amount, do not. In the screen shot, there is a selected row, and a hovered row.
Any ideas?
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.
$("#grid1").live("iggriddatarendered", function (event, args) {
Hi,
just FYI, the correct classes to add are "ui-ig-altrecord ui-iggrid-altrecord", not oddrow.
Thanks,
Angel
That works. Thanks for checking into it.
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.
Let me know if this solution satisfies you.
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.