0

i m using a jqgrid on asp.net mvc... i have a specific requirement....The data in the grid is list of values that are to be set on each row... and each row has a Date column... While displaying the grid, i want a different row color on sunday and saturday.. while the rest of the rows are white.. How to achieve this in jquery jqgrid?

skaffman
  • 398,947
  • 96
  • 818
  • 769
Rakesh
  • 153
  • 3
  • 12

1 Answers1

2

You can "bring colors" in your grid with respect of setCell method of jqGrid (see this answer as an example) or jQuery.addClass, jQuery.css (see this and this). You should do this after the grid contain is loaded, for example, inside of your loadComplete event handler.

If you want set background-color style on the cell you should understand one small problem. The class 'ui-widget-content' used for every grid row already defines the background-color per background style (!!! not per background-color). So to have effects you should make changes of the background-color style in one from the following ways: 1) just use background: yellow instead of background-color: yellow (see this). 2) remove 'ui-widget-content' class with jQuery.removeClass('ui-widget-content') (see this); 3) change style of the row more explicit like $("#"+rowid)[0].style.backgroundColor = "yellow" (see this as an example). Choose the ways which you prefer.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • @Rakesh: You don't commented this answer. Is this want you want? You can use for example custom formatting (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter) to place the color in the date column. For example see a simple code in http://stackoverflow.com/questions/3054811/add-multiple-input-elements-in-a-custom-edit-type-field/3055626#3055626 additionally to more complex http://stackoverflow.com/questions/4069471/jqgrid-setting-to-colums-cells-bg-color-when-clicked-columnheader/4070790#4070790 – Oleg Nov 15 '10 at 12:34
  • hi, sorry for late reply.. i just now figured out how to do this.. here is what i did.. by using grid complete. gridComplete: function () {var ids = $("#list").getDataIDs(); for (var i = 0; i < ids.length; i++) {var cell = $("#list").getCell(ids[i], "WeekDay"); if (cell == "Sunday" || cell == "Saturday") { $(this).jqGrid('setRowData', ids[i], false, { background: '#086da1' }); // $("#" + ids)[i].style.backgroundColor = "yellow";}}} but one thing i noticed is that i was not able to achieve result with style.background.. the javascript was throwing some error..u can see the commented line – Rakesh Nov 16 '10 at 14:33