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