Is it possible to create a grid with several columns under one header?
+-----------------------+-----------------------+
| Column 1 | Column 2,3,4 |
+-----------------------+-----------------------+
| | | | |
+-----------------------+-----------------------+
| | | | |
+-----------------------+-----------------------+
| | | | |
+-----------------------------------------------+
tried column header grouping but there's no way to hide the sub columns. it'll look something like
+-----------------------+-----------------------+
| Column 1 | Column 2,3,4 |
+ +-----------------------+
| | | | |
+-----------------------+-----------------------+
| | | | |
+-----------------------+-----------------------+
| | | | |
+-----------------------------------------------+
This one requires an override. Here's what your column config should look like:
columns: [
{
text: "Column 1",
// width, other settings
},
{
text: "Columns 2, 3, 4",
// width is computed as sum of child columns
columns: [
{
text: "",
columnName: "Column 2", // custom config
width: // needed
},
{
text: "",
columnName: "Column 3",
width: // needed
},
{
text: "",
columnName: "Column 4",
width: // needed
}
]
}
]
Note the columnName configs that aren't part of the API. That's something I made up for this.
Setting text: "" hides the header for that column. Setting it for all three sub-columns hides the whole row, but leaves you with a thin, 2px tall line where the header would be. Not sure how to remove it. Might be able to CSS it away.
This will give you your desired layout. You can hide the sub-columns via the main column's menu. However, the menu won't look right because there's no text. That's where the columnName comes in.
Find the source for Ext.grid.header.Container#getColumnMenu. You need to create an override for just this function. Here's how it goes:
Ext.override(Ext.grid.header.Container, {
getColumnMenu: function(headerContainer) {
// stuff
for (; i < itemsLn; i++) {
item = items[i];
menuItem = Ext.create("Ext.menu.CheckItem", {
text: item.columnName || item.text // <--- IMPORTANT LINE
// rest of the function is the same
}
});
This will pick up your columnName config if it exists without affecting existing columns that don't use it. Now when you click on the header trigger for your multi-column, you'll get a nested option your sub-columns. If you want to get fancy, you should be able to flatten the hide options through some more overrides, but I'll leave that up to you.
Note: This was all tested on Ext JS 4.0.7. There were some big changes to the header container code in the 4.1 release candidates and I can't guarantee this will work the same way.
Just add style property on your sub-header columns config like this:
columns: [{
header: 'Header',
defaults: {
style: { display: 'none !important' } <--here is the magic
},
items: [{
header: '',
dataIndex: ''
},{
header: '',
dataIndex: ''
}]
}]
Related
I'm trying to create an application. Where I'm using tinymce as editor. In the file panel, I don;t want to show new document. Corrently it's rendering:
But I just want to render it with thse two options:
Can anyone help me with it?
Here is my related config:
plugins: 'print preview ...',
menubar: 'file edit ...',
thanks.
Per the documentation if you want to control what you see on each discrete menu you have to provide those choices explicitly:
https://www.tiny.cloud/docs/configure/editor-appearance/#menu
The defaults are:
menu: {
file: { title: 'File', items: 'newdocument restoredraft | preview | print ' },
edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align lineheight | forecolor backcolor | removeformat' },
tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
help: { title: 'Help', items: 'help' }
}
So if you only want 2 items on the file menu you would have to state that explicitly within the broader menu option:
file: { title: 'File', items: 'preview | print ' },
Here is a TinyMCE Fiddle showing this in action: https://fiddle.tiny.cloud/hYhaab
I'm using AgGrid table in my application. Here is the demo. According to the documentation i want to stop movement of the columns. For this i used:
suppressMovable: true
The above code I used here:
columnDefs: [
{
headerName: 'Athlete', //the generic name of header
children: [
{
field: 'athlete', //children header from generic header
width: 150,
suppressMovable:true
},
{
field: 'age',
lockVisible: true,
cellClass: 'locked-visible',
suppressMovable:true
},
{
field: 'country',
width: 150,
},
{ field: 'year' },
{ field: 'date' },
{ field: 'sport' },
],
...
suppressMovable:true, it works, and the athlete and age columns aren't possible to be moved like others, but this code also disable the movement of the main column: Athlete. So when i try to switch the place of Athlete and Medals columns, i can't, but i don't want this, i want to set this 2 main columns as movable.Question: How to disable movement of columns inside the Athlete and Column, but to keep the movement functionality of these 2 main columns?
Out of the box answer is you can't.
If any child is fixed, then AG Grid doesn't allow moving the group.
you can write custom event listener(if possible) to change the suppressMovable property of child columns while the parent column is being dragged and then again set them to not movable/suppressMovable to true. else you can programatically move all columns in a group using moveColumnByIndex(from,to)
I am using Kendo UI in Asp.net Webforms. I am in a situation where I need to differentiate data that is coming from tables. I want to differentiate the styles of each value based on data.
Example
Value |PrimaryOwnerId
_______________________________________________________________________
EVP-RP&P | False
Execution Coordinator | False
Inspection Lead | False
Instrument, Electrical, and Analyzer | False
Logistics | True
Operations | False
Planning | True
this table I'm binding with kendo dropdown and whatever values have primaryownerId false I want to apply bold font style and other need to be Italic fonts.
function loadValues(PrimaryOwners1, PrimaryOwners2) {
$("#lstPOwner1").kendoDropDownList({
dataSource: PrimaryOwners1,
dataTextField: "text",
dataValueField: "value",
change: function () {
disablecontrol(this.value(), "#btnFilter1")
}
});
}
Please, can anyone help?
You can use kendo templates to achive this
var data = [
{flag: true, value: 'test1'},
{flag: false, value: 'test2'},
{flag: true, value: 'test3'},
{flag: false, value: 'test4'}
]
$('#dropdownlist').kendoDropDownList({
dataSource: data,
dataTextField: "value",
template: '<span style="#= flag ? "font-weight:bold" : "font-style:italic" #">#:value#</span>'
});
Try it in dojo https://dojo.telerik.com/AKAteWoY/2
I want to construct simple register with the grid component with tittle bar and bottom bar constant (I mean title visible always on top and bottom bar visible always on the bottom of the screen):
-------------------------------------
| title bar |
|-----------------------------------|
| |
| pure grid, only rows |
| |
|-----------------------------------|
| bottom bar |
-------------------------------------
simple but I have a problem to set grid parameters. When I set "layout: 'fit'" bottom bar is not visible until I scroll down to the end of the screen. And in this place I can't see title bar.
I want to scroll only rows but app scrolls all the elements.
Be so kind as to prompt me how should I set parameters.
Something like:
Ext.define('MyApp.view.Ranking', {
extend: 'Ext.Panel',
...
requires: [
'Ext.grid.View',
'Ext.grid.column.Number'
],
resizable: true,
initComponent: function() {
var me = this,
upper_tag = {
xtype: 'toolbar',
height: 60,
items: [
{ xtype: 'label', ... }
'->',
{ xtype: 'label', ... }
]
},
lower_tag = {
xtype: 'toolbar',
height: 60,
items: [
{ xtype: 'label', ... }
{ xtype: 'button', ... }
'->',
{ xtype: 'button', ... }
{ xtype: 'button', ... }
]
};
Ext.applyIf(me, {
items: [
upper_tag,
{
xtype: 'gridpanel',
itemId: 'GRD_PW',
layout: 'fit',
height: 750,
store: 'PW_Store',
columns: { ... }
viewConfig: { ... }
},
lower_tag
]
});
me.callParent(arguments);
}
To be clear, this is the better explanation of my need:
1 row
2 row
3 row
4 row
-------------------------------------
| title bar |
|-----------------------------------|
| 5 row ^|
| 6 row ||
| 7 row pure grid, only rows || <-- this is browser screen
| 8 row ||
| 9 row ||
| 10 row v|
|-----------------------------------|
| bottom bar |
-------------------------------------
11 row
12 row
13 row
...
So that's no way to restrict number of rows on the screen and set pagination. It should use full hight of the browser screen. Sometimes 5 sometimee 20 rows.
There is a need to dynamically change a view in ExtJS 4 grid panel.
By default grid is displayed as a table, but in my application I need a feature to switch grid from table view to tiles (or cards) view. Below I tried to represent how it should look like.
Normal view: Tiles view:
====================================== ====================================
| Name | Description | | Name | Description |
====================================== ====================================
| Name 1 | First description |^| | ------ ------ ------ |^|
|----------------------------------|X| | | O O | | # # | | > < | |X|
| Name 2 | Second description |X| | | \__/ | | \__/ | | \__/ | |X|
|----------------------------------|X| | ------ ------ ------ |X|
| Name 3 | Third description | | | Name 1 Name 2 Name 3 | |
|----------------------------------| | | | |
| | | | | ------ ------ ------ | |
| ... | ... |v| | | o O | | - - | | * * | |v|
====================================== ====================================
I have found almost perfect implementation of what I need, named Ext.ux.grid.ExplorerView. However, the extension was developed for ExtJS versions 2.x (3.x), and cannot be reused for ExtJS 4.
I use a grid which is created as simple as:
Ext.create("Ext.grid.Panel", {
store: ...,
columns: [{
header: "Name",
dataIndex: "name",
}, {
header: "Description",
dataIndex: "description"
}],
tbar: [ ... ],
bbar: [ ... ],
listeners: { ... },
multiSelect: true,
viewConfig: {
stripeRows: true,
markDirty: false,
listeners: { ... }
}
});
I have tried to update tpl property of the inner view component, but nothing seems to work.
Do you have any idea of how to make the dynamic switch between the views for a single grid panel?
The problem was easily solved with wonderful feature for grid panel named "Tileview" developed by Harald Hanek. The solution was specially developed for ExtJS 4.
The basic usage example is:
var grid = Ext.create("Ext.grid.Panel", {
store: ...,
columns: [{
header: "Name",
dataIndex: "name",
}, {
header: "Description",
dataIndex: "description"
}],
tbar: [ ... ],
bbar: [ ... ],
listeners: { ... },
multiSelect: true,
viewConfig: {
stripeRows: true,
markDirty: false,
listeners: { ... }
},
features: [Ext.create("Ext.ux.grid.feature.Tileview", {
getAdditionalData: function(data, index, record, orig) {
if (this.viewMode) {
return {
name: record.get("name").toLowerCase(),
};
}
return {};
},
viewMode: 'tileIcons', // default view
viewTpls: {
tileIcons: [
'<td class="{cls} ux-tileview-detailed-icon-row">',
'<table class="x-grid-row-table">',
'<tbody>',
'<tr>',
'<td class="x-grid-col x-grid-cell ux-tileview-icon" style="background-image: url("...");">',
'</td>',
'<td class="x-grid-col x-grid-cell">',
'<div class="x-grid-cell-inner">{name}</div>',
'</td>',
'</tr>',
'</tbody>',
'</table>',
'</td>'
].join(""),
mediumIcons: [ ... ].join(""),
largeIcons: [ ... ].join("")
}
})]
});
To change the view we should just use setView() method, i.e.
grid.features[0].setView("tileIcons");
That's how the feature looks like in the real life.
Example of tile view:
Example of image view:
References:
https://github.com/harrydeluxe/extjs-ux/blob/master/ux/grid/feature/Tileview.js -- Tileview sources
https://github.com/harrydeluxe/extjs-ux -- All Harald's extensions with screenshots
http://www.sencha.com/forum/showthread.php?183023-Thumbnails-in-Grid-with-switching-between-views -- Feature discussion node on Sencha forum
http://harrydeluxe.github.com/extjs-ux/example/grid/tileview.html -- Demo
I wouldn't do it like that. Instead, have a grid and a view in a card layout, the view gives you the ability to have pretty much any markup per item, here's a simple example:
Ext.define('Thing', {
extend: 'Ext.data.Model',
fields: ['name']
});
Ext.require('*');
Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
model: Thing,
data: [{
name: 'Name 1'
}, {
name: 'Name 2'
}, {
name: 'Name 3'
}]
});
var gridActive = true;
var panel = Ext.create('Ext.panel.Panel', {
renderTo: document.body,
width: 400,
height: 400,
layout: 'card',
tbar: [{
text: 'Switch',
handler: function(){
var item;
if (gridActive) {
item = panel.items.last();
} else {
item = panel.items.first();
}
gridActive = !gridActive;
panel.getLayout().setActiveItem(item);
}
}],
items: [{
border: false,
xtype: 'gridpanel',
columns: [{
text: 'Name',
dataIndex: 'name'
}],
store: store
}, {
xtype: 'dataview',
itemTpl: '<b>{name}</b>',
store: store
}]
});
});