I have a grid.Panel configured as follows:
var myGrid = new Ext.grid.Panel({
id:'myGridID',
layout:'anchor',
title:'My Grid',
border: false,
store:myStore,
frame:false,
columns:[{header: 'ID', hidden:true, hideable:false, dataIndex: 'data_id'},
{header:'Title', flex:0.3, sortable:true, dataIndex:'data_title'},
{header:'Description', flex:0.7, sortable:true, dataIndex:'data_description'}]
....
Its supposed to show columns Title and Description and keep column ID hidden (I have to keep the column there because I need to get the ID of the selected record).
When my web page launches I load the data in the grid perfectly. The first column (the one with header ID) is hidden as its supposed to be and columns Title and Description show just fine.
The problem is that when I reload the store after adding a record to it the grids headers show fine (only Title and Description) but the data of column ID is also shown.
I used this line to reload the store:
Ext.getCmp('myGridID').getStore().load()
I found that if I resize any column (Title or Description), the data from column ID disappears.
Why do you use 'hideable:false'? I don't think you should specify that, seems useless. Try running the code without it.
Related
I want to show the Row no in my grid.
I use cell template and there i use {{rowRenderIndex+1}}
It works fine when records are less then 14,but after record count get increased then when we scroll down the grid the Row No get initialize with one again and again.
You can add a property in the data and add column for display:
//Add property
$scope.yourData.forEach( function(row, index){
row.idx= index;
});
//Adding column
columnDefs: [
{
field: 'idx',
displayName: '',
width: 30
}
In the ui-grid FAQ there is a section "How can I show a sequence number/id in a column in my grid?"
I believe you are looking for the second answer in that section:
cellTemplate: '<div class="ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>'
The rowRenderIndex is used to index rows that are rendered at that moment.
I want to add additional column to grid dynamically on table instantiation.
So, I've added process function to gridPanel with following section
var clmn = {
xtype: 'checkcolumn',
dataIndex: 'test,
editor: {
xtype: 'checkboxfield'
}
};
config.columns.push(clmn);
As you can see, rowediting plugin is used here too.
Actually column is added and displayed on screen. But it is not hold correct data that has been loaded, only defaultValue from model.
On row modification (when rowediting plugin is started) real data is displayed.
What is the issue here? May be there is some refresh method that should be used to refresh metadata or sth like this..
Please, take into consideration that i am working via Sencha Architect
columns.push() is not proper way to do this. So you should use reconfigure method which is mentioned here. If your store is already have fields for new columns you don't have to pass it again. Just get your current columns and add your new columns and reconfigure the grid.
edit for answer : Your problem easer than before. you can just pass your columns to it like below;
var yourGenericColumns = [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'}];
yourGenericColumns.push({text : 'Age', dataIndex: 'age'});
Ext.create('YourApp.YourCustomGrid',{
columns : yourGenericColumns
});
I have a column named id in my datagrid. I have set visible:false for the field since I don't want to display the field in the grid.
But then how can I get the value in id? any hope?
I am adding column as
columns.push({'sTitle':'id','visible': 'false'},{'sTitle':'name','visible': 'false'});
And I am retrieving the value in selected row as
this.$view.on("click",function(event){
selectedRow = event.target.parentElement;
var name = selectedRow.cells[0].innerHTML;
}
Here in click event I can't get the value of id as html is not generated for the field with visible:false. So I am searching for a method to access my id field.
You should use display:none property
-Edit:
In order to specify a custom css to your angular datagrid you should also specify the columns. Something like:
$("#gridContainer").dxDataGrid({
// ...
columns: ['CompanyName', 'ContactName', 'City', 'Country']
});
Here's the page I referenced to
Edit2:
Since you're trying to retrieve the value of the field I would recommend you to take a look to this answer
I am using a single-cell grid to show notifications in my application. How do I show date and time of notification with each cell data? The data is present in the model of the associated store. I want it to be something like the phabricator https://secure.phabricator.com/
Any pointers how I may do so?
One way to accomplish this would be to use a templatecolumn. You can then specify a tpl in the config of html representing the two sources of data.
Here is a fiddle I created demonstrating and simple and more complex tpl that resembles the data on the site you referenced.
Here is a simple example of a template column:
{
xtype: 'templatecolumn',
header:'Name',
tpl:'{first_name} {last_name}'
}
And a more complex template column with similar style to the one you referenced:
{
xtype: 'templatecolumn',
header: 'Example With Date',
flex: 1,
tpl:'<span style="display:inline-table;width:50%;">{first_name}</span><span style="width: 50%;display: inline-table;text-align: right;">{myDate}</span>'
}
Hi i have an Extjs 4 form that i want to fill with a record of my store.
Here is the model:
Ext.define('Policy', {
extend: 'Ext.data.Model',
fields: [
{name:'policyName', type:'string'},
{name:'description', type:'string'},
{name:'agreement', type:'string'}
]
});
And here is the htmleditor field:
{
xtype: 'htmleditor',
fieldLabel : 'Agreement',
name: 'agreement'
}
When the form is shown i call to the loadRecord method in order to fill the fields. The name and description policy fields are correctly filled but the agreement field is not filled. This is the way i fill the fields:
var record = store.findRecord('policyName', policyName);
formPanel.getForm().setValues(record.data);
If i have the agreement field as a textfield it works ok, but i need an advanced view of this text because it is in html format. Does anybody know how to fill the htmleditor field?
Additionally... is it possible to view the html in raw mode on this field?
You could also do it this way and I know it works since I use it.
Ext.getCmp('formpanel').getForm().setValues(record.data);
Assuming you have one record you're trying to load and the name of the fields in the model match the name of the form fields.