如何使用asp.net C＃在jqGrid Td中添加样式类

Question

I want Conditionaly change style of td in jqGrid, i tried lots of example but not worked, i think i am doing something wrong, please view my code and help me to find out correct code.

My Code is

$(function () {

    $("#dataGrid").jqGrid({
        url: 'client.aspx/load_Conversation',
        datatype: 'json',
        mtype: 'POST',

        serializeGridData: function (postData) {
            return JSON.stringify(postData);
        },

        ajaxGridOptions: { contentType: "application/json" },
        loadonce: false,
        reloadGridOptions: { fromServer: true },
        colNames: ['Conversation', 'adminStatus'],
        colModel: [{ name: 'Conversation', index: 'message', width: 245 }, { name: 'adminStatus', index: 'isAdmin' }, ],
        gridComplete: function () {
            var ids = jQuery("#dataGrid").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var status = jQuery("#dataGrid").jqGrid("getCell", ids[i], 'adminStatus');

                if (status == "False") {
                    $j('#' + ids[i]).removeClass("ui-widget-content");
                    $j('#' + ids[i]).addClass("ChangeStyle");
                }
            }
        },
        viewrecords: true,
        gridview: true,
        jsonReader: {
            records: function (obj) { return obj.d.length },
            root: function (obj) { return obj.d },
            repeatitems: false,
            caption: 'Live chat with us'
        }
    });
    $("#dataGrid").hideCol("adminStatus");
    $("#dataGrid").jqGrid('setGridHeight', 240);
});

My Code behind is

   public static List<Dictionary<string, object>> load_Conversation()
    {
        WebService wb= new WebService();
        DataTable dt = wb.Get();
        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
        Dictionary<string, object> row;
        foreach (DataRow dr in dt.Rows)
        {
            row = new Dictionary<string, object>();

            row.Add("Conversation", dr["messgae"]);
            row.Add("adminStatus", dr["isAdmin"]);
            rows.Add(row);
        }
        return rows;
    }

Answer 1

If I correcly understand format of data returned from the server you should remove gridComplete , remove index properties from colModel and to use cellattr in adminStatus if you need to change the style of <td> elements in adminStatus :

colModel: [
    { name: 'Conversation', width: 245 },
    { name: 'adminStatus', cellattr: function (rowId, val) {
         if (val === "False") {
             return " class='ChangeStyle'";
         }
     }}
]

You can see an example of very close usage of cellattr in the answer .

It could be important how you defines the CSS rule on ChangeStyle class. If you will don't see the expected results you have to include the definition of CSS rule of ChangeStyle class and the version of jqGrid which you use.

Answer 2

Add the following style and scripts

 <link type="text/css" href="http://jqueryrock.googlecode.com/svn/trunk/css/jquery-ui-1.9.2.custom.css" rel="stylesheet" />  
<link type="text/css" href="http://jqueryrock.googlecode.com/svn/trunk/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />  
<script type="text/javascript" src="http://jqueryrock.googlecode.com/svn/trunk/js/jquery-1.8.3.js"></script>  
<script type="text/javascript" src="http://jqueryrock.googlecode.com/svn/trunk/js/jquery-ui-1.9.2.custom.js"></script>  
<script src="http://jqueryrock.googlecode.com/svn/trunk/jqgrid/js/grid.locale-en.js" type="text/javascript"></script>  
<script src="http://jqueryrock.googlecode.com/svn/trunk/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>  

For More style class in jqGrid Td using asp.net c#