Is there a way to have UI Grid fill in empty rows to fill your grid's height?
CSS:
.myGrid{
width: 100%;
height: 600px;
}
HTML:
<div ui-grid="{data: folderData}" class="myGrid"></div>
JS:
$scope.folderData =[
{
"folderName": "My Photos",
"folderPath": "/path/pictures",
"fileCount": "400",
"fileSize": "150MB"
}
//...
];
As a hack you can always add empty rows at the end of the gridOptions data and it will add empty fields
for (i=0; i<30; i++)
scope.gridOptions.data. push({ name : 'folderName' , 'folderPath': '', 'fileCount' : '', 'filesize': '' });
Or event better add an background image as the background of the DIV
.ui-grid-render-container-body
that looks like the rows grid you use
Related
Currently using react-data-grid and it only shows a single line text, however I am trying to display multi line text.
sandbox:
https://codesandbox.io/s/5vy2q8owj4?from-embed
You can override the data-grid cell content class to your file.
Render:
<div class="react-grid-multiline-content">
<ReactDataGrid columns={columns} rowGetter={i => rows[i]} rowsCount={rows.length}/>
</div>
Style:
.react-grid-multiline-content .react-grid-Cell__value {
white-space: normal !important;
}
I was able to solve a similar problem by resetting the cells' line-height CSS property.
Before:
After:
My columns:
const columns: Column<MyRow>[] = [
{
key: "id",
name: "ID"
},
{
key: "addressSummary",
name: "Address",
formatter: (formatterProps) => <AddressBlock {...formatterProps.row} />,
cellClass: "normalLineHeight" // Need to reset the line height on affected cells
}
];
CSS:
.normalLineHeight {
line-height: normal;
}
Here is the sample code: https://codesandbox.io/s/react-data-grid-multi-line-content-fix-u6im0
getRowHeight={() => 'auto'}
It will break lines automaticaly in mui DataGrid
I'm using angular ui-grid and have a long grid with almost 30 columns, I want to set fixed width for columns so that at least column header can be seen easily. Is there a way to set, say 10% width for all the columns, or I have to do it for each column one by one.
After setting the min-width on ui-grid-header-cell many columns got combined into one
.ui-grid-header-cell {
min-width: 150px !important;
}
If you are looking for fixed width, you can use the width property in the colomnDefs like this:
columnDefs : [
{ field : 'pageIcon', displayName : 'Page Icon', width : 25},
{ field : 'pageName', displayName : 'Page Name', width : 100},
{ field : 'count', displayName : 'Count', width : '30%'}
]
After you have set your column definitions, you can add the following
for (var i = 0; i < $scope.gridOptions.columnDefs.length; i++) {
$scope.gridOptions.columnDefs[i].width = '10%';
}
This will set all of the columns to the width you select. With 30 columns at 10% the user will use the horizontal scrollbar to see all the columns, as you prefer. I didn't change any CSS.
The best way is to use the GridOptions minimumColumnSize property:
$scope.gridOptions.minimumColumnSize = 100;
Zero performance impact and no oddities with the CSS methods.
Reference page, Ctrl-F minimumColumnSize: http://ui-grid.info/docs/#!/api/ui.grid.class:GridOptions
Try by the following function by calling before ui-grid data source binds.
function SetColumnWidth() {
var cols = _.filter($scope.gridOptions.columnDefs, function (c) {
return c.visible != false;
});
var maxWidth = (document.documentElement.clientWidth) / cols.length;
for (var i = 0; i < cols.length; i++) {
cols[i].maxWidth = parseInt(maxWidth);
}
}
set column width to width: "*" and set minWidth as per convinient.
This solution is work for any screen as, especially large resolution screen. It will manage to equally divide maxWidth of all columns and cover the whole area of the screen.
you can add a style to your css
.ui-grid-header-cell {
min-width: 200px !important;
max-width: 300px !important;
}
If you will add width using for loop or like ways it may slow down rendering of your grid, So I would suggest to do it via CSS. Because I had same problem with 15,000 rows and 80 columns and I tried adding width using loop and it seems to slow down rendering of grid. So, Try adding below code in your CSS, it will solve your purpose.
.ui-grid-header-cell {
min-width: 200px !important;
max-width: 300px !important;
}
.ui-grid-cell {
min-width: 200px !important;
max-width: 300px !important;
}
Users do not like the scrolling tabs in the tabpanel. Is there any solution to order tabs in multiple rows?
var tp = Ext.create('Ext.tab.Panel', {
anchor: '100%',
border: 0,
items: [form, grid /*, ... */]
tabBar: {
// ???
}
});
It's not possible in ExtJS4.
You can either write your own CSS for tabpanel or a custom extension, which will do the trick.
I have a splibutton with a menu item. I want to make the width of the drop down equal to the split button width. Additionally I want to align the text in the center. How should I do it?
The width of the menu will be based on the width of the content inside. So if the width of the button will always be the same, you could set the width of the menu to that same value or you can get the width of the button and set it to the menu before rendering it.
As for centering the text, you have two options. Either via CSS, add a custom CLS to your menu and add the following CSS:
.yourCustomCls .x-menu-item-link {
text-align: center;
}
.yourCustomCls .x-menu-item-indent-no-separator {
margin-left: 0;
}
Or add the config plain: true to your menu and a style centering the text as in my example.
Example:
Ext.create('Ext.button.Split', {
renderTo: Ext.getBody(),
text: 'Commit Automatically',
menu: new Ext.menu.Menu({
plain: true,
style: 'text-align: center;',
items: [
{text: 'Commit On Trigger', handler: function(){ alert("Item 1 clicked"); }}
],
listeners: {
beforerender: function () {
this.setWidth(this.up('button').getWidth());
}
}
})
});
I would like to put a red asterisk after a fieldlabel in order to say the user must fill the field. Is there a way to add directly css code in the js code? Like the parameter style for example but only for the asterisk
var blablaField = new Ext.form.TextField({
fieldLabel : 'Name *',
allowBlank : false,
width : 300
});
You have at least three (IMO) clean ways to archive this:
To do it automatically do it for any field that didn't allow blank you should use a custom form extension like this.
Ext.define('Ext.ux.form', {
extend: 'Ext.form.Panel',
initComponent: function() {
var me = this;
me.on('beforeadd', function(form, field){
if (!field.allowBlank)
field.labelSeparator += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
});
me.callParent(arguments);
}
});
If you just want to do it for one field you can use the afterLabelTextTpl or the afterLabelTpl config property and apply something like
<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>
Or you can add it directly to the label-text like
fieldLabel : 'Name<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>'
Where the first is the one I like most because you need to do nothing extra expect setting the required flag.
Edit
If you don't wan't to apply the asterix to any field that does not allow blank when it get's added to the form you may introduce a new property like skipLabelAppendix. You may set this property to any field that should not get the asterix appended after the label. And don't forget to include it into the form like so
me.on('beforeadd', function(form, field){
if (!field.allowBlank && !field.skipLabelAppendix)
field.labelSeparator += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
});
An approach that you might find more elegant is adding a css class to any field label that is marked with allowBlank=false and style your mandatory indicator in CSS.
Ext.define('Ext.ux.form', {
extend: 'Ext.form.Panel',
listeners: {
'beforeadd': function(){
if (!field.allowBlank) {
field.labelClsExtra = 'x-required';
}
}
}
});
You can then style your field label in CSS with an :after pseudo utility:
.x-required:after {
content: ' *';
color: red;
font-weight: bold;
}