I am using jquery grid version 4.4.1 . I have used multiselect: true option to enable the checkboxes for all the rows. I am also using 2 level grouping i.e grouping by 2 fields. But i am not getting the checkboxes for those grouping headers. only my actual records are getting checkboxes. Please help me to know if there is any way we can use it.
<code> grouping: true,
groupingView : { groupField : ['moduleName', 'subModuleName'],
groupColumnShow : [false, false],
groupText : ["<b>{0} </b>","<b>{0} </b>"],
groupCollapse : true,
groupOrder: ['asc', 'asc'],
The groupText : field
</code>
Related
Using the number formatter like below to format the JQgrid number with decimalSeparator(,)& decimalPlaces(2)
formatter: 'number', formatoptions :{decimalSeparator: ',', decimalPlaces:2}
after enter the value as 134,56 in grid it was showing as 'NaN'.
please help me how to resolve this issue.
The easy way to display correct the number in case you save to database is to set reloadAfterSubmit to true in navigator or in editGridRow method like this
$("#jqGrid").navGrid("#jqGridPager",{ edit: true, add: true },
// edit options
{ reloadAfterSubmit : true },
// add options
{ reloadAfterSubmit : true }
);
How to disable a particular column using handsontable in handsontable.I want first column only editable other three columns get disable.I'm using readonly true for three columns but it's not work how to disable....
columns: [
{
type:'handsontable',
handsontable: {
colHeaders: ['EmployeeNo','EmployeeName','Department','Designation'],
data: manufacturerData,
columns:[{},{readOnly: true},
{
readOnly: true
},
{
readOnly: true
}]
}
},
{}]
In Project i do it with this line of codes.
cells : function(row, col, prop) {
var cellProperties = {};
if (col > 0) {
cellProperties.readOnly = true;
}
else
{
cellProperties.readOnly = false;
}
return cellProperties;
}
You can find working example of it on given link. but give example is for set a row to readonly. http://handsontable.com/demo/conditional.html
Your code is working properly. Please see JSFiddle with approach similar to you.
$("#test").handsontable({
startRows: 1,
startCols: 1,
rowHeaders: true,
colHeaders: true,
minSpareCols: 0,
minSpareRows: 0,
contextMenu: false,
fillHandle: false,
outsideClickDeselects: false,
removeRowPlugin: false,
currentRowClassName: 'currentRow',
currentColClassName: 'currentCol',
columnSorting: true,
colHeaders: ['Col1','Col2','Col3','Col4'],
columns: [{},
{readOnly: true},
{readOnly: true},
{readOnly: true}]
});
Working link : http://jsfiddle.net/rvd61fuy/
Let me know, if you are facing anyother issue.
To disable you could make the cell/column readonly and maybe even set the background color to a grey(to give a special effect).Both the methods i.e the one where you use readonly:true in the column declaration when initializing the handsontable and also the one where you use cell properties and use conditions to determine if you need to set a cell to read only when the table is being rendered,both methods seem to be working for me.You need to instantiate your HOT correctly, that may be the problem. Also when using cell properties you needn't use cellProperties.readOnly = false as by default the cells are not read only unless you have coded for that seperately. If you need further assistance let me know.
Also check that you have the latest version of handsontable. I ran into problems trying to implement readonly on cells which had checkbox columns with erratic results.
Using the version below solved my issues (below is what I used in my HTML page)
<script src="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">
I am using jQGrid Latest version in my project.following is complete configuration that i configured.
jQuery("#list").jqGrid( {
url : 'Link.do?method=findAllBrand',
mtype : 'GET',
height : 350,
datatype : "xml",
colNames : [ 'Name' ],
colModel : [ {
name : 'name',
index : 'name',
width : 620
} ],
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : 'id',
sortorder : "desc",
viewrecords : true,
multiselect : true,
imgpath : 'themes/base/images',
caption : "Brand (s) Summary Grid",
pager : #pager,
cache : false,
onSelectRow : function(id) {
}
});
I am getting following data in form of xml from server :
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><rows><page>1</page><total>4</total><records>75</records><row id="BRD00005"><cell>AEG</cell></row><row id="BRD00010"><cell>ARC</cell></row><row id="BRD00006"><cell>Aga</cell></row><row id="BRD00007"><cell>Allenzi </cell></row><row id="BRD00008"><cell>Amana</cell></row><row id="BRD00009"><cell>Andi</cell></row><row id="BRD00011"><cell>Arda</cell></row><row id="BRD00012"><cell>Ariston</cell></row><row id="BRD00013"><cell>Asko</cell></row><row id="BRD00014"><cell>Baumatic</cell></row><row id="BRD00015"><cell>Bendix</cell></row><row id="BRD00003"><cell>Blanco</cell></row><row id="BRD00001"><cell>Bosch</cell></row><row id="BRD00004"><cell>Chef</cell></row><row id="BRD00016"><cell>Damani</cell></row><row id="BRD00017"><cell>Davell</cell></row><row id="BRD00018"><cell>Delonghi</cell></row><row id="BRD00019"><cell>Dishlex</cell></row><row id="BRD00020"><cell>Electrolux</cell></row><row id="BRD00021"><cell>Emilia</cell></row><row id="BRD00022"><cell>Euro</cell></row><row id="BRD00023"><cell>Eurolec</cell></row><row id="BRD00024"><cell>Euromaid</cell></row><row id="BRD00002"><cell>F&P</cell></row><row id="BRD00027"><cell>FP</cell></row><row id="BRD00025"><cell>Fagor</cell></row><row id="BRD00026"><cell>Fisher And Paykel</cell></row><row id="BRD00028"><cell>Franke</cell></row><row id="BRD00030"><cell>GE</cell></row><row id="BRD00034"><cell>GVA</cell></row><row id="BRD00029"><cell>Gaggenau</cell></row><row id="BRD00031"><cell>Glem </cell></row><row id="BRD00032"><cell>Glem Gas</cell></row><row id="BRD00033"><cell>Glemgas</cell></row><row id="BRD00035"><cell>Haier</cell></row><row id="BRD00036"><cell>Hisense </cell></row><row id="BRD00037"><cell>Hitachi</cell></row><row id="BRD00038"><cell>Hoover</cell></row><row id="BRD00039"><cell>Hotpoint</cell></row><row id="BRD00040"><cell>IAG</cell></row><row id="BRD00041"><cell>Ilve</cell></row><row id="BRD00042"><cell>Indesit</cell></row><row id="BRD00043"><cell>Jenn Air</cell></row><row id="BRD00044"><cell>Kelvinator </cell></row><row id="BRD00045"><cell>Kleenmaid</cell></row><row id="BRD00047"><cell>LG</cell></row><row id="BRD00046"><cell>La Germania</cell></row><row id="BRD00048"><cell>Liebherr</cell></row><row id="BRD00049"><cell>Linea</cell></row><row id="BRD00050"><cell>Lofra</cell></row><row id="BRD00051"><cell>Maytag</cell></row><row id="BRD00052"><cell>Midea</cell></row><row id="BRD00053"><cell>Miele</cell></row><row id="BRD00054"><cell>NEC</cell></row><row id="BRD00055"><cell>Neff</cell></row><row id="BRD00056"><cell>Nobel</cell></row><row id="BRD00057"><cell>Omega</cell></row><row id="BRD00058"><cell>Onix</cell></row><row id="BRD00059"><cell>Panasonic </cell></row><row id="BRD00060"><cell>Robinhood</cell></row><row id="BRD00061"><cell>Sagi</cell></row><row id="BRD00062"><cell>Samsung</cell></row><row id="BRD00063"><cell>Seimen </cell></row><row id="BRD00064"><cell>Sharp</cell></row><row id="BRD00065"><cell>Simpson</cell></row><row id="BRD00066"><cell>Smeg</cell></row><row id="BRD00067"><cell>St George</cell></row><row id="BRD00068"><cell>Technika</cell></row><row id="BRD00069"><cell>Techno</cell></row><row id="BRD00070"><cell>Technogas</cell></row><row id="BRD00071"><cell>Teka</cell></row><row id="BRD00072"><cell>Thor</cell></row><row id="BRD00073"><cell>Vintec</cell></row><row id="BRD00074"><cell>Westinghouse</cell></row><row id="BRD00075"><cell>Whirlpool</cell></row></rows>
I have modified the pager parameter as suggested by user Oleg in the other post.but still the pager is not working as expected. initially it shows only the 10 data of the record , when i click on next it does nothing.
what did i do wrong
Thank You
Mihir Parekh
The value of pager option must be quoted: pager : "#pager". You use datatype: "xml" without loadonce: true. In the case your server (url : 'Link.do?method=findAllBrand') is responsible for paging and sorting. If the user click on the next page new request to the server with the corresponding parameters page=2.
Typically the server should return the number of items which corresponds page and rows parameters. The XML response contains much more items. I suppose that the server returns all items independent from the requested page. In the case you should include loadonce: true. In the case the client code (JavaScript code of jqGrid) will do paging and sorting for you. If you use loadonce: true option you can remove the part
<page>1</page><total>4</total><records>75</records>
from the XML data returned from the server.
Additionally I would recommend you to consider to change to use JSON instead of XML whenever it's possible. In the case you could reduce the representation of items like
<rows>
<row id="BRD00022"><cell>Euro</cell></row>
<row id="BRD00002"><cell>F&P</cell></row>
<row id="BRD00026"><cell>Fisher And Paykel</cell></row>
</rows>
to
[["Euro","BRD00022"],["F&P","BRD00002"],["Fisher And Paykel","BRD00026"]]
So you can reduce the size of transferred data.
Additionally, like I wrote you in the comment to your previous question, you should replace sortname : 'id' to sortname : 'name' bacsue your grid don't have the column with the name "id". The option sortorder : "desc" should be probably removed.
You should remove deprecated option imgpath and remove option cache which not exist in jqGrid too. Instead of that I strictly recommend you to add gridview: true option and autoencode: true. If you use autoencode: true you will don't need to use HTML encoding (converting F&P to F&P on the server side).
UPDATED: The demo demonstrate how the grid could looks like:
I included toolbar filter and advanced searching in the grid to show how easy one can implement the features if one uses loadonce: true.
I am using jQGrid Latest version in my project.following is complete configuration that i configured.
jQuery("#list").jqGrid( {
url : 'Link.do?method=findAllBrand',
mtype : 'GET',
height : 350,
datatype : "xml",
colNames : [ 'Name' ],
colModel : [ {
name : 'name',
index : 'name',
width : 620
} ],
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : 'id',
sortorder : "desc",
viewrecords : true,
multiselect : true,
imgpath : 'themes/base/images',
caption : "Brand (s) Summary Grid",
pager : $('#pager'),
cache : false,
onSelectRow : function(id) {
}
});
I am getting following data in form of xml from server :
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><rows><page>1</page><total>1</total><records>4</records><row id="BRD00003"><cell>Blanco</cell></row><row id="BRD00001"><cell>Bosch</cell></row><row id="BRD00004"><cell>Chef</cell></row><row id="BRD00002"><cell>F&P</cell></row></rows>
i know that in the last cell of last row is creating problem , because it contains & char which has special meaning in the xml. however i have escaped sequence the whole xml using Apache commons lang library using below function.
toXml = StringEscapeUtils.escapeXml(toXml);
and the resulting string is
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><rows><page>1</page><total>1</total><records>4</records><row id="BRD00003"><cell>Blanco</cell></row><row id="BRD00001"><cell>Bosch</cell></row><row id="BRD00004"><cell>Chef</cell></row><row id="BRD00002"><cell>F&P</cell></row></rows>
still i got the same error in Mozilla firefox latest version and in chrome , ie 7,8 also.
I have to show you this special characters in the gird so how can i solve this problem ?
Thank You
Mihir Parekh
i am generating the xml from server side.
Then escape each text node and each attribute value separately, it's all simple as that.
I recommend you to use JSON format instead of XML whenever it's possible.
If you do need to use XML and you need to place some general values in XML you need use CDATA construct (<![CDATA["some common text"]]>).
Additionally I would recommend you to use autoencode: true as your standard jqGrid options. In the case you will be able to place any text in jqGrid cells. jqGrid will do the encoding of all characters which have special meaning for HTML.
I am using jqGrid with treeGrid. I have added a filterToolbar. I would like to search locally instead of having a server call. The treegrid docs say that, "When we initialize the grid and the data is read, the datatype is automatically set to local." (This is regards to TreeGrid)
So, is it possible to implement local search with treeGrid. I tried the below configuration, but it is resulting in server calls.
My Configuration is
var grid = $("#grid").jqGrid({
treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'businessAreaName',
ExpandColClick : true,
url:'agileProgramme/records.do',
datatype: 'json',
mtype: 'GET',
colNames:['Id'
, 'Business Area'
, 'Investment'
, 'Org'
, 'Goal'
],
colModel:[
/*00*/ {name:'agileProgrammeId',index:'agileProgrammeId', width:0, editable:false,hidden:true},
/*01*/ {name:'businessAreaName',index:'businessAreaName', width:160, editable:false},
/*02*/ {name:'programmeName',index:'programmeName', width:150, editable:false, classes:'link'},
/*03*/ {name:'org',index:'org', width:50, editable:false, classes:'orgHierarchy', sortable : false},
/*04*/ {name:'goal',index:'goal', width:70, editable:false}
],
treeReader : {
level_field: "level",
parent_id_field: "parent",
leaf_field: "leaf",
expanded_field: "expanded"
},
autowidth: true,
height: 240,
pager: '#pager',
sortname: 'id',
sortorder: "asc",
toolbar:[true,"top"],
caption:"TableGridDemo",
emptyrecords: "Empty records",
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "agileProgrammeId"
}
});
And to implement the search toolbar
$('#grid').jqGrid('filterToolbar', {stringResult: true,searchOnEnter : true});
Would appreciate any help or any pointer on even if it is possible?
The most problem in the TreeGrid filtering is that it's not clear what should be displayed in the TreeGrid as the result of applying the filter. The standard behavior of applying filter to the grid consist from removing all non-filtered rows. Such behavior will be wrong in case of TreeGrid. In the answer to the close question I tried to explain the problem.
What one can try to implement is some kind of highlighting of the filtered rows only (see here as an idea) or one can set some CSS class to the non-filtered rows to make there gray (like disabled). In any way one have to display parents of the filtered rows in some way. One more option will be to display the filtered TreeGrid not in the Tree form. On can display for example an additional column with the path to the filtered row and the rest row data.
UPDATED: What I mean with "to display parents of the filtered rows" is about the following. Let us we have the TreeGrid like the following
+root 123
+testchild1 32
test1 4
+child2 30
test2 7
and we filter for the first column for the text "test". In the case it would be wrong to display just the lines which has the text "test"
+testchild1 32
test1 4
test2 7
but in some scenarios if would be enough to display the above lines with the full path till the root element:
root\testchild1 32
root\testchild1\test1 4
root\testchild1\test2 7
In the case the information will be displayed in the grid instead of TreeGrid.
In other cases the searching in the leafs only can have sense. In the case one could really display the results in the TreeGrid form, but it will be not the common case.