I was able to do the following using kendo-ui-recat-wrapper to get a grouped Grid :
let dataSource = {
data: data,
schema: {
model: {
id: 'id',
expanded: true
}
},
group: [
{
field: 'title', // GroupBy goes on this field
dir: 'asc'
} ] }
And Then I can pass this to the dataSource props of Grid.
I updated to kendo-react-grid it seems more coherent to use in a ReactJs project than the jquery wrapper.
But I didn't find how to get the same result ? There is no mention to the group option. Even here in DataState (link here) I didn't get how to use it ?!
EDIT : The option is not ready yet (Kendo ui React roadmap)
Currently, the native Kendo React Grid supports grouping. The syntax is different than as per the jquery wrapper (i.e. there is no dataSource prop) but I believe this is expected. Here is a simplified version of the official grouping example:
import { Grid, GridColumn as Column } from '#progress/kendo-react-grid';
import { groupBy } from '#progress/kendo-data-query';
import products from './products.json';
class App extends React.PureComponent {
render() {
return (
<Grid
groupable={true}
group={[ { field: 'UnitsInStock' } ]}
data={groupBy(products, [ { field: 'UnitsInStock' } ])}
>
<Column field="ProductID" title="ID" width="50px" />
<Column field="ProductName" title="Product Name" />
<Column field="UnitsInStock" title="Units In Stock" />
</Grid>
);
}
}
Related
I am trying to make a certain column editable( name column ) in material table but it doesn't seem to work. the documentation aren't also that helpful. this is what I tried:
My columns array:
const headers=[
{
title:"id",
field:"id",
},
{
title:"name",
field:"name",
editable:'always', //as per documentation its 'always' by default but still..
editComponent:props=>( //trying to create custom edit component
<input
type="text"
value={props.value}
onChange={e => props.onChange(e.target.value)}/>
)
},
{
title:"email",field:"email"
}
]
my material table component:
<MaterialTable
columns={headers}
data={rows}
icons={tableIcons}
editable={{}}
options={{
search:false,
//padding:"dense",
paging:false,
// addRowPosition:"first",
// actionsColumnIndex:-1,
sorting:false,
exportButton:false,
rowStyle:{
fontSize:"10px",
padding:0,
textAlign:"center"
}
}}
/>
my output:
any help is appreciated.
You need to set the rest of the columns as "uneditable"
{
title:"id",
field:"id",
editable:'never'
}
Don't forget to add cellEditable to your material table tag
cellEditable={{
onCellEditApproved: onCellUpdate,
isCellEditable: () => true,
}}
If you have many columns and you only want a single editable column you can also use the column's field name for specifying which column is editable :
cellEditable={{
onCellEditApproved: onCellUpdate,
isCellEditable: (rowData, columnDef) =>
columnDef.field === "name",
}}
I have a requirement to add custom data attributes to the Fluent UI dropdown.
In javascript/html I could add them like this.
option data-passign="true" data-minpt="3" data-maxpt="6" value="7">Data Quality</option
Can someone help me achieve this in Fluent UI + React?
In FluentUI/React, it's much easier than that, no need for data- attributes, you can just add your custom data directly to the options list (and get it back in the event handlers, or as the selected value if you are using "controlled" scenario). Means, if you don't have a specific requirement to store additional item data in the HTML data attributes for "something else" (like ui-automation tool), then you could go with something like this (note the data property):
const YourComponent = (props) => {
const options = [
{ key: '7',
text: 'Data Quality',
data: { passign: true, minpt: 3, maxpt: 7 }
},
{ key: '42',
text: 'Weather Quality',
data: { passign: true, minpt: 100500, maxpt: 42 }
},
];
const onChange = (evt, item) => {
const itemData = item.data;
console.log(item.key, item.text, itemData);
};
return (
<Dropdown
label="Select something"
options={options}
defaultSelectedKey='7'
onChange={onChange}
/>
);
}
If you want a "controlled" control instead (this one is "uncontrolled"), check out the sample page for the Dropdown:
https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
I am trying to customize Input Text field of react-bootstrap-table2-filter similar option available at https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Text%20Filter&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
I am trying with below code snippet
let dataFilter;
const handleTextChange = (searchDataText) => {
console.log(searchDataText.target.value);
dataFilter(searchDataText.target.value);
};
// This is static and used to define Table Header properties
const columns = [{
dataField: 'data'
, text: ""
, headerFormatter: (column, colIndex) => (<i className="fa fa-podcast"> Name</i>)
, sort: true
, filter: textFilter({
getFilter: (filter) => {
// dataFilter was assigned once the component has been mounted.
dataFilter = filter;
}
})
, headerStyle: {backgroundColor: '#6495ed'}
, headerAlign: 'center'
, align: 'center'
}]
...
...
<Form.Control type="text" placeholder="Search POD" name="search_data_filter"
onChange={handleTextChange}/>
<BootstrapTable keyField='dataKey' data={this.state.tableRows}
columns={columns} bootstrap4={true}
defaultSorted={defaultSorted} striped
hover filter={filterFactory()}
pagination={paginationFactory()}
filter={filterFactory()}
/>
it is almost exact to the given instruction in the above link. But when I execute the code, In console output, I see typed in text is being captured correctly and when it is trying to pass to filter, error occurs ...
dataFilter is not a function
Any help suggestion, alternative approach to implement a custom Text Input as Filter Box outside of Table area?
I'm using Office UI fabric Detail List component (https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist). Is it possible to change the Column header name based on inputs to the Detail List?
I found a way to change the Footer(https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist/customfooter) but not Header since DetailsHeader doesn't have onRenderItemColumn props in it.
Any help?
The DetailsColumn component seems to always render the column's name property value: https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx#L122.
Thus, I think you have to dynamically regenerate a new array of IColumn definitions each time your "inputs" change inside the render call of your component.
MyComponent:
state = { replaceSpaces: false, spaceReplacementChar: '_' };
columns = [{ name: 'Column 1', minWidth: 100, ... }];
...
getColumns(state) {
return this.columns.map((column) => {
return {
...column,
name: state.replaceSpaces
? column.name.replace(/\s/g, state.spaceReplacementChar)
: column.name
};
});
}
...
render() {
return (
<DetailsList
columns={this.getColumns(this.state)}
{...this.othertableProps}
/>
);
}
I am working on searchkit and I am trying to get the results on partial search for search in searchbox,but the results are available when complete text is matched in database.Is there a way to implement this,I have tried
queryOptions={{analyzer: "patrial", default_operator:"AND", allow_leading_wildcard: true, analyze_wildcard: true}}
in my searchbox tag,but it gives error while searching.
This is my code of searchbox:
** <SearchBox
translations={{"searchbox.placeholder":" "}}
autofocus={true}
searchOnChange={true}
// queryOptions=
{{default_operator:"AND"}}
queryOptions={{analyzer: "patrial",
default_operator:"AND", allow_leading_wildcard:
true, analyze_wildcard: true}}
/>**
Try to use the Custom Query in the queryBuilder of the SearchBox component as mentioned in: This answer
const customQueryBuilder = (query, options) => {
return {
"multi_match": {
"query": query,
"fields" : [ "field1", "field2", "field3"]
}
}
}
<SearchBox queryBuilder={customQueryBuilder} autofocus={true} queryOptions={{analyzer:"autocomplete", searchOnChange={true} prefixQueryFields={["field1", "field2", "field3"]} />