The dwr call returns a set of data which will have any number of specific columns. For example name, id, address. The address could be 1,2 or 3 like address1, address2 for first record and address1, address2, address3 for second data. My question is how to make the column name for jqgrid dynamic.
DataHandler.fetch(function(data){
resultSet = data;
jQuery("#table1").jqGrid({
datatype : "local",
data : resultSet,
height : 250,
width : 978,
sortable : false,
ignoreCase : true,
sortorder : "desc",
colNames : ['Email Date/Time','User Name', 'Department'] //want to make this dynamic
colModel : [ {
name : 'mailedOn',
index : 'mailedOn',
width : '18%',
align : 'center',
}, {
name : 'userName',
index : 'userName',
width : '18%',
align : 'left',
sorttype : 'text',
}],
rowList:[10,20,30],
pager : '#pager',
rowNum : 10,
altRows : true,
altclass: "myclass",
viewrecords : true
});
});
Any help ??
If you have some fix (known) number of columns and need to change column headers dynamically (change colNames) then I would recommend you to read solution from the answer and try the demo. The question is marked as "duplicate" and my answer have currently no voting so you can not find the answer during searching.
The main idea of my suggestion is usage some generic column names like c1, c2 and so on and modify column headers dynamically inside of beforeProcessing. In the same way one can even make modifications of properties of items of colModel (set formatter, formatoptions, editoptions and so on), but it seems that you don't need currently to do this.
Related
What I'm trying to do in Angular ui-grid seems pretty common, but I'm having trouble finding anything that describes a solution.
I have a table. Like many tables the first row is really a "row header".
Now what specifically do I mean by that:
Like column headers, the values are always the same. They are not "data"
Like column headers, they are styled differently than non-header data cells to indicate that they are not "data".
You should not be able to "sort" nor "remove" the header row
Ideally, the column for the row headers is "frozen" in that it doesn't scroll
It perhaps is worth mentioning that the row header labels COME from the data as in:
{
rowHeader : "Fixed Rate",
TenYear: .02,
TwentyYear: .03
},
{
rowHeader : "Variable Rate",
TenYear: .04,
TwentyYear: .05
}
So what I'm looking for in the above example, is a table where the first column has row headers of "Fixed Rate" and "Variable Rate". The styling of that column should "look like" a header cell rather than a data cell.
Now I know that some of these things like "frezeing" and turning off sorting are available via columnDefs in gridOptions. But what I'm unclear of is if there's a way to just declare that the first column is a header, and I just get all of these things.
This seems to be a common table paradigm.
This is pretty easy with row header template. You can define your own template like below
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.columns = [{ field: 'TenYear' }, { field: 'TwentyYear' }];
var data = [{
rowHeader : "Fixed Rate",
TenYear: .02,
TwentyYear: .03
},
{
rowHeader : "Variable Rate",
TenYear: .04,
TwentyYear: .05
}]
$scope.gridOptions = {
data : data,
enableSorting: true,
columnDefs: $scope.columns,
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
var cellTemplate = 'ui-grid/selectionRowHeader'; // you could use your own template here
$scope.gridApi.core.addRowHeaderColumn( { name: 'rowHeaderCol', displayName: '', width: 200, cellTemplate: "<div class=\"ui-grid-row-header-cell ui-grid-disable-selection\"><div class=\"ui-grid-cell-contents\">{{row.entity['rowHeader']}}</div></div>"} );
}
};
}]);
Working plnkr http://plnkr.co/edit/9jZYgS3Ygaj2vhOnd2vh?p=preview
I have this json model:
model/data.json
{
"orders" : [
{
"header" : { "id" : "00001", "description" : "This is the first order" },
"items" : [
{ "name" : "Red Book","id" : "XXYYZZ" },
{ "name" : "Yellow Book", "id" : "AACCXX" },
{ "name" : "Black Book", "id" : "UUEEAA" },
]
},
{
// another order with header + items
},
.....
]
}
and I'm assigning it onInit to the view, like this:
var model = new sap.ui.model.json.JSONModel("model/data.json");
sap.ui.getCore().setModel(reqModel);
I'm trying to display a list of orders in the first view (showing the id), like this:
var list = new sap.m.List({
id: "mainList",
items: []
});
var items = new sap.m.ActionListItem({
text : "{id}",
press : [ //click handler, onclick load the order details page ]
});
list.bindItems("/orders", items);
.... // add list to the page etc etc
What I cannot do, is connect each order to its header->id.. I tried
text: "/header/{id}"
text: "{/header/id}"
in the items declaration, and
list.bindItems("/orders/header", items)
in the list binding, but none of them works.. The id value is not displayed, even though a "blank" list item is shown..
Any idea? What am I doing wrong?
Thank you
The solution was one of those I tried (but I don't know why it didn't work at that time)
text: "{/header/id}"
The ListItem acts as a Template for a list/array of objects. That's why you bind it against an array structure in your data:
list.bindItems("/orders", itemTemplate)
That makes bindings of the ListItem relative to /orders and therefore your item should look like this without leading '/' (absolute paths would look like this /orders/0/header/id asf.):
var itemTemplate = new sap.m.ActionListItem({
text : "{header/id}",
press : [ //click handler, onclick load the order details page ]
});
Not quite sure how you made it work the way you have shown... May be it's not as picky as I thought.
Btw: For whatever reason the ResourceModel builds an exception of that syntax. You can always omit the leading '/' when dealing with ResourceModels (probably because they do not allow nested structures).
BR
Chris
Cannot add comments yet, therefore an answer to you solved Problem, that could answer the initial problem. (And inform People using that example in any way)
In the current code listing you use the variable "reqModel" to set the model, but the variable with the model in it is named "model" in the line before. Maybe that was the first reason why both of your examles would not work?
Perhaps this error was cleared on rewriting some passages while testing.
greetings! -nx
I've noticed that multi grouping in JQGrid elicits rows sorting to be rearranged inline once the list of values is retrieved through ajax getJSon().
Sometimes the reordering splits groups of the same elements in more than one group, as it should be.
I guess the solution is to avoid client side re-sorting of JQGrid rows, with the aim to definitively reuse the same order given inside the JSON without changes --- as returned by the server.
I'm using the following configuration :
jq("#myGrid").jqGrid({
datatype: 'local',
data: myvar.detail, // a well formatted json locally stored
colNames: [ ....],
colModel: [
{name:'nome_attr',index:'nome_attr', sorttype: function () {return 1;}, editable:true, editrules:{required:true}, editoptions:{size:27}, align:'center'},
{name:'desc_attr', index:'desc_attr', sorttype: function () {return 1;}, editable:true, editrules:{required:false}, edittype: "textarea",editoptions:{rows:5, cols:25}, hidden:true},
{name:'valore',index:'valore', sorttype: function () {return 1;},editable:true, editrules:{required:false}, editoptions:{size:30}, width:120},
....
],
loadonce: false, // to dis-able sorting on client side
sortable: false,
grouping:true,
groupingView : {
groupField : ['nome_attr', 'valore'],
groupColumnShow: [false,false],
groupText : ['{0}'],
groupCollapse: true,
groupDataSorted: false,
groupSorted: false,
groupOrder: false
}
});
Notice (1) I'm already using the workaround to disable the sort type
sorttype: function () {return 1;}
as described here, and that in "#myGrid" is a sub-grid, where the datatype: local, means the rows have been previously retrieved in the container grid.
Does anybody knows which is the configuration of the colModel attribute and the groupingView parameters to be set in order to avoid in-line re-sorting in case of Multi Grouping ?
thanks in advance,
Michele
One workaround to fix the automatic sort is to allow the client to work in order to re-produce the same list of values (recreating the same order).
First, prepare a JScript function forcing the right order value for each grouped column:
/**
* Sort type in subgrid's gropued rows
*/
function sortGroup(cellValus, rowData, ty) {
if(ty==='attribute_1')
return rowData.attr1_order;
else if(ty==='attribute_2')
return rowData.attr2_order;
}
Second, inject the desired order values in the colModel.
Third, trigger the previous function inside the sorttype in each grouped column, using the column type to know which group the order belongs:
colModel: [
{name:'nome_attr',index:'nome_attr', sorttype: function (cellValus, rowData) {return sortGroup(cellValus, rowData, 'attribute_1')}, editable:true, editrules:{required:true}, editoptions:{size:27}, align:'center'},
{name:'desc_attr', index:'desc_attr', editable:true, editrules:{required:false}, edittype: "textarea",editoptions:{rows:5, cols:25}, hidden:true},
{name:'valore',index:'valore', sorttype: function (cellValus, rowData) {return sortGroup(cellValus, rowData, 'attribute_2')},editable:true, editrules:{required:false}, editoptions:{size:30}, width:120},
.....
{name:'attr1_order',index:'attr1_order', editable:false, hidden:true},
{name:'attr2_order',index:'attr2_order', editable:false, hidden:true}
]
I have this simple model:
abstract class Info {
ObjectId id
Date dateCreated
Date lastUpdated
}
class Question extends Info {
String title
String content
List<Answer> answers = []
static embedded = ['answers']
}
class Answer {
String content
}
Written this way, answer are embedded in question (and no id is maintained for answer). I want to maintain the id, dateCreated, and lastUpdated fields for every answer. So I try the following:
class Answer extends Info {
String content
}
When I run a simple test case (save a question with 1 answer), I get the following:
> db.question.find()
{ "_id" : ObjectId("4ed81d47e4b0777d795ce3c4"), "answers" : [ { "content" : "its very
cool", "dateCreated" : null, "lastUpdated" : null, "version" : null } ], "content" :
"whats up with mongodb?", "dateCreated" : ISODate("2011-12-02T00:35:19.303Z"),
"lastUpdated" : ISODate("2011-12-02T00:35:19.303Z"), "title" : "first question",
"version" : 0 }
I notice here that fields dateCreated and lastUpdate are not auto-maintained by Grails. Also version field was added but has a null value as well, but interestingly no _id field created (even if I defined id in Info class).
In a second scenario, I try this:
class Answer {
ObjectId id
String content
}
and I get the following output:
> db.question.find()
{ "_id" : ObjectId("4ed81c30e4b076cb80ec947d"), "answers" : [ { "content" : "its very
cool" } ], "content" : "whats up with mongodb?", "dateCreated" : ISODate("2011-12-
02T00:30:40.233Z"), "lastUpdated" : ISODate("2011-12-02T00:30:40.233Z"), "title" :
"first question", "version" : 0 }
This time, id is also not created for the embedded document. Any explanation for this scenarios ? Why there is no id property, and why dateCreated, lastUpdated, and version are null? Is this intended to work this way, or is it a bug?
Thank you,
this is probably due to how the grails framework does the conversion (the GORM module).
You may have quicker / better answers from the grails forum.
Basically it seems that some of the automatic behavior (fill in dates and objectid) is only done for the root object, not subobjects.
You can also checkout an alternative ORM based on morphia:
http://www.grails.org/plugin/mongodb-morphia
ExtJS4 grid anticipates appropriate editor (cellEditor or rowEditor) per column.
If a column's header field is dateField - date selector will be applied on every row in that column.
What I need is an editor with different field editors per row, not per column.
The Extjs3 solution is provided here - unfortunately doesn't fit in Extjs4 case.
(please check that link to see explanatory images, cause I can't post images yet)
There's also a single column solution called property grid, but again - it supports only one column and is very deviated from the standard Ext.grid component
I have tried manually changing grid editor by customizing column.field and reloading grid.editingPlugin.editor, but always get a blank rowEditor panel with no fields.
//by default rowEditor applies textField to all cells - I'm trying to force custom numberFiled on apropriate row
var numberField=Ext.form.field.Number();
grid.columns[0].field=numberField;
//destroy current rowEditor's instance
delete grid.editingPlugin.editor;
//now, upon doubleClick on apropriate cell it should reinitialize itself (initEditor()) - and it does, but is an empty panel
what am I missing here? once I delete editingPlugin.editor everything should start from the beginning like during the first time rowEditor is called, but it looses all the fields
Solution for Ext4:
I was looking for a solution for this and this guy said the property grid has this behavior.
I have adapted it to work in a clean way for me
on initComponent I declared:
this.editors = {
'date' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Date', {selectOnFocus: true})}),
'string' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Text', {selectOnFocus: true})}),
'number' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Number', {selectOnFocus: true})}),
'int' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Number', {selectOnFocus: true})}),
'boolean' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.ComboBox', {
editable: false,
store: [[ true, 'Sim' ], [false, 'Não' ]]
})})
};
I used these functions to help me (copied):
this.renderCell = function(val, meta, rec) {
var result = val;
if (Ext.isDate(val)) {
result = me.renderDate(val);
} else if (Ext.isBoolean(val)) {
result = me.renderBool(val);
}
return Ext.util.Format.htmlEncode(result);
};
this.getCellEditor = function(record, column) {
return this.editors[record.get('type')];
};
And finally, associate these functions to the column:
{text: "Valor", name : 'colunaValor', width: 75, sortable: true, dataIndex: 'valor', width:200,
renderer: Ext.Function.bind(this.renderCell, this),
getEditor: Ext.Function.bind(this.getCellEditor, this)
}