Related
I'm using material-table version 1.69.2 which is latest now. I want to add a label to the search textfield displayed above the table.
Any help is much appreciated.
<MaterialTable
title=""
columns={[
{ title: "id", field: "CurrencyKey", hidden: true },
{ title: "Currency", field: "CurrencyName" },
{ title: "Currency code", field: "CurrencyCode" },
{ title: "Status", field: "IsDeleted" },
{ title: "Last modified", field: "DateModified" }
]}
data={data.list}
icons={tableIcons}
options={{
pageSize: 50,
pageSizeOptions: [50, 100, 150],
paginationPosition: "both",
searchFieldAlignment: "left",
search: true,
}}
localization={{
toolbar: {
searchPlaceholder: 'Search',
searchAriaLabel: 'Search here'
},
pagination: {
labelRowsSelect: 'Rows per page'
}
}}
/>
How to define a custom filter-function for a column or cell? Just as an example, assume we have a text value and in the header there is a search input
How to tell the gridview to call a function
class FooComponent {
protected doSomeFilter (value: string, searchQuery: string) {
if (someConditions(value, searchQuery)) {
return true;
}
return false;
}
}
And I would expect to use it like this:
<dxi-column
dataField="myFooProperty"
[(customFilter)]='doSomeFilter'
></dxi-column>
But the GridView doesn't support customFilter method, and nothing similar. Do you know how to achieve such custom filtering in devexpress, looks very simple but I'm struggling with this for hours. Thank you in advance.
This example shows how to filter data using the filter panel. You can use its check box to enable/disable the current filter expression, and clicking on this expression opens the integrated filter builder. Note that changes made in it are reflected in the filter row and header filter, and vice versa, from (https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/FilterPanel/jQuery/Light/), Please see this:
$("#gridContainer").dxDataGrid({
dataSource: orders,
columnsAutoWidth: true,
filterRow: { visible: true },
filterPanel: { visible: true },
headerFilter: { visible: true },
filterValue: [["Employee", "=", "Clark Morgan"], "and", ["OrderDate", "weekends"]],
filterBuilder: {
customOperations: [{
name: "weekends",
caption: "Weekends",
dataTypes: ["date"],
icon: "check",
hasValue: false,
calculateFilterExpression: function() {
return [[getOrderDay, "=", 0], "or", [getOrderDay, "=", 6]];
}
}]
},
filterBuilderPopup: {
position: { of: window, at: "top", my: "top", offset: { y: 10 } },
},
scrolling: { mode: "infinite" },
showBorders: true,
columns: [{
caption: "Invoice Number",
dataField: "OrderNumber",
dataType: "number",
headerFilter: {
groupInterval: 10000
}
}, {
dataField: "OrderDate",
dataType: "date"
}, {
dataField: "SaleAmount",
dataType: "number",
format: "currency",
editorOptions: {
format: "currency",
showClearButton: true
},
headerFilter: {
dataSource: [ {
text: "Less than $3000",
value: ["SaleAmount", "<", 3000]
}, {
text: "$3000 - $5000",
value: [["SaleAmount", ">=", 3000], ["SaleAmount", "<", 5000]]
}, {
text: "$5000 - $10000",
value: [["SaleAmount", ">=", 5000], ["SaleAmount", "<", 10000]]
}, {
text: "$10000 - $20000",
value: [["SaleAmount", ">=", 10000], ["SaleAmount", "<", 20000]]
}, {
text: "Greater than $20000",
value: ["SaleAmount", ">=", 20000]
}]
}
}, {
dataField: "Employee",
dataType: "string"
}, {
caption: "City",
dataField: "CustomerInfo.StoreCity",
dataType: "string"
}, {
caption: "State",
dataField: "CustomerInfo.StoreState",
dataType: "string"
}]
});
Also see this: https://jsfiddle.net/mx1ovwp1/7/
$("#gridContainer").dxDataGrid({
dataSource: employees,
filterRow: {
visible: true,
applyFilter: "auto"
},
groupPanel:{
visible: true
},
searchPanel: {
visible: true,
width: 240,
placeholder: "Search..."
},
headerFilter: {
visible: true
},
paging: {
enabled: false
},
editing: {
mode: "form",
allowUpdating: true
},
columns: [
{
dataField: "Prefix",
caption: "Title",
width: 70
},
"FirstName",
"LastName", {
dataField: "Position",
width: 170
}, {
dataField: "StateID",
caption: "State",
width: 125,
lookup: {
dataSource: states,
displayExpr: "Name",
valueExpr: "ID"
}
}, {
dataField: "BirthDate",
dataType: "date"
}
]
});
Also refer to this link(dxDataGrid - How to implement a custom filter for a date field):
https://supportcenter.devexpress.com/ticket/details/t490195/dxdatagrid-how-to-implement-a-custom-filter-for-a-date-field
For the demo from DevExtreme, see this:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/jQuery/Light/
Below is what my table looks like in code. How can i control each column and make them have different widths?
{ id: 1, name: "Item 1", price: 100 },
{ id: 2, name: "Item 2", price: 102 }
];
const ProductList = props => {
const columns = [
{
dataField: "id",
text: "Product ID"
},
{
dataField: "name",
text: "Product Name"
},
{
dataField: "price",
text: "Product Price"
}
];
return (
<div style={{ padding: "20px" }}>
<h1 className="h2">Products</h1>
<BootstrapTable keyField="id" data={products} columns={columns} />
</div>
);
};```
You can use style prop
{
dataField: "name",
style: {
width: '90px'
}
text: "Product Name"
}
While surfing and searching for the solution, i stumbled upon their well documented doc page. Initially, it's the name react-bootstrap-table-next that was confusing me: it is well known as react-bootstrap-table2.
So, to control the width of a react-bootstrap-table-next table column, you should add classes props to style it externally or style to use inline style. Both props have the capability to take a callback function to better manipulate it.
The code will now look like below:
Here manipulating the width of the first column:
const ProductList = props => {
const columns = [
{
dataField: "id",
text: "Product ID",
style: {
width: '12em',
}
},
{
dataField: "name",
text: "Product Name"
},
{
dataField: "price",
text: "Product Price"
}
];
return (
<div style={{ padding: "20px" }}>
<h1 className="h2">Products</h1>
<BootstrapTable keyField="id" data={products} columns={columns} />
</div>
);
};
The storybook is pretty straight forward.
Just give the width to columns
const columns = [
{
dataField: "id",
text: "Product ID",
style:{'width' : '90px'}
},
{
dataField: "name",
text: "Product Name",
style:{'width' : '90px'}
},
{
dataField: "price",
text: "Product Price",
style:{'width' : '90px'}
}
];
I am having datagrid where in i have a custom cell template for a particular column.
I have also grouped the data with a particular column and i am displaying group summaries for some column at group footer.
My problem is the column with custom cell template which i havent assigned any group summary shows the cell template at footer.
Please check the codepen link to know the problem
https://codepen.io/aasiph/pen/qYBVMd
$("#gridContainer").dxDataGrid({
dataSource: orders,
keyExpr: "ID",
selection: {
mode: "single"
},
columns: [{
dataField: "OrderNumber",
width: 130,
caption: "Invoice Number"
}, {
dataField: "OrderDate",
width: 160,
dataType: "date",
}, {
dataField: "Employee",
groupIndex: 0
}, {
caption: "City",
dataField: "CustomerStoreCity"
}, {
caption: "State",
dataField: "CustomerStoreState",
}, {
dataField: "SaleAmount",
alignment: "right",
format: "currency"
}, {
dataField: "TotalAmount",
alignment: "right",
format: "currency"
},{
caption: "",
allowGrouping: false,
allowFiltering: false,
allowSorting: false,
cellTemplate: function (container, options) {
$('<div>View</div>')
.appendTo(container);
}
}
],
sortByGroupSummaryInfo: [{
summaryItem: "count"
}],
summary: {
groupItems: [{
column: "OrderNumber",
summaryType: "count",
displayFormat: "{0} orders",
}, {
column: "SaleAmount",
summaryType: "max",
valueFormat: "currency",
showInGroupFooter: false,
alignByColumn: true
}, {
column: "TotalAmount",
summaryType: "max",
valueFormat: "currency",
showInGroupFooter: false,
alignByColumn: true
}, {
column: "TotalAmount",
summaryType: "sum",
valueFormat: "currency",
displayFormat: "Total: {0}",
showInGroupFooter: true
}]
}
});
});
I dont want the cell template to be displayed in group footer.
cellTemplate: function (container, options) {
if(options.rowType == "groupFooter") return;
$('<div>View</div>')
.appendTo(container);
}
if(options.rowType == "groupFooter") return; solved the problem. Problem was resolved through DevExpress support.
I have successfully implemented this slide navigation library. I can slide the main viewport in and out to reveal and hide the navigation on the left of the viewport.
However, I'm unable to find a way of hiding and showing the navigation via button click. How can I tie in my existing slide navigation into a button click action?
UPDATE:
My attempt to add a customized bar to Main.js was a matter of extending TitleBar in a class called CustomBar. I then used it via xtype in Main.js. The code below shows my Main.js code with configuration for the Slide Navigation library:
Ext.define('RT.view.Main', {
extend: 'Ext.ux.slidenavigation.View',
xtype: 'main',
requires: [
'Ext.TitleBar',
// 'Ext.Video'
],
config: {
fullscreen: true,
// slideSelector: 'x-toolbar',
slideSelector: '',
containerSlideDelay: 10,
selectSlideDuration: 200,
itemMask: true,
/*slideButtonDefaults: {
selector: 'toolbar'
},*/
listPosition: 'left',
list: {
maxDrag: 300,
width: 200,
items: [
{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Menu',
centered: false,
width: 200,
left: 0,
},
items: [{
docked: 'top',
xtype: 'searchfield',
placeHolder: 'search',
width: 180
}]
}
]
},
slideButton: true,
slideButton: {
selector: 'toolbar'
},
defaults: {
style: 'background: red',
xtype: 'container',
},
/****************************************************/
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'custombar',
},
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
},
{
title: 'Messages',
xtype: 'messages',
iconCls: 'user',
},
{
title: 'Sections',
xtype: 'sections'
},
{
title: 'submenu#1',
html: 'submenu#1',
group: 'Group 2',
},
{
title: 'submenu#2',
html: 'submenu#2'
},
{
title: 'submenu#3',
html: 'submenu#3'
},
]
}
});
My customBar.js code is as follows:
Ext.define('RT.view.CustomBar',{
extend: 'Ext.TitleBar',
xtype: 'custombar',
config:{
title: 'TESTING ...',
items: [
{
// name: 'BTNslidenav',
iconMask: true,
iconCls: 'list',
ui: 'plain',
},
{
iconMask: true,
// iconCls: 'user',
iconCls: 'star',
ui: 'plain',
align: 'right'
}
]
}// config
});
This customBar code is used by Views statically. My LIST components use a different solution for getting the NavigationBar and adding components to it to generate a similar looking bar as CustomBar.
I need to make a connection between my pre-existing LIST icon button from CustomBar.js with the Slide Navigation functionality - so I can drag or click the icon to show/hide the navigation menu.
UPDATE#2
Having followed your direction in your update below and in my previous question, the solution I implemented for placing my LIST back buttons into the same toolbar as my custom navigation no longer worked. The image below shows my results:
I had been successfully using the following code to detect the messages and sections list views, get the navigation bar and place my icons into the bar. My thinking was to then use a listener on the list icon to show/hide the menu. However, as there is no listener and just the slideButton configuration, my code is redundant:
Ext.define('RT.controller.BarGenerator', {
extend: 'Ext.app.Controller',
config: {
refs: {
messagesView: 'messages',
sectionsView: 'sections'
},
control: {
'sections': {
initialize: 'generateBarSections'
},
'messages': {
initialize: 'generateBarMessages'
},
}
},
//called when the Application is launched, remove if not needed
launch: function(app) {
},
generateBarSections: function(list, record){
console.log('LOADING ICONS AND CUSTOMIZING BAR!');
navigationview = this.getSectionsView().getNavigationBar();
navigationview.add(
{
// name: 'BTNslidenav',
id: 'BTNslidenav',
iconMask: true,
iconCls: 'list',
ui: 'plain',
},
{
id: 'BTNuser',
iconMask: true,
iconCls: 'user',
ui: 'plain',
align: 'right'
}
);
},
generateBarMessages: function(list, record){
console.log('LOADING ICONS AND CUSTOMIZING BAR!');
navigationview = this.getMessagesView().getNavigationBar();
navigationview.add(
{
slideButton: {
selector: "custombar"
},
// name: 'BTNslidenav',
id: 'BTNslidenav',
iconMask: true,
iconCls: 'list',
ui: 'plain',
},
{
id: 'BTNuser',
iconMask: true,
iconCls: 'user',
ui: 'plain',
align: 'right'
}
);
}
});
The Ext.ux.slidenavigation.View comes with a slide button functionality.
You only need to specify where the button should be.
You can populate the items array of the Ext.ux.slidenaviagtion.View with containers. These containers have a property slideButton where you can define a selector which is used to find the component into which the button should be inserted.
items : [
{
xtype : 'container',
group : 'my first group',
slideButton :
{
selector : 'toolbar'
},
items :
[
{
xtype : 'toolbar',
itemId : 'start_toolbar',
title : 'first view',
docked : 'top'
},
{
xtype : 'start'
}
]
},
{
xtype : 'container',
group : 'my first group',
slideButton :
{
selector : 'toolbar'
},
items :
[
{
xtype : 'toolbar',
title : 'second view',
docked : 'top'
},
{
xtype : 'anotherview'
}
]
}
]
In the example the items array of the Ext.ux.slidenavigation.View holds 2 containers. A container always holds two components. A toolbar and the actual view I want to show. The slideButton config property defines that the button is inserted into a component with the xtype toolbar.
Update:
Thank you for providing some code. I have rearranged your code, so it fits my example.
Ext.define('RT.view.CustomBar',{
extend: 'Ext.TitleBar',
xtype: 'custombar',
config:{
title: 'TESTING ...',
items: [
{
iconMask: true,
// iconCls: 'user',
iconCls: 'star',
ui: 'plain',
align: 'right'
}
]
}// config
});
First, I have removed your button from your custombar. The slide navigation will create the button for you.
Ext.define('RT.view.Main', {
extend: 'Ext.ux.slidenavigation.View',
xtype: 'main',
requires: [
'Ext.TitleBar'
],
config: {
fullscreen: true,
containerSlideDelay: 10,
selectSlideDuration: 200,
itemMask: true,
listPosition: 'left',
list: {
maxDrag: 300,
width: 200,
items: [
{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Menu',
centered: false,
width: 200,
left: 0,
},
items: [{
docked: 'top',
xtype: 'searchfield',
placeHolder: 'search',
width: 180
}]
}
]
},
slideButton: true,
/****************************************************/
slideButtonDefaults: {
iconMask: true,
iconCls: 'list',
ui: 'plain'
},
items: [
{
xtype: "container",
group: "first group",
title: 'Welcome',
iconCls: 'home',
slideButton: {
selector:"custombar"
},
items: [
{
docked: 'top',
xtype: 'custombar',
},
{
styleHtmlContent: true,
scrollable: true,
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
}
]
},
{
xtype: "container",
group: "first group",
title: 'Messages',
iconCls: 'user',
slideButton: {
selector: "custombar"
},
items: [
{
docked: 'top',
xtype: 'custombar',
},
{
xtype: 'messages'
}
]
}
]
}
});
Since the slide navigation will create the slide button for you, you can use slideButtonDefaults to customize it.
The items array of the slide navigation is the important part.
It contains now two containers. That means you get two entries in the side navigation. Each of these container contain your custombar and the view you actually want to show when one taps an entry in the side navigation.
Each of the wrapping container define where the slide button will be placed in its child views. It's done by
slideButton: {
selector: 'custombar'
}
And that's it.
Update#2
This happens because you have multiple toolbars now. The testing-toolbar is inserted into every container that will be displayed by the slide navigation. The other toolbar comes from the navigation view which is hosted inside the slide navigation container.
The are some ways to "fix" it.
First you could hide the navigation view toolbar when it comes active and your first view inside the navigation view is shown. It's important that this view is a view that will never have a logical predecessor. So there will never be any reason to have a back button at that level. When you start navigating in the navigation view and you push more and more views to it you can hide the 'testing'-toolbar. The question is: is it important that you have the slide button in every child view or is it good enough to have it on the top view only. Consider this: to many buttons in a toolbar is quite to much and might confuse the user. Opening the slide navigation is still possible by swiping.
Or you don't use your custombar at all but customize the titlebar of the navigation view. The items array of your slide navigation would look like this:
items: [
{
xtype: "container",
group: "first group",
title: 'Welcome',
iconCls: 'home',
slideButton: {
selector:"titlebar"
},
items: [
{
xtype: "navview"
}
]
},
{
xtype: "container",
group: "first group",
title: 'Messages',
iconCls: 'user',
slideButton: {
selector: "tilebar"
},
items: [
{
xtype: 'navView2'
}
]
}
]
But be aware of having two buttons in the navigation titlebar (docked to the left) when you start pushing views.