i've got script , style thats applied dynamically column values in webgrid. works fine until sort column , thats when classes or styles removed. i've tried code in _layout view..
<script type="text/javascript"> $(document).ready(function () { $("#tblwebgrid tr:not(:first)").each(function () { var aptstatus = $(this).find("td:nth-child(9)").html(); if (aptstatus == 'scheduled') { $(this).find("td:nth-child(9)").addclass("clsgreen"); } else { $(this).find("td:nth-child(9)").addclass("clsred"); } }); }); </script> <style type="text/css"> .clsgreen { color: green; font: bold 1em arial, helvetica, sans-serif; text-align: center; font-weight: bolder; margin: 0 auto; width: auto; } .clsred { color: red; font: bold 1em arial, helvetica, sans-serif; text-align: center; font-weight: bolder; margin:0 auto; width:auto; } how reload dom and/or prevent style being stripped dynamic tags?
you can wrap code applies styles in separate function, , pass name of function webgrid's ajaxupdatecallback parameter:
<script> function stylegrid(){ $("#tblwebgrid tr:not(:first)").each(function () { var aptstatus = $(this).find("td:nth-child(9)").html(); if (aptstatus == 'scheduled') { $(this).find("td:nth-child(9)").addclass("clsgreen"); } else { $(this).find("td:nth-child(9)").addclass("clsred"); } }); } $(document).ready(function(){ stylegrid(); }) </script> then in razor block:
var grid = new webgrid(data, ajaxupdatecallback: "stylegrid"); 