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'}]
}
}
},
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 have a query I'm trying to perform based on a one to many relationship.
As an example there is a model called Users and one called Projects.
Users hasMany Projects
Projects have many types which are stored in a type (enum) column. There are 4 different types that potentially a user may have that I want to load. The catch is I want to include the most recent project record (createdAt column) for all networks that potentially will be there. I have not found a way to structure the query for it to work as an include. I have however found a way to do a raw query which does what I want.
I am looking for a way without having to do a raw query. By doing the raw query I have to map the returned results to users I've returned from the other method, or I have to do a simple include and then trim off all the results that are not the most recent. The latter is fine, but I see this getting slower as a user will have many projects and it will keep growing steadily.
This allow serialize a json for anywhere action about a model. Read it, very well
sequelize-virtual-fields
// define models
var Person = sequelize.define('Person', { name: Sequelize.STRING });
var Task = sequelize.define('Task', {
name: Sequelize.STRING,
nameWithPerson: {
type: Sequelize.VIRTUAL,
get: function() { return this.name + ' (' + this.Person.name + ')' }
attributes: [ 'name' ],
include: [ { model: Person, attributes: [ 'name' ] } ],
order: [ ['name'], [ Person, 'name' ] ]
}
});
// define associations
Task.belongsTo(Person);
Person.hasMany(Task);
// activate virtual fields functionality
sequelize.initVirtualFields();
Is it possible to create a column on a MySQL table using Sequelize that can be initialized when creating a new row, but never updated?
For example, a REST service allows a user to update his profile. He can change any field except his id. I can strip the id from the request on the API route, but that's a little redundant because there are a number of different models that behave similarly. Ideally, I'd like to be able to define a constraint in Sequelize that prevents the id column from being set to anything other than DEFAULT.
Currently, I'm using a setterMethod for the id to manually throw a ValidationError, but this seems hackish, so I was wondering if there's a cleaner way of doing this. Even worse is that this implementation still allows the id to be set when creating a new record, but I don't know a way around this as when Sequelize generates the query it calls setterMethods.id to set the value to DEFAULT.
return sequelize.define('Foo',
{
title: {
type: DataTypes.STRING,
allowNull: false,
unique: true,
validate: {
notEmpty: true
}
}
},
{
setterMethods: {
id: function (value) {
if (!this.isNewRecord) {
throw new sequelize.ValidationError(null, [
new sequelize.ValidationErrorItem('readonly', 'id may not be set', 'id', value)
]);
}
}
}
}
);
Look at this Sequelize plugin:
https://www.npmjs.com/package/sequelize-noupdate-attributes
It adds support for no update and read-only attributes in Sequelize models.
In your specific case, you could configure the attribute with the following flags:
{
title: {
type: DataTypes.STRING,
allowNull: false,
unique : true,
noUpdate : true
}
}
That will allow the initial set of the title attribute if is null, and then prevent any further modifications once is already set.
Disclaimer: I'm the plugin author.
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.
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