How to add a style class in jqGrid Td using asp.net c#

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;
    }

Which version of jqGrid you use? Which fork of jqGrid you use ([free jqGrid](https://github.com/free-jqgrid/jqGrid), [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7)? You use `reloadGridOptions: { fromServer: true }` option existing only in free jqGrid. Do you really use free jqGrid 4.9.2 or not? You use `repeatitems: false` property in `jsonReader`. Is it really corresponds the format of the server response? — Oleg, Oct 10 '15 at 09:20
I just copied code from net, can you please tell me, how can i get jqGrid version info. thanks — user2695786, Oct 10 '15 at 09:27
You can't just copy code because of possible breaking of license agreement. You can open `jquery.jqgrid.min.js` or `jquery.jqgrid.src.js` file and see the version of jqGrid in the comments at the beginning of the file. You can install free jqGrid from [GitHub](https://github.com/free-jqgrid/jqGrid), [NuGet](https://www.nuget.org/packages/free-jqGrid), [npm](https://www.npmjs.com/package/free-jqgrid) or [bower](http://bower.io/search/?q=free-jqgrid). You can use direct URLs described [here](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs). — Oleg, Oct 10 '15 at 09:41
Could you include the server response which you use or include the source code of `load_Conversation`? You try to add `ChangeStyle` CSS style. Which CSS rule you defines for the class? You use `index` different as `name` in `colModel`. Why? Your server code can give the answer. One will see whether it's a bug or the requirement. — Oleg, Oct 10 '15 at 09:43
Which CSS rule you defines for the class? Which version of jqGrid you use? You need to open jquery.jqgrid.min.js or jquery.jqgrid.src.js file and see the version of jqGrid and the license in the comments at the beginning of the file. You should additionally write short comment after changing the text of your question. I could see occasionally that you added the code of `load_Conversation` to your question. — Oleg, Oct 10 '15 at 10:43
if you want to style just td then add #dataGrid tr td { background-color: #e9e9e9: } in style — Manraj, Oct 13 '15 at 08:44

score 1 · Answer 1 · edited May 23 '17 at 12:06

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.

edited May 23 '17 at 12:06

Community

1
1

answered Oct 10 '15 at 10:34

Oleg

220,925
34
403
798

.ChangeStyle { background-color:Red;} and i am using 4.1.1 version. – user2695786 Oct 10 '15 at 10:50
@user2695786: You should use `.ui-jqgrid .ChangeStyle { background: red; }` or `.ui-jqgrid .ChangeStyle { background-color: red; background-image: none }`. You should don't use retro versions like 4.1.1 published more as 4 years ago. It's the time when IE9 was just published and IE6-IE8 was used. – Oleg Oct 10 '15 at 11:07
@user2695786: Can the usage of more deep CSS rule like `.ui-jqgrid .ChangeStyle { background-color: red; background-image: none }` fix the problem? – Oleg Oct 12 '15 at 11:17

score 0 · Answer 2 · answered Oct 10 '15 at 09:25

0

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#

answered Oct 10 '15 at 09:25

Manraj

496
2
15

Have you refer the link which is mentioned – Manraj Oct 10 '15 at 09:35
Have u used
– Manraj Oct 10 '15 at 09:37
if you want to style just td then add #dataGrid tr td { background-color: #e9e9e9: } in style – Manraj Oct 10 '15 at 10:09
:) thanks dear if it helps. i will suggest you to refer how to design a table using css. Its very easy – Manraj Oct 10 '15 at 11:08
you can use it it conditonally also like in your code you are using .addClass("dataGrid tr td"); and in style it will be .dataGrid tr td { background-color: #e9e9e9: } – Manraj Oct 10 '15 at 11:35

How to add a style class in jqGrid Td using asp.net c#

2 Answers2