Question

how can I set a css class to the element jqgrid creates by using edittype: select? Here is my code:

$(window).load(function () {
            GetProjects();
        });

        function GetProjects() {
            jQuery("#tbl1").jqGrid({
                url: 'myurl',
                datatype: "json",
                mtype: 'POST',
                colNames: ['Project', 'Module', 'Description'],
                colModel: [
        { name: 'Project', index: 'Name', width: 90, editable: true, edittype: 'select', editoptions: { value: GetProjectOptions()} },
        { name: 'Name', index: 'Project.Name', width: 55, editable: true },
        { name: 'Description', index: 'Description', width: 90, editable: true }
    ],
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#nav1',
                sortname: 'Project.Name',
                viewrecords: true,
                sortorder: "desc",
                caption: "DDS Project Modules",
                jsonReader: {
                    repeatitems: false,
                    root: function (obj) { return obj; }
                },
                width: '500',
                loadonce: true,
                hidegrid: false,
                editurl: 'myurl'
            });
            jQuery("#tbl1").jqGrid('navGrid', '#nav1', { edit: false, add: false, del: false });
        }

        function AddRow() {
            jQuery("#tbl1").jqGrid('editGridRow', "new", { reloadAfterSubmit: false, closeAfterAdd: true });
        }

I’ve tried using classes: ‘cssClass’ in the colModel but that didn’t work.
Here is how the html is created:

<select name="Project" class="FormElement" id="Project" role="select" size="1">

Any suggestions? Thanks in advance!

Answer 1

You can define dataInit method of the editoptions. For example you can try the following code

editoptions: {
    value: GetProjectOptions(),
    dataInit: function (elem) {
        $(elem).addClass('ui-state-highlight');
    }
}

The result will be like the following: