As by default the "colNames" property of the JQgrid displays the names that we harcode there like:
colNames: ['ProductID'],
//columns model
colModel: [
{ name: 'ProductID', index: 'ProductID', align: 'left', search: true, stype: 'text', searchoptions: { sopt: ['eq', 'ne'] } },
],
As here the "ProductID" in colnames property is harcoded here. Now my requirement is that this value should not be hard coded instead it should get the value from .resx file where we are maintaning the Translations.
Can we acheive this in jqgrid??
After reading of your question and thinking about all problems I made some minor changes in the localization files, made this and this demos and posted the feature request in the trirand forum. In the second demo I use less known column templates which was implemented in jqGrid based on one from my previous feature requests. The usage of templates can reduce and the length of JavaScript code used jqGrid and simplify it.
In your case you can probably simplify my demos and load all column headers (or lables of colModel) and the grid title (the caption) from the resource file. You can choose the language based on headers of the HTTP requests (Accept-Language) received from the client.
The exact implementation on the server side will be very depend on the technology which you use on the server.
Related
I am using jQrid version 3.8.1 and I have a grid that displays information about cars. The jQgrid should is set up to display one car per row and one of the columns is a multi-select list that displays which types of seats the car is configured with. A car can have multiple seat types.
When the user edits a car row, it makes an ajax query to get all of the seats types available in the system and sticks them in the multi-select list. In addition to populating the list, it needs to also select the options already chosen for that car.
The values inside the Installed Seats column are not simple strings. They have both an ID and a string value. So the ID for "Wire mesh" might be 2883 and the value for "Composite" might be 29991. They are just unique numeric values (basically the primary key from the table they are stored in).
After the multi-select list is populated with all the appropriate Seat values, I need to select the ones that the car currently has installed (in the picture above it's "Steel" and "Wire frame"). I need to do this based on the seat IDs stored for that car. However, I don't know where these value are going to come from. The grid only stores the names for the seats, not the IDs. Hopefully there is a way to make it store both.
The column model looks like this:
colModel: [
{ name: 'Year', index: 'Year', editable: true, edittype: "select", editoptions: { multiple: true } },
{ name: 'Make', index: 'Make', editable: true, edittype: "select", editoptions: { multiple: true } },
{ name: 'Body', index: 'Body', editable: true, edittype: "select", editoptions: { multiple: true } },
{ name: 'Seats', index: 'Seats', editable: true, edittype: "select", editoptions: { multiple: true }, cellattr='is-seat-list="1"' }
]
Notice that the 'Seats' model has a cell attribute called is-seat-list. I'm using this to find the select box in the row inside the 'editRow' function.
The onSelectRow handler looks like this:
onSelectRow: function (index) {
var curValues = $('#cargrid').getRowData(index);
jQuery('#cargrid').jqGrid('editRow', index, true, function(rowId) {
//when the user edits the row, query for all the seat types and fill in the list
jQuery.ajax({
url: '/getalltheseats',
complete: function (allSeats, stat) {
var list = $('#cargrid').find('tr[id="' + rowId + '"] td[is-seat-list="1"] select');
var $list = $(list);
//add the all seat types to the list, checking the ones that this car currently has selected
_.each(allSeats, function(seat) {
var selected = '';
if(curValues['Seats'].indexOf(seat.ID) !== -1) //<-- what do I do here??
selected = 'selected';
$list.append($('<option ' + selected + '></option>').attr('value', seat.ID).text(seat.Name));
});
});
});
});
},
The important line is
if(curValues['Seats'].indexOf(seat.ID) !== -1)
I have the value of the row but it only contains the seat name, not the ID. The data returned from the ajax call contains each seat name and ID but the <option> elements don't contain the ID value so I don't know which ones to select in the list.
So the question is, what's the best way to make jqGrid store both the seat names and IDs so that when I create the list dynamically, I can check the <option>s for the seats that have been chosen for that car.
Note:
For various reasons the standard dataUrl and buildSelect features of jqGrid are not going to work for me, which is why I'm building the list on the fly in this manner.
First of all you need additionally add formatter: "select" and to populate ID values in Seats column during filling of the grid. The formatter: "select" will decode the IDs and the corresponding Name value will be displayed to the user.
If you would use more recent version of jqGrid the you can use beforeProcessing callback created for the purpose. It allows to include all different ID/Name pairs in the server response for filling of the grid. It allows you to fill the information needed for the formatter: "select" directly in the main server response. You don't need to load the information before creating the grid.
If you use retro version of jqGrid (3.8.1) then I hope that you can still use the following trick. You can define userdata part of the server response defined as function. The outer elements of the server response root, page, total, records and userdata will be processed before the processing the main part with all items. It allows you to modify editoptions.value before it will be processed by formatter: "select".
For example the response from the server can looks like
{
"page": 1,
"total": 20,
"records": 400,
"userdata": {
"seats": "29991:Composite;42713:Nappa leather;6421:Steel;2883:Wire mesh"
},
"rows": [
{
"year": 2007,
"model": "Toyota/Camry",
"body": "Sedan",
"seats": "29991,6421"
},
{
"year": 2057,
"model": "BMW/Series 4",
"body": "Sedan",
"seats": "6421,2883"
}
]
}
Inside of jsonReader you can define userdata which set userdata.seats as value of editoptions. You can use setColProp method for example to do this.
In the way you will be able to implement all your requirements.
How do I get the formatted value of one column in another column in jqgrid.
For eg:
{ name: 'amount', index: 'amount', sorttype: "float", formatter: processAmount, title: false },
{ name: 'netAmount', index: 'netAmount', sorttype: "float", formatter: function (cellvalue, options, rowObject)
{
// How do I get the formatted value of column "amount" here?
}
}
I know that I am posting very little of my requirement or code. But I hope this is sufficient. Please let me know if you need more information on anything.
Thanks,
Sam
Custom formatters will be called before the body of the grid will be placed on the page. So you can't access the formatted value of one column inside of custom formatter of another column. What you can still do is calling of another formatfer. For example you can call processAmount function inside of formatter of netAmount column.
I've built a grid as the code bellow:
colModel: [
{ name: 'price',
label: 'price',
index: 'price',
jsonmap: 'price',
formatter: 'number',
formatoptions: {decimalSeparator:",", thousandsSeparator: ".", decimalPlaces: 2, defaultValue: '0,00'},
editable: true
}
]
The format of field is correctly on grid, for instance: 10,32, but the form created to edit the field fills one with 10.32 instead of 10,32.
Someone knows why this is going on? Do I need to use properties as edittype and editoptions (this one using formmater and formatoptions) as well? if yes, How I need set up these properties?
I've fixed the problem using the the function afterShowForm to handle the formating of field on form generated from grid.
In fact, I was expecting that jQGrid could do that automatically, i.e, using the configuration provided to column to apply on field generated, or if i could apply the configurion on JSON message, for instance:
editoptons: { formatter = "number", formatteroptions = { .... } ...
anyway, it's working now.
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.
Scenario:
Use "stype:'select'" for 'Client' column in search popup.
The dataUrl for this column returns "<select><option value='F'>F</option><option value='O'>O</option></select>"
Bring up the Search Popup.
First line of the search criteria: 'Client not equal F'
Second line of search criteria: 'Amount not equal 300'
match type: 'any'
Click on Find.
I expect both the records with client type == 'F' to show up but neither do. Looks like the match type is still 'AND' instead of 'OR'.
$(function() {
var mydata = [
{id:"1", name:"test", amount:"200"},
{id:"2", name:"test2", amount:"300"},
{id:"3", name:"F", amount:"400"},
{id:"4", name:"test4", amount:"200"},
{id:"5", name:"test5", amount:"300"},
{id:"6", name:"test6", amount:"400"},
{id:"7", name:"test7", amount:"200"},
{id:"8", name:"test8", amount:"300"},
{id:"9", name:"test9", amount:"400"},
{id:"10",name:"test10", amount:"500"},
{id:"11",name:"F", amount:"500"},
{id:"12",name:"test11", amount:"500"},
{id:"13", name:"test", amount:"200"},
{id:"14", name:"O", amount:"200"}
];
jQuery("#list").jqGrid({
datatype: "local",
data: mydata,
width: 700,
colNames:['Inv No','Client', 'Amount'],
colModel:[
{name:'id',index:'id', width:65, sorttype:'int', searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},
{name:'name',index:'name', width:100, searchoptions:{dataUrl:'/api/domains/producttypedomain'}},
{name:'amount',index:'amount', sorttype:'int', width:80, align:"right"}
],
rowNum:100,
pager: '#pager',
height:'auto',
viewrecords: true,
rownumbers: true,
gridview : true,
caption:"Advanced Search Example"
});
jQuery("#list").jqGrid('navGrid','#pager',
{
edit:false,add:false,del:false,search:true,refresh:true
},
{}, // edit options
{}, // add options
{}, //del options
{multipleSearch:true, overlay:false, recreateFilter:true} // search options
);
});
I verified your example and I see that you found a bug in jqGrid. So +1 from me for you.
By the way the same bug still exist in the new version of the new multisearch plugin which is now in the alpha phase (see here for more information). The bug can be reproduced if one try to make OR (any) operation of two "not equal" operation. The "not equal" implementation has a bug.
In the current version (with the bug) of jqGrid the searching/filtering follows to execution of the statements like
!(parseInt(this.amount,10) == parseInt(200,10)) && !(parseInt(this.amount,10) == parseInt(500,10))
in case of operation ((amount<>200)||(amount<>500)). It is wrong. The "not equal" implementation is buggy in the current version of jqGrid.
I fixed the problem in the source code of jqGrid as following:
1) I added new function notEquals defined as
this.notEquals=function(f,v,t){
return self._compareValues(self.equals,f,v,"!==",t);
};
and inserted it after the this.equals (see here).
2) I modified the line 1359 of the grid.base.js from
'ne':function(queryObj) {return queryObj.not().equals;},
to
'ne':function(queryObj) {return queryObj.notEquals;},
After the fixes the searching works correct. You can see the results here (your original version one can test here)
In the next time I will post my suggestion in the trirand forum and I hope that Tony Tomov (the developer of jqGrid) will implement the fixes in the jqGrid.
UPDATED: How I promised I posted the bug report together with my suggestions to fix the problem.
UPDATED 2: The bug is already fixed in the current developer version on the GitHub. You can see the results here which use new fixed version with even more changes as I suggested in my answer. The new multiselect interface you can see here.