Related
In Jqgrid my column is as below,
{name : 'name',editable:true,width:120,sorttype:'string'},
but it provides case sensitive sorting as below.
- product Sales Agent
- email Queue
- default Queue
- Trouble Ticket
- Billing & Payment
I tried with ignoreCase:true also but it does not work.
I need sorting to be done by ignoring case as shown below,
- Trouble Ticket
- product Sales Agent
- email Queue
- default Queue
- Billing & Payment
Any idea how this can be possible ?
colNames:['questionId','Name','Answer','Show','Edit','Option'],
colModel : [
{name : 'questionId',sorttype:'int',align:'left',editable:true, hidden:true},
{name : 'name',editable:true,width:120,sorttype:'text',ignoreCase:true,soratble:true}, {name : 'answer',align:'left',width : 400,sorttype:'string',editable:true},
{name : 'enable',align:'center',width : 60,sorttype:'string',editable:true, formatter : formatEnable},
{name : 'edit',editable:false, formatter:addEditButton,align:'center',width:50},
{name : 'feedbackOptions.optionId',editable:false, align:'center', hidden:true},
],
jsonReader : {root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
multiselect : true,
height: '170px',
paging : true,
emptyrecords : "<spring:message code='label.norecords'/>",
viewrecords : true,
rowNum : 10,
rowList : [10,20,30],
pager : "#pager",
loadonce : true,
footerrow : false,
userDataOnFooter : true,
altRows : true,
loadonce:true,
loadComplete: function (data) {
$('#buttonDiv').show();
}
});
jQuery("#list").jqGrid("navGrid","#pager",{del:false,add:false,edit:false, search:false, refresh:false});
},
error:function(xhr,ajaxoptions,thrownError){
}
});
}
Try to change sorttype:'string' in sorttype:'text'.
Add IgnoreCase: true to the options of jqgrid instead of the column.
if you are using 3.8 version of jqGrid. try to change as follows on grid.base.js
Make _usecase field to false and try.
from : function(source){
....
_usecase=false,
}
The same issue been resolve on the later version hence no need to change over there.
I know this is an old question, but I dropped here by accident while working. How if you try in your column like this?
Your column right now (or wherever the question was written):
{name : 'name',editable:true,width:120,sorttype:'text',ignoreCase:true,sortable:true}
The column with ignoreCase function using some JS trick:
{name:'name', editable:true, width:120, sortable:true, sorttype: function(cell,obj){
return cell.toLowerCase()}
};
Notice cell contains the String value of the cell, so you have to work with that when you want to order the elements inside the jqGrid.
Hope it helps
When css attributes are set during initialization it works fine, colours and backgrounds in cells also change when initiated from a function. But when I sort the columns all colours set from function disappear and go back to the normal grid.
<script>
var Mydata =[
{
"id":"560058",
"nm" : "L 41971",
"temp" : "21.2",
"ignition" : "off",
"pos_x" : "55.2024832",
"pos_y" : "24.9640256",
"drv" : "",
"pos_s" : "0",
"param24" : "0",
"param240" : "0",
"pwr_ext" : "12.825"
},
{
"id":"560059",
"nm" : "L 41972",
"temp" : "21.2",
"ignition" : "off",
"pos_x" : "55.2024832",
"pos_y" : "24.9640256",
"drv" : "",
"pos_s" : "0",
"param24" : "0",
"param240" : "0",
"pwr_ext" : "12.825"
}
];
var grid = $("#live_view");
grid.jqGrid({
height: '100%',
width: '700',
datatype: "local",
loadonce: true,
data : Mydata,
gridview: true,
colNames: ['Name', 'Temperature', 'Ignition', 'lat', 'lon', 'Driver', 'Speed', 'param24', 'movement', 'pwr_ext'],
colModel:[
{name:'nm',index:'nm'},
{name:'temp',index:'temp'},
{name:'ignition',index:'ignition'},
{name:'pos_x',index:'pos_x'},
{name:'pos_y',index:'pos_y'},
{name:'drv',index:'drv'},
{name:'pos_s',index:'pos_s'},
{name:'param24',index:'param24'},
{name:'param240',index:'param240'},
{name:'pwr_ext',index:'pwr_ext'},
],
rowNum:100,
rowList:[100,200,300],
pager: '#pager2',
sortname: 'param240',
viewrecords: true,
sortorder: "desc",
caption:"Vertex Live View",
loadComplete: function() {
grid.jqGrid('setCell',"560058","nm","",color:'red'});
},
});
$("#live_view").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
$("#cc").click(function (){
$("#live_view").jqGrid('setCell',"560058","nm","",{color:'blue'});
})
</script>
Change Colour
When you sort, it recreates the html. For all jqgrid knows, the column you modified might not even be visible on the current page after sorting. Bottomline, you will need to reapply the colours.
You could peruse the jqGrid api, to see if they allow setting the colour of the cell from the model data. I don't think so though.
I am creating a Extjs grid. In which most of the column is editable. what i need is if user change any column value on blur of that i will call my method do some calculation based on other column value.and replace the column value with calculated values.code is here.
var incomeTaxOverrideModel = new Ext.grid.ColumnModel([{
id : 'fromDate',
header : "From Date",
dataIndex : 'fromDate',
width : 80,
renderer : drenderer,
editor : this.fromDateEditor
}, {
id : 'toDate',
header : "To Date",
dataIndex : 'toDate',
width : 80,
renderer : drenderer,
editor : this.toDateEditor
}, {
id : 'rawTax',
header : "Raw Tax",
dataIndex : 'rawTax',
width : 80,
align : 'right',
selectOnFocus : true,
editor : new Ext.form.NumberField({"blur":this.calculateTaxForword}),
renderer : Gts.payItemRenderer()
}, {
id : 'surcharge',
header : "Surcharge",
dataIndex : 'surcharge',
width : 80,
align : 'right',
selectOnFocus : true,
editor : new Ext.form.NumberField({}),
renderer : Gts.payItemRenderer()
}, {
id : 'cess',
header : "Cess",
dataIndex : 'cess',
width : 80,
align : 'right',
selectOnFocus : true,
editor : new Ext.form.NumberField({}),
renderer : Gts.payItemRenderer()
}, {
id : 'totalTax',
header : "Total Tax",
dataIndex : 'totalTax',
width : 80,
align : 'right',
selectOnFocus : true,
editor : new Ext.form.NumberField({}),
renderer : Gts.payItemRenderer()
}, {
id : 'taxAmount',
header : "Taxable Income",
dataIndex : 'taxAmount',
width : 100,
align : 'right',
selectOnFocus : true,
editor : new Ext.form.NumberField({}),
renderer : Gts.payItemRenderer()
}, {
id : 'remarks',
header : "Remarks",
dataIndex : 'remarks',
width : 250,
editor : new Ext.form.TextField({})
}, {
id : 'modifiedDate',
header : "Modified On",
dataIndex : 'modifiedDate',
width : 100,
renderer : Ext.util.Format.dateRenderer('d M Y h:i:s A'),
width : 150
}
]);
this.itoGrid = new Ext.grid.EditorGridPanel({
store : this.itoStore,
cm : incomeTaxOverrideModel,
autoExpandColumn : 'remarks',
autoScroll : true,
containerScroll : true,
frame : false,
stripeRows : true,
width : 830,
height : 233,
clicksToEdit : 1,
layout : 'fit',
loadMask : true,
tbar : [this.addAction, this.deleteAction],
trackMouseOver : true
});
i created on method
calculateTaxForword :function(){
console.log(this.itoGrid)
//console.log(this.itoGrid.getStore().getModifiedRecords())
}
but its not coming anything.i have to calculate value based on raw tax.surcharge and cess so i need all the value in my method.how to do this any one please help
The CellEditing plugin has a beforeedit event that you can listen to:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.CellEditing-event-beforeedit
This will give you access to things like:
Parameters
editor : Ext.grid.plugin.CellEditing
e : Object
An edit event with the following properties:
grid - The grid
record - The record being edited
field - The field name being edited
value - The value for the field being edited.
row - The grid table row
column - The grid Column defining the column that is being edited.
rowIdx - The row index that is being edited
colIdx - The column index that is being edited
cancel - Set this to true to cancel the edit or return false from your handler.
eOpts : Object - The options object passed to Ext.util.Observable.addListener.
Each column object has editingPlugin.activeRecord property with record itself.
I am trying to use flexigrid plugin for jquery, the problem is that I also want to use the plugin fancybox, and this plugin uses jQuery 1.4.3, but flexigrid doesn't seem to work with that version of jquery.
When I roll back to the old jquery version that comes with flexigrid the grid does work but fancybox doesn't.
This is the code i am using:
$("#grid1").flexigrid
(
{
url: 'php/get.php',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
{display: 'Email', name : 'email', width : 120, sortable : true, align: 'left'},
{display: 'tID', name : 'tid', width : 130, sortable : true, align: 'left'},
{display: 'Active', name : 'numcode', width : 80, sortable : true, align: 'right'}
],
buttons : [
{name: 'Add', bclass: 'add', onpress : doAction},
{separator: true},
{name: 'Delete', bclass: 'delete', onpress : doAction},
{separator: true},
{name: 'Activate', bclass: 'activate', onpress : doAction},
{separator: true},
{name: 'Deactivate', bclass: 'deactivate', onpress : doAction},
{separator: true}
],
searchitems : [
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: 'XXX',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
}
);
</script>
And the php response looks like this:
{
page: 1,
total: 3,
rows: [
{id:'28',cell:['28','test','test','test','1']},
{id:'27',cell:['27','test','test','test','1']},
{id:'26',cell:['26','etrer','ter','trt','0']}]
}
I am using firebug and it doesn't show any js error.
Is there a way to use flexigid with jquery 1.4.3?
Try rendering your JSON using double quotes, not single quotes.
Both plugins seems to work with v1.3.2
I think I have both plugins working with jQuery 1.6.1. Obviously it depends on both flexigrid and fancybox jQuery plugins and an example JSON file that I have called flexigrid.json. If you download those plugins and make sure the src and href links to the correct locations for the JavaScript and CSS and create a file called flexigrid.json with the following content:
{
"page": 1,
"total": 3,
"rows": [
{"id":28,"cell":[28,"test","test","test",1]},
{"id":27,"cell":[27,"test","test","test",1]},
{"id":26,"cell":[26,"etrer","ter","trt",0]}]
}
Note: The JSON in your example is not valid (as #Josh pointed out already). You can run in through an online parser to see the errors.
Here is the example page with both plugins:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="flexigrid/js/flexigrid.pack.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="flexigrid/css/flexigrid.pack.css"/>
<script src="fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css"/>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript">
$(function(){
function doAction() {}
$("#grid1").flexigrid({
url: 'flexigrid.json',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
{display: 'Email', name : 'email', width : 120, sortable : true, align: 'left'},
{display: 'tID', name : 'tid', width : 130, sortable : true, align: 'left'},
{display: 'Active', name : 'numcode', width : 80, sortable : true, align: 'right'}
],
buttons : [
{name: 'Add', bclass: 'add', onpress : doAction},
{separator: true},
{name: 'Delete', bclass: 'delete', onpress : doAction},
{separator: true},
{name: 'Activate', bclass: 'activate', onpress : doAction},
{separator: true},
{name: 'Deactivate', bclass: 'deactivate', onpress : doAction},
{separator: true}
],
searchitems : [
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: 'XXX',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
});
$("a#example1").fancybox({
'titleShow' : false
});
$("a#example2").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack'
});
$("a#example3").fancybox({
'titleShow' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<table id="grid1"><tr><td></td></tr></table>
<p>Different animations - 'fade', 'elastic' and 'none'<br />
<a id="example1" href="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg">
<img alt="example1" src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026_m.jpg" />
</a>
<a id="example2" href="http://farm3.static.flickr.com/2489/4234944202_0fe7930011.jpg">
<img alt="example2" src="http://farm3.static.flickr.com/2489/4234944202_0fe7930011_m.jpg" />
</a>
<a id="example3" href="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg">
<img alt="example3" src="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a_m.jpg" />
</a>
</p>
</body>
</html>
Note: This will not work locally when testing in Chrome 13 due to the Same origin policy security restriction. You can see the error in the console Origin null is not allowed by Access-Control-Allow-Origin. You will need to serve to the example page and JSON from a proper web server.
Hope this helps.
I am working on the same issue. I found the below links helpful to get started.
Core issue - from groups.google.com
"As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently. Avoid frequent hand-editing of JSON data for this reason. JSON is a data-interchange format with syntax rules that are stricter than those of JavaScript's object literal notation. For example, all strings represented in JSON, whether they are properties or values, must be enclosed in double- quotes. For details on the JSON format, see http://json.org/.
Basically you have to be careful with your json now, and ensure its formatted correctly. I would guess its related to this. Check the json.org site and check your JSON to make sure its correct."
http://simonwillison.net/2006/oct/11/json/
http://jsonformatter.curiousconcept.com/#jsonformatter
My problem now is trying to send the ID (editable: false) of a row when editing that row.
For example, i have a grid with columns userid(editable: false), username(editable: true), firstname(editable: true), lastname(editable: true). When editing the row the grid is only sending the parameters username, firstname and lastname. In the server side i need the userid to know to which user i've tu apply those new values.
the editUrl looks like:
editurl : CONTEXT_PATH+'/ajax/admin/savePart.do?category=1',
Thanks
This is the full code:
$.jgrid.useJSON = true;
//http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3Acommon_rules
$(document).ready(function() {
//alert(CONTEXT_PATH);
var lastsel;
jQuery("#rowed3").jqGrid(
{
url : CONTEXT_PATH+'/ajax/getPartesByCategory.do?catid=<s:property value="categoryId" />',
//url : '/autoWEB/text.html',
datatype: "json",
ajaxGridOptions: { contentType: "application/json" },
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
headertitles: true,
colNames : [ 'ID', 'Pieza', 'Disponible'],
colModel : [ {
name : 'piezaId',
index : 'piezaId',
align : "right",
width : 50,
editable : false,
required : true
}, {
name : 'descripcion',
index : 'descripcion',
width : 390,
editable : true,
required : true
}, {
name : 'disponible',
index : 'disponible',
width : 80,
editable : true,
edittype : 'select',
editoptions:{value:"0:No;1:Si"},
required : true
} ],
rowNum : 20,
rowList : [ 20, 40, 60, 80 ],
pager : '#prowed3',
sortname : 'piezaId',
postData: {piezaId : lastsel},
mtype:"POST",
viewrecords : true,
sortorder : "desc",
onSelectRow : function(id) {
if (id && id !== lastsel) {
jQuery('#rowed3').jqGrid('restoreRow', lastsel);
jQuery('#rowed3').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl : CONTEXT_PATH+'/ajax/admin/savePieza.do?categoria=<s:property value="categoryId" />',
caption : "Piezas"
});
jQuery("#rowed3").jqGrid('navGrid', "#prowed3", {
edit : false,
add : false,
del : false
});
})
in your onSelectRow callback, you can modify the editUrl to be whatever you want, including passing in the ID you need.
$("#rowed3").jqGrid('setGridParam', {editurl:'whatever/url/you/need/with/the/id'});
jqGrid will add all the other nececessary params to that editurl for you.
You can use
hidden: true, editable: true, editrules: { edithidden: false }, hidedlg: true
in the definition of the piezaId (ID) column. The parameter hidedlg is currently not real needed, but can be useful if you decide the use other jqGrid features.
Passing values in the GET string worked for me.
editurl: '/ajax/update?line=1',