How to have correctly formated data in columns when row template is used?
I'm creating a grid with knockout-kendo where I define columns and row template:
<div data-bind="kendoGrid: {
data: Entries,
sortable: true,
selectable: true,
useKOTemplates: true,
rowTemplate: 'rowTemplate',
columns: [
{
title: 'Created on',
field: 'Timestamp',
format: '{0:d}'
},
{
title: 'The Mighty Value',
field: 'Value'
},
{
title: 'I.D.',
field: 'Id'
},
{}
]}"></div>
If I do so my first column's display format will be lost because of custom template. How to overcome this issue?
JSFiddle example: http://jsfiddle.net/cXDcm/7/
Because you are using a custom row template you are responsible to format your column values.
However you can you use the built in kendo.format method also in your template to manually apply your formatting:
<td data-bind="text: kendo.format('{0:d}',Timestamp())"></td>
Demo JSFiddle.
Related
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'}]
}
}
},
Below you will find an Ext.form.Panel that has two fields. I chose two random fields in my model that have data. They are not rendering in the form. Note that I am not using MVC in the Extjs framework in this code. How can I get these fields to render? I've pasted the relevant output from the store.data.toSource() to show that I do in fact have data in my store, and only a single record. To view the image with a little larger resolution, right click it and view in another tab.
NOTE: .toSource() only works in Mozilla Firefox
I've tried executing this after creating the form, but it didn't work:
taskForm.getForm().loadRecord(store.getAt(0));
Code:
var taskForm = Ext.create('Ext.form.Panel', {
title: 'Task',
id: 'form1',
width: 600,
height: 200,
bodyPadding: 10,
renderTo: 'TaskEditForm',
store: store,
style: {
'position': 'fixed',
'top': '100px',
'left': '10px'
},
items: [{
xtype: 'label',
labelAlign: 'right',
name: 'project_id',
fieldLabel: 'Project ID',
width: 100
}, {
xtype: 'label',
labelAlign: 'right',
name: 'user_responsible',
fieldLabel: 'User',
width: 100
}],
buttons: [{
text: 'Save Task Detail',
handler: function (btn) {
alert(store.data.toSource());
}
}]
});
========
Edit: #Evan
This code gives the error below:
taskForm.getForm().loadRecord(store.getAt(0));
Error:
TypeError: record is undefined
...
return this.setValues(record.data); // ext-all-debug.js (line 109529)
Line 109529:
loadRecord: function(record) {
this._record = record;
return this.setValues(record.data);
},
Have you read the documentation? store.data is a MixedCollection that holds a bunch of records. The documentation for the load method says:
A class which handles loading of data from a server into the Fields of
an Ext.form.Basic.
You can't just throw in random parameters and expect stuff to work.
What you probably want is:
form.getForm().loadRecord(store.getAt(0)); // Load the first store record into the form
I've trouble with my Combobox. I've build a simple combobox which is configured with a JsonStore to provide remote data. The combobox opens at the first click without problems, the JSON data is requested and Ext shows me the full dropdown list.
But sporadly at the second (sometimes third) click, the combobox neither open nor load any remote data.
Here's my config:
var config = {
autoLoad: true,
fields: [{
name: 'name',
type: 'string'
}, {
name: 'count',
type: 'int'
}, {
name: 'created_at',
type: 'int'
}, {
name: 'updated_at',
type: 'int'
}],
root: 'result',
idProperty: 'id',
proxy: new Ext.data.HttpProxy({
method: 'GET',
url: '/myHandler/loadDropDownList'
})
};
The combobox itself is loaded in a toolbar:
var config = {
height: 27,
items: [{
xtype: 'tbtext',
text: 'Your preference?:',
// #todo inline style -> CSS
style: {
'font-weight': 'bold',
'color': '#15428B',
'font-family': 'tahoma,arial,verdana,sans-serif',
'font-size': '11px'
}
},
'->',
// align the following items on the right side of the toolbar
{
xtype: 'combo',
itemId: 'table-combobox',
store: new myStore(),
valueField: 'name',
displayField: 'name',
value: ' - Please Choose - '
}]
}
Many thanks in advance!
The combobox may be running into trouble querying the database everytime you select it. If you don't need the combobox data to be updated throughout a user's session (i.e. the dropdown values don't change in between the times the user clicks the combobox), you can add this config to the combobox:
mode:'local',
(ExtJS4: queryMode:'local')
It will take the data that the remote store has autoLoaded and will not requery the database store every time it is dropped down.
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