Develop Reference

How to add a class or id to a column in jqGrid

How do I add class or id in a column, actually I think this is the way I need to change the color of a "hover" in only one column, I tried some ways but failed.
jQuery(grid_selector).jqGrid({
url:urllst,
datatype: 'json',
height: 'auto',
width: 'auto',
ignoreCase: true,
colNames:['XX','XX','XX','XX','XX','XX','XX,'XX','XX','XX','XX?' ],
colModel:[
{name:"XX",index:"XX", width:100, sorttype:'text', viewable: true, frozen: true, focus: true,
stype:'text',
formoptions:{elmprefix:'*', label: 'XX:', rowpos:1, colpos:1},
editable:true,
editrules: {required: true},
edittype: 'custom',
editoptions: {style: "text-transform: uppercase",
'custom_element' : macro_uf_element,
'custom_value' : macro_uf_value,
},
It is very important whether it be by JavaScript if possible.

You can tell jqGrid to add a class to every cell of a column:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
Property: classes
Description: This option allow to add classes to the column. If more than one class will be used a space should be set. By example
classes:'class1 class2' will set a class1 and class2 to every cell on
that column. In the grid css there is a predefined class ui-ellipsis
which allow to attach ellipsis to a particular row. Also this will
work in FireFox too.
jQuery(grid_selector).jqGrid({
url:urllst,
datatype: 'json',
height: 'auto',
width: 'auto',
ignoreCase: true,
colNames:['XX','XX','XX','XX','XX','XX','XX','XX','XX','XX','XX?' ],
colModel:[
{name:"XX",index:"XX", width:100, sorttype:'text', viewable: true, frozen: true,
focus: true,
stype:'text',
formoptions:{elmprefix:'*', label: 'XX:', rowpos:1, colpos:1},
editable:true,
editrules: {required: true},
edittype: 'custom',
editoptions: {style: "text-transform: uppercase",
'custom_element' : macro_uf_element,
'custom_value' : macro_uf_value,
classes: 'your_class_here'
},

jqgrid rowobject value is undefined

I use the following code for bind the values in jqgrid.
And i create one link button for access the Particular Action Method.
I need to pass the firstcolumn value to the action method.
But ,If i use this Following href='#Url.Action("ViewApplicants", "HR")?JobsID="+rowObject[0]+" '.It show the undefined Value .How to solve this?
<div>
<table id="Jobtable"></table>
<div id="jQGridPager"></div>
<div id="dialog" title="View Job Detail"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#Jobtable").jqGrid({
url: '/HR/PassJsonJob/',
datatype: "json",
mtype: 'GET',
colNames: ['Job ID', 'Job Title', 'Job Experience', 'Job Location', 'ViewApplicants'],
colModel: [
{ name: 'JobsID', index: 'JobsID', width: 150, align: 'left', editable: true },
{ name: 'JobTitle', index: 'JobTitle', width: 150, align: 'left', editable: true },
{ name: 'JobExperience', index: 'JobExperience', width: 150, align: 'left', editable: true },
{ name: 'JobLocation', index: 'JobLocation', width: 150, align: 'left', editable: true },
{
name: 'ViewApplicants', index: 'ViewApplicants', width: 150, sortable: false,
formatter: function (cellvalue, options, rowObject) {
alert(rowObject)
return "<a href='#Url.Action("ViewApplicants", "HR")?JobsID="+rowObject[0]+"'>View Applicants</a>";
}
}
],
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
loadonce: true,
gridview: true,
pager: "#jQGridPager",
cellEdit: false,
rowNumbers: true,
width: 1000,
caption: 'Applied Jobs',
viewrecords: true
})
$('#Jobtable').jqGrid('navGrid', '#jQGridPager',
{
edit: true,
add: false,
del: false,
view: false,
search: false
});
});
</script>

It's important to know the format of the server response from the URL /HR/PassJsonJob/. The format of rowObject corresponds to the format of items from the server response. So it could be that rowObject.JobsID instead of rowObject[0] would correct way to access JobsID property. Because you use loadonce: true the format of rowObject could be rowObject[0] at the first load. Later, for example, at local paging or sorting of data, the format of rowObject will be object with JobsID property, so rowObject.JobsID will be correct.
So the usage of rowObject.JobsID or rowObject[0] || rowObject.JobsID could fix your problem.
One more option could be to use the property key: true in the definition of JobsID column in colModel. One can use the property only if JobsID contains unique values in every row. In the case jqGrid will use the value from JobsID column as rowid: the value of id attribute assigned to the rows (<tr> elements) of the grid. In the case one could use options.rowId to access the JobsID value.
UPDATED: One more option exists in free jqGrid fork, which I develop since the end of 2014. The 2-d parameter (options) of the custom formatter has the property rowData, which contains the same information like rowObject, but it has always object format. Thus it's safe to use options.rowData.JobsID instead of rowObject[0] || rowObject.JobsID. One don't need to use the 3-d parameter of the the custom formatter at all. Free jqGrid didn't changed the format of the 3-d parameter to have the best upwards compatibility to the previous versions of jqGrid.

Formatted HTML data in Kendo grid column

Hi I have a Kendo Grid created in jquery with following code:
Kendo Grid:
$('#divFolderNotes').kendoGrid({
dataSource: data
batch: true,
columns: [
{ field: "Text", title: "Note Text" },
{ field: "CreatedByDisplayName", width: '190px', title: "Created By" },
{ field: "CreatedDateTime", width: '190px', title: "Created Datetime" },
],
scrollable: true,
sortable: true,
reorderable: true,
resizable: true,
height: 250,
selectable: "row",
autoSync: true,
editable: true,// "inline",
navigatable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
})
The problem:
First column Note Text will be having values which will be containing HTML formatted data.
For a better idea below is an example:
Right Now the data is displayed as :
First Name : Nitin <br/> Second Name : Rawat
But I want the data to be displayed as :
First Name : Nitin
Second Name : Rawat
Also , Note Text column will be edited through inline editing so during editing mode also I want the data to be displayed as :
First Name : Nitin
Second Name : Rawat
Any help will be highly appreciated.

Set the encoded attribute of the column to false to disable automatic HTML encoding.
From the doc page:
If set to true the column value will be HTML-encoded before it is
displayed. If set to false the column value will be displayed as is.
By default the column value is HTML-encoded.
Changed code:
$('#divFolderNotes').kendoGrid({
dataSource: data
batch: true,
columns: [
{ field: "Text", title: "Note Text", encoded: false }, #<------ Edit Here
{ field: "CreatedByDisplayName", width: '190px', title: "Created By" },
{ field: "CreatedDateTime", width: '190px', title: "Created Datetime" },
],
scrollable: true,
sortable: true,
reorderable: true,
resizable: true,
height: 250,
selectable: "row",
autoSync: true,
editable: true,// "inline",
navigatable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
})
EDIT: Since the line break should be preserved when editing, maybe you should just replace the <br /> tags with a line break character. That way it will show as an actual line break in form fields. Here is an example: jQuery javascript regex Replace <br> with \n
It might be better to do this when the user submits the data initially, but, if that isn't an option you can replace it in JS when displaying the data.

You can try kendo template.
for these Please Try Following links
http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.template
http://docs.telerik.com/kendo-ui/api/web/grid
hope this will help.

Disable checkbox select on row click in jqGrid

I'm using jqGrid in my client side development. The truth is that I didn't choose it, it was integrated by other developer in entry development level and now there it is late to do something about that.
There is some functionality that I'm trying to change. I have a column of checkboxes and checkboxes are also selected on row click. I want this to work in another way - there must be no connection between checkbox and row state - so I want to disable checkbox select on row click. Is there any way to do this using the plugin?
$(this.options.grid).jqGrid({
height: 'auto',
width: width,
shrinkToFit: true,
colNames: columns.colNames,
colModel: columns.colModel,
rowNum: pageSize,
rowList: pageSizeValues,
viewrecords: true,
multiselect: true,
multiboxonly: true,
deepempty: true,
subGrid: false,
scrollrows: true,
altRows: true,
altclass: 'ui-widget-content-alt-row',
datatype: 'clientSide',
pager: pager,
toppager: false,
sortname: this.options.sortByVal,
sortorder: this.options.sortDirectionVal,
sortable: true,
jsonReader: reader,
editurl: 'clientArray',
beforeSelectRow: function(rowId, e) {
return true;
},
onSelectRow: function(rowId, status) {
return true;
},

jqGrid Toolbar Searching on Decimals

I am using jqGrid with toolbar searching enabled. I have configured my search option as 'eq'. However, when I input a decimal number on the search bar, the valid record does not show.
For example:
When I input 12, the record with 12.00 shows, this is correct.
When I input 12.50 the record with 12.50 does not show, this is incorrect.
I experimented with sorttype as number, formatter with decimal places, but I can't seem to get it to work.
Grid definition:
$("#productListingGrid").jqGrid({
datastr: products,
datatype: 'jsonstring',
jsonReader: {
root: 'products',
repeatitems: false,
cell: 'products.branches',
id: 'productNumber'
},
loadonce: true,
// -1 no longer works: https://github.com/tonytomov/jqGrid/issues/317
rowNum: 10000,
height: 580,
width: 1250,
colNames: columnNames,
colModel: columnModel,
sortname: 'productNumber',
sortorder: "asc",
caption: 'PRODUCT LIST',
headertitles: true,
altRows: true,
altclass: 'gridStripe',
gridview: true,
footerrow: true,
ignoreCase: true,
shrinkToFit: false
});
My column model definition:
{ name: 'totalValue' , width:55, align:'right', formatter: 'currency', searchoptions:{sopt:['eq']} }
Code to enable the toolbar search:
grid.jqGrid('filterToolbar', {searchOnEnter: false});
May I know if this is a current limitation?
Thank you very much.
Note:
I'm currently using the following:
jQuery - 1.9.1
jQuery UI - 1.10.2
jqGrid - 4.4.5

I got this to work by setting the sorttype value as 'float'.
From
{ name: 'totalValue' , width:55, align:'right', formatter: 'currency', searchoptions:{sopt:['eq']} }
to
{ name: 'totalValue' , width:55, align:'right', sorttype:'float', formatter: 'currency', searchoptions:{sopt:['eq']} }
I find it quite counter-intuitive to set a sort type for searching to work correctly. It could have been better to have a data type instead.