I am using addRowData method to populate my grid. But my current JSON data have another object inside of each object in the JSON data. To make it view in the grid, i followed the notations in the documentation of jQgrid. But that column remain empty.
My Grid definition:
$("#ExpenseTable").jqGrid({
datatype : "local",
mtype : 'GET',
colNames : [ 'Entry ID','User Name', 'Category Name','Date','Amount','Status'],
colModel : [
{name:'expnsId',label:'ID', width:150 ,editable: false},
{name:'userName',label:'NAME', width:150 ,editable: false},
{name:'category.catName',label:'CATEGORY', width:150 ,editable: false},
{name:'date',label:'DATE', width:150 ,editable: false},
{name:'amount',label:'AMOUNT', width:150 ,editable: false},
{name:'status',label:'STATUS', width:150 ,editable: false},
],
pager : '#ExpPager',
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : 'invid',
sortorder : 'desc',
viewrecords : true,
autowidth : false,
caption : 'Expenses Details',
onSelectRow : function(expnsId) { dispExpensData(expnsId); }
});
Code used to populate the Grid:
ExpenseDetailsManagement.getexpenseList(function(expRecords){
//for(count = 0; count<expRecords.length; count++){
// expRecords[count].catId = expRecords[count].category.catId;
// expRecords[count].catName = expRecords[count].category.catName;
//}//I am using this for loop to convert the category object
$("#ExpenseTable").clearGridData(true);
$("#ExpenseTable").jqGrid('addRowData', "expnsId", expRecords);
});
The data returned from the server looks like:
Any idea or suggestions about where i am going wrong!!!
If the values from the 'expnsId' column are unique, I'll recommend you to use key:true parameter as a option of 'expnsId' coulmn. Then the value of the column will be used as the row id.
To be able to help you with the dotted column names you should post the JSON data and not the screenshort with "Object" text on the place of the most important information. Probably your main problem can be easy solved with respect of localReader instead of dotted name.
One more small remark. Beause you use label option for all columns you can remove colNames array which will be not used. The option editable: false is default, so you can remove it also. The parameter mtype you can also remove because it will not used for local data.
UPDATED: Sorry the value of the first parameter of addRowData should be do the name of the column with the data like you as do. So I deleted the first paragraph from the first version of my answer.
Related
I have written the function for row selection.It is not highlighting the selected row(sometimes highlighting sometimes other row highlighted) and not displaying the icons the way I have written it. following is the code
multiselect : true,
iconSet: "fontAwesome",
datatype : "json",
loadonce : true,
rowNum : 10,
rowList : [ 10, 20, 30 ],
toppager:true,
pager : '#prowed1',
sortname : 'id',
viewrecords : true,
sortorder : "asc",
editurl : "editGrid.html",
onSelectRow : function(rowId) {
var rowId = jQuery("#list1").jqGrid('getGridParam',
'selarrrow');
if (rowId.length > 1) {
$("#list1_iledit").addClass('ui-state-disabled');
}
},
$("#list1").jqGrid(
"navGrid",
"#prowed1",
{
cloneToTop:true,
formatter : "checkboxFontAwesome4",
addicon:"fa fa-plus ",
add : true,
delicon:"fa fa-trash",
del : true,
searchicon:"fa fa-search",
search : true,
refreshicon:"fa fa-refresh",
refresh : true,
editicon:"fa fa-edit ",
edit : true,
saveicon : 'fa fa-floppy-o',
save : true,
},`{ // edit options
afterSubmit : function() {
location.reload(true);
},
beforeShowForm : function(form) {
$("td .navButton navButton-ltr").hide();
},
closeAfterEdit : true
},
{ // add options
beforeShowForm : function(form) {
$("#buName").removeAttr("readonly");
},
closeAfterAdd : true,
clearAfterAdd : true
},
{ // del options
serializeDelData : function(postdata) {
return {
'buName' : $('#list1').jqGrid('getCell',
postdata.id, 'buName'),
'oper' : 'del'
}
}
}
);` $("#list1").jqGrid('inlineNav', "#prowed1", {
//cloneToTop:true,
//iconSet: "fontAwesome",
add : false,
edit : true,
editicon : 'fa fa-pencil-square-o',
save : true,
saveicon : 'fa fa-floppy-o',
editParams : {
aftersavefunc : function(id) {
jQuery('#list1').jqGrid('setSelection', id, false);
},
},
});`
You should provide the demo, which reproduce the problem. The reason of the most problems with highlighted: wrong input data or wrong colModel. Every row of jqGrid have always id attribute (rowid), which should be part of input data: see here. The id value must be unique. If you have id duplicates then you could problems with selection/highlighting of rows.
If you fill the data from the database than you can use native ids from the tables of the database to build unique rowids. Database tables don't allow id duplicates too.
To be able to edit the data in the database you will need to identify the edited data. Such unique value could be used as the rowid. If you fill the grid by JOIN from multiple tables, than composed id could be used. For example, if you fill the the grid with the data from two tables User and Location then the paar (user_id, location_id) are unique. If both user_id and location_id are numbers, then you can use user_id + "_" + location_id as rowid. The value will be sent to the server during editing and you will have full information to find the data in the tables, which need be modified.
I think that you have problems with unique id in the data. Check that the ids used when you insert data in the grid are unique and you do not have duplicate one.
Kind Regards
In your ColModel make sure the property key:true is only specified once and represents a unique row ID value. See http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
Dumb on my part, but I had the property beforeSelectRow set in the grid code that I had copied from another project. This of course was blocking any selection of a grid row.
beforeSelectRow: function (rowid, e) {
return false;
},
I want to show dynamic drop down options for each row of ag-grid.
Suppose for each row, department might be different and based on that I plan to filter list of subjects (available option for users to select in dropdown)
Here is my code:
this.gridOptions.columnDefs = {
headerName: 'Department',
field: 'financingCurrency',
editable: false,
suppressSorting: false,
cellClass: 'grid-align'
},
{
headerName: 'Subject',
field: 'subject',
editable: true,
cellEditor: 'select',
filter: 'text',
cellEditorParams: {
values: this.subjects;
},
suppressSorting: false,
cellClass: 'grid-align'
}
}
I am using free version of ag-grid with Angular 2.
Does someone have any idea about it?
If I understand correctly, you want to be able to have different values in the cellEditor based on which department is selected. If that is correct, then you will likely need to do something more complicated dealing with cellEditors. Here is a plnkr that I made that checks if the name starts with a J, if so then it allows a third option.
Please refer to the plnkr for full example, as well as the docs to make sure that you get everything imported/exported in the right places. Here is what is the key importance for you beyond what is on the docs:
agInit(params: any): void {
if (params.node.data.financingCurrency == 'Your Super Department') {
subjects = [...super options...]
} else {
subjects = [...different options...]
}
}
agInit gets called any time editing is started. params has a complicated object, (I suggest console.log()ing it just to see everything that is available to you) but basically the node is referring to the row that the cell is on, and the data is the data for that row, and judging by your colDefs you can get the value of the Department from financingCurrency.
try something similar :
{
headerName: ' MEDICINE NAME ',
field: 'medicine',
cellEditor: 'autoComplete',
cellEditorParams:params => {
return {
'propertyRendered' : 'name',
'rowData': this.medicineList,
'columnDefs' : [{headerName: 'Medicine', field:'name'}]
}
}
},
I have a Item Selector, which has 2 sections, Avaliable Column and Selected Column.
I want to fetch all values from selected column and store it in a List.
How to do that ?
items : [{
// first column
xtype : 'itemselector',
columnWidth: 0.5,
store: showFieldStore,
id: 'fieldSelector',
displayField: 'columnLabel',
valueField: 'dataIndex',
allowBlank: false,
msgTarget: 'side',
fromTitle: 'Available Columns',
toTitle: 'Selected Columns'
}
you want to display values as a string list or from display fields :
itemSelectorField.toField.store.getRange().collect("display_value_propery_name").join(",");
I have an ExtJs combobox. Its store loaded using JSON (using MyStore class below). I want to load all the values to the store, and then filter them with the text entered in the combo's textfield (preferably using the typeAhead feature).
The problem is that I want to do the filtering on the client side (combo's mode property is 'remote', by default). I don't want my combo to reload its store every time I type something.
How can I do that?
Thanks.
Here's my store class :
MyStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(jsonUrl, storeId, id, description, isAutoLoad, cfg) {
cfg = cfg || {};
GenericStore.superclass.constructor.call(this, Ext.apply({
storeId: storeId,
root: 'result',
url: jsonUrl,
autoLoad: isAutoLoad,
fields: [
{
name: id
},
{
name: description
}
]
}, cfg));
}
});
And the combo :
xtype: 'combo',
fieldLabel: 'The Combo',
width: 150,
store: myStoreData,
valueField: 'id',
displayField: 'name',
minChars : 0,
editable : false,
itemId : 'my-combo'
To achieve this you must:
Construct MyStore class with "isAutoLoad" config option as "true"
In your combobox config set the "mode" config option to "local" (see Built the combo config code bellow for another config)
Here is my short example:
Construct myStoreData variable
var myStoreData = new MyStore({
autoLoad: true, //so the store will load automatically
...any_other_config_option...
});
Built the combo config
{
xtype: 'combo',
fieldLabel: 'The Combo',
width: 150,
store: myStoreData,
// myStoreData is already loaded before as it have 'autoLoad' config set to true
// and act as localstore to populate the combo box item
// when the combo "mode" config set to 'local'
valueField: 'id',
displayField: 'name',
minChars : 0,
editable : true, //before was editable : false,
itemId : 'my-combo',
mode: 'local', // by default this was mode: 'remote'
typeAhead: true // by default this was typeAhead: false
}
You will want to use the store.filter() method. You can use this to use user-entered information to filter your store that the combo box uses. This is taken from the ExtJS API documentation for data.store.
store.filter([
{
property : 'name',
value : 'Ed',
anyMatch : true, //optional, defaults to true
caseSensitive: true //optional, defaults to true
},
//filter functions can also be passed
{
fn : function(record) {
return record.get('age') == 24
},
scope: this
}
]);
In my case I had to add the config option lastQuery:'' to the combo.
explanation : http://progex.wordpress.com/2010/03/26/extjs-combo-dropdown-does-not-filter-on-first-trigger/
Add listener to your store on 'load' event, do filtering, by removing or flagging records, if removing it is clear load to combo component, if flagging you need to recognize those flaggs in combo and display or not...
It hard to go with more details if I do not see your code for store and combo, so I can give you only general idea
i have the problem that i can't send any identifier for the edited content to the edit.php file. it sends automaticaly an id=1 parameter for the first row in the grid for example...but this is not the same value as in mysql table column "id". the correct id is shown in the grid..it says id 3 in the first row, but when i edit data and save it, the grid id is shown as 1. how can i send and correct identifier to the edit.php?
Thanks in advance for your help.
this is the js code for the grid, the php part is working, only wrong parameter get's passed to it from the grid.
jQuery("#statsgrid").jqGrid(
{
url:'modules/json.php?stats=true',
datatype: 'json',
mtype: 'POST',
colNames:['ID', 'Nickname','Country', 'IP', 'Notes'],
colModel:
[
{name:'id',index:'id', width:90},
{name:'nick',index:'nick', width:90},
{name:'country',index:'country', width:80},
{name:'ip',index:'ip', width:100},
{name:'note',index:'note', width:150, sortable:false, editable:true, editoptions:{size:10}}
],
pager: '#statspager',
rowNum:10,
rowList:[10,20,30,50,100],
sortname: 'nick',
sortorder: 'desc',
height: '100%',
viewrecords: true,
editurl: 'modules/edit.php',
caption: 'Statistics'
}).navGrid("#statspager",
{}, //options
{height:280,reloadAfterSubmit:false,url:'modules/edit.php'}, // edit options
{height:280,reloadAfterSubmit:false}, // add options
{reloadAfterSubmit:false}, // del options
{} // search options
);
add an extra class name with the db id prefixed by some string:
<td class="something table_column_123">value</td>
And parse out table_column_123 when sending it back
Configure the JSONReader to use the DB id instead of a generated ID by adding:
jsonReader: {
id: "id"
}
...to the call to jqGrid.
Note, however, that this is the default. If the grid isn't already picking up your IDs, then there's something going on which you haven't shown us, or the example above isn't actually what you're doing.
You could also try adding the "key" property to your ID row in the colmodel. See the documentation about it here