I have grid having grouped columns.
Some of my code is as follows:
Ext.require([
'Ext.grid.*',
'Ext.ux.grid.FiltersFeature',
'Ext.ux.LiveSearchGridPanel'
...
]);
var filters = {
ftype: 'filters',
encode: false,
local: true
};
var grid = new Ext.create('Ext.ux.LiveSearchGridPanel', {
selType: 'cellmodel',
store: store,
columns:[
{
header: "Column1"
dataIndex: 'Column1'
},{
header: "Column2",
columns : [{
header: "innerColumn1",
dataIndex: 'innerColumn1'
},{
header: "innerColumn2"
dataIndex: 'innerColumn2'
}]
},{
header: "Column3",
dataIndex: 'Column3'
}],
features: [filters]
...
Now, if I use grid.columnManager.getColumns() it returns following columns:
Column1
innerColumn1
innerColumn2
Column3
It is not returning Column2 which is a parentColumn/groupColumn of innerColumn1 & innerColumn2. Which method of Ext Js I should use to get Column2 as well in the columnList? I am using Ext Js 4.2. Any help will be appreciated.
grid.getColumnmanager().getColumns() does not provide parent column of grouped columns. Column manager is to deal with only leaf columns.
While iterating columns you can access isSubHeader property only available in child groped columns and after that through ownerCt property you can access parent column.
hope this helps.
One of the solution to get all the columns is to make use of Ext ComponentQuery. I have created this fiddle. Look into the developer console of after running this fiddle.
So simplest query to get all the columns is :
grid.query('gridcolumn:not([hidden])')// Open fiddle for full example
It will simply return all visible columns. You can change query according to your requirements.
For Example, to get only the Grouped Column, you can use this
grid.query('gridcolumn[isGroupHeader=true]')
Click here for more information about ComponentQuery.
Related
and I have the following code:
return (
<Box sx={{ height: 400 }}>
<DataGrid columns={columns} rows={rows} />
</Box>
)
and I am having the table getting rendered as:
I want the column of the email to take the width of the widest row cell automatically, so I want the table to render as follows:
My colums and rows look simply as follows:
const columns = [ { field: "firstName" }, { field: "lastName" }, ...etc ]
const rows = [
{ firstName: "Camil Pasa Sokak", lastName: "In The Village", ...etc },
... etc
]
How to do it in MUI x (community table, the free one)?
I want the column of the email to take the width of the widest row cell automatically
please note: since the table is wide, it will automatically show you a scrollbar (x and y scrollbars). I want to keep this functionality, I want to keep these scrollbars (from the x and y) I don't want to disable them.
Here's a sandbox instnce:
https://codesandbox.io/s/strange-newton-z6pwj4?file=/src/App.js
Looking at the docs for the datatable component you are using, it's not super clear the best way to go about it. The crux of the problem is that this is a div + flexbox table and not a true html table. As such, cells within a single column are not really "bound" to each other the same way as a regular html table.
There is a page which addresses column dimensions, but I could not find a satisfactory solution there. I was particularly disappointed that maxWidth seems to do nothing. The closest I got was setting a fixed column width, but I don't think that's what you want:
const columns = [{
field: "email", width: 300,
}]
So then I moved on to their styling cells page, which allows you to have much more control over styling, but this still doesn't work because one flex cell does not affect the size of all flex cells in a column - each row has a different sized cell based on the size of the email address.
const columns = [{
field: "email", cellClassName: "foobar",
}]
<DataGrid columns={columns} rows={rows} sx={{
"& .foobar": {
maxWidth: "300px !important"
}
}} />
So, my best suggestion is to loop over the data, find the longest email address, and set the fixed width based on that. This kinda sucks, but I don't see another way to properly set dimensions for a flexbox-based table:
const longestEmail = rows.reduce((longest, row) => {
return row.email.length > longest.length ? row.email : longest
}, '');
const columns = [{
// play around with the multiplier until you find a suitable width
field: "email", width: longestEmail.length * 9,
}]
This is from the Documentation..Number Signature
<DataGrid
columns={[
{ field: 'username', colSpan: 2, hideable: false },
{
field: 'organization',
sortable: false,
filterable: false,
hideable: false,
},
{ field: 'age', hideable: false },
]}
rows={rows}
{...other}
/>
you can use colspan but it sets all cells in the column to span a given number of columns.
const columns = [{
field: "email",colSpan:2,
},]
I have used the show property to show/hide columns in my table earlier and it has worked fine using react-table v7. However, recently I cannot get it to work any longer, since I've made a bunch of changes and my table is quite complex I'm not sure what caused it, possibly also an update of react-table itself (7.0.0-beta.12 to 7.0.0-rc.5).
Anyway, now I can't even get the most basic show example to work:
const columns = React.useMemo(
() => [
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age",
show: false
},
{
Header: "Visits",
accessor: "visits"
}
]
}
],
[]);
https://codesandbox.io/s/react-table-hide-column-2g3js
Why is the 'age' column showing?
Edit
Digging into the changelog I now understand that column show/hide has indeed changed:
7.0.0-beta.28 Added the useColumnVisibility plugin as a core plugin along with several new instance and column-level methods to control
column visibility Added the "column-hiding" example
However, I still have not figured out how to apply the useColumnVisibility hook to a column in a similar way to how show used to work. The "column-hiding" example shows how to do it with checkboxes but does not help in my case (afaik).
I had a similar issue as I was using show. Instead of setting show in the column, set the initialState.hiddenColumns, here you can convert your existing show into the initial hidden columns:
useTable<T>(
{
columns,
data,
hiddenColumns: columns.filter(column => !column.show).map(column => column.id)
},
I couldn't use that as my columns are loaded dynamically (so the initial state was set to some columns that didn't exist, and was just set to an empty array) so I used:
React.useEffect(
() => {
setHiddenColumns(
columns.filter(column => !column.show).map(column => column.id)
);
},
[columns]
);
where setHiddenColumns is provided by useTable:
const {
headerGroups,
rows,
prepareRow,
state,
toggleRowSelected,
toggleAllRowsSelected,
setHiddenColumns
} = useTable<T>(
{
columns,
data,
getRowId,
...
This means if I changed the column props it would be reflected in the table.
I also use setHiddenColumns to show/hide columns. However, instead returning Header, I use id. My code:
...
setHiddenColumns,
flatColumns,
headerGroups,
state: { pageIndex, pageSize },
} = useTable({
columns,
data,
initialState: { pageIndex: 0 },
manualPagination: true,
pageCount: controlledPageCount,
},
useSortBy,
usePagination
);
React.useEffect(() => {
const hiddenColumns = flatColumns.filter((column: any) => !column.show).map((column: any)=> column.id);
setHiddenColumns(hiddenColumns); }, []);
i am have 2 forms, and in first form i am have button1:
Buttons[{
width: 350,
text: 'Book',
name:'button1'}]
on second form i am have button2, and when button click in second form, then button in first form disabled, before i am use id of button (id:'button1') and make this:
Ext.getCmp('button1').setDisabled(true);
but now i am remove ID and use name in components. But i am didn"t know how disable button1 by name!
Buttons don't have a name property - you should consult the documentation to see what configuration variables you have available to you. I'd instead assign it an itemId so you can make use of the up() and down() functions in order to easily find an item in the component hierarchy from an event handler.
Or if you want to find it directly you can use the following to lookup up the item:
{
text : 'Button',
itemId : 'buttonSelector'
}
var button = Ext.ComponentQuery.query('#buttonSelector');
if(button.length) button[0].disable();
Keep in mind that the ComponentQuery utility returns an array of items (even if you make your itemId unique). Here's a simple fiddle / demonstration.
In response to your comment, there may be confusion in regards to what the buttons config actually does - according to the docs it is shorthand for the following:
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: {minWidth: minButtonWidth},
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: 'Button 1' }
]
}]
... this creates an extra "step" in the hierarchy which you must account for in a query. For example, if your form had an itemId of formId you could try something like:
Ext.ComponentQuery.query('#formId toolbar #myButtonId')[0].disable();
I've updated your fiddle to demonstrate this.
I would like to have a DateTime column in my Kendo UI grid. I've searched on forums, but I didn't find a solution for this problem.
My field for the TimeStamp column is defined such as:
TimeStamp: { type: "date" },
The records are showing data according to the format specified in the template. But I would like to be able to filter my data source with greater precision. However, currently my filter is only able to filter by date. Is there a way to filter by DateTime instead of filtering only by date?
I was informed that this is not possible currently with Kendo UI. I know this is bad news, but this is the answer to my question.
you can achieve it to use template on kendo grid column, create one more property and pass that property in template in kendo grid column.
like
timeStamp: { type: "date" },
timeStamp1: { type: "String" },
pass timestamp1 in template like
{
title: "Last Login",
width: 80,
template: '<span>#= timeStamp1#</span>',
field: "timeStamp",
type: "date"
},
its work fine according your requirement and sorting will work fine like database sorting.
Its Posible:
DeliveredDate: {
type: "datetime",
editable: false,
nullable: false
}
And the template is:
{
field: "DeliveredDate",
title: "Delivered Date",
template: '#= kendo.toString(data.DeliveredDate,"dd/MM/yyyy") === null ? "--/--/----" : kendo.toString(data.DeliveredDate,"dd/MM/yyyy HH:mm") + " Hrs" #',
width: 60,
groupable: false,
sortable: true,
filterable: true
}
The easiest Way to us the TimeStamp format data from your Database for KendoGrid.
In your HTML file, use the data from DB as shown.
<kendo-grid [data]="gridData">
<kendo-grid-column class="CreatedAt" field="CreatedAt" title="title"
[width]="120" [headerStyle]="{'background-color': '#36455a','color': '#fff'}"
[style]="{'background-color': '#36455a','color': '#fff'}">
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem.CreatedAt | date:"yyyy/MM/dd HH:mm:ss"}}
</ng-template>
</kendo-grid-column>
</kendo-grid>
PS: gridData is my var that stores Data from DB. and CreatedAt is one of the fields.
Steps to reproduce:
Open http://dev.sencha.com/deploy/ext-4.0.0/examples/restful/restful.html
Sort data by ID column
Add row
The row will be at top of grid but it can be at bottom
The question: how to sort dynamically added data?
The newly added row is added to the store, see store.insert() in the sample code:
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new Person());
rowEditing.startEdit(0, 0);
}
}, '-', {
text: 'Delete',
iconCls: 'icon-delete',
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
Then it is 'edited' with real values and the store record is updated accordingly.
Maybe all you have to do is to call
store.sort('email', 'ASC');
But refreshing the grid view might be enough, since after all you already ask it to be sorted:
grid.getView().refresh();