Comments (8)
Hi @tandrasi
custom onRender from outside the Editable Grid will override the edit functionality of the grid, as onRender functionality is the crux of editable grid controls support.
We can look at supporting/developing this functionality for customRender. Please feel free to contribute to the repo and I would be happy to help you develop this. :-)
from fluentuieditabledetailslist.
@kushalmehrotra713 I'm up for developing this. I'll check out the code and see what I can come up with and I'll message you if I have troubles. Thanks!
from fluentuieditabledetailslist.
@kushalmehrotra713 hey, I've had an extremely quick look at the code and implemented something fast just as a proof of concept as I've had a very long day at work, but this is what I've come up with so far.
Sorry about the formatting of the code...this has been a nightmare to put here as I have no idea how to use this editor.
I've used the default rendering of a column for simplicity sake: the default rendering of a text field.
In the columnconfigtype.tsx file I've added in the onCustomRender prop as a function:
> export interface IColumnConfig extends IColumn {
> key: string;
> text: string;
> editable?: boolean;
> dataType?: string;
> isResizable?: boolean;
> includeColumnInExport?: boolean;
> includeColumnInSearch?: boolean;
> inputType?: EditControlType;
> calculatedColumn?: { type: CalculationType, fields: any[] };
> onChange?: any;
> maxLength?: number;
> applyColumnFilter?: boolean;
> cellStyleRule?: ICellStyleRulesType;
> dropdownValues?: IDropdownOption[];
> pickerOptions?: IPickerOptions;
> disableSort?: boolean;
> hoverComponentOptions?: IHoverOptions;
> linkOptions?: ILinkOptions;
> onCustomRender?: (item?: any, index?: number, column?: IColumn) => any;**
> };
>
Then, in the default rendering as mentioned, I've added column.onCustomRender ? column.onCustomRender(item, index, column) : undefined:
> (column?.hoverComponentOptions?.enable ?
> (<HoverCard
> type={HoverCardType.plain}
> plainCardProps={{
> onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
> }}
> instantOpenOnClick>
> {RenderTextFieldSpan(props, index, rowNum, column, item, EditCellValue, column.onCustomRender ?
column.onCustomRender(item, index, column) : undefined)}
> </HoverCard>)
> : (RenderTextFieldSpan(props, index, rowNum, column, item, EditCellValue, column.onCustomRender ? column.onCustomRender(item, index, column) : undefined))
> )
This gets passed as customRender to the modified RenderTextFieldSpan function which in turn returns the RenderSpan function value:
const RenderTextFieldSpan = (props: Props, index: number, rowNum: number, column: IColumnConfig, item: any, EditCellValue: (key: string, rowNum: number, activateCurrentCell: boolean) => void, **customRender?: React.ReactNode**): React.ReactNode => { return RenderSpan(props, index, rowNum, column, item, HandleCellOnClick, EditCellValue, HandleCellOnDoubleClick, **customRender**); }
> const RenderSpan = (props: Props, index: number, rowNum: number, column: IColumnConfig, item: any,
> HandleCellOnClick: (props: Props, column: IColumnConfig, EditCellValue: (key: string, rowNum: number, activateCurrentCell: boolean) => void, rowNum: number) => React.MouseEventHandler<HTMLSpanElement> | undefined,
> EditCellValue: (key: string, rowNum: number, activateCurrentCell: boolean) => void,
> HandleCellOnDoubleClick: (props: Props, column: IColumnConfig, EditCellValue: (key: string, rowNum: number, activateCurrentCell: boolean) => void, rowNum: number) => React.MouseEventHandler<HTMLSpanElement> | undefined,
> **customRender?: React.ReactNode**): React.ReactNode => {
> return <span
> id={`id-${props.id}-col-${index}-row-${rowNum}`}
> className={GetDynamicSpanStyles(column, item[column.key])}
> onClick={HandleCellOnClick(props, column, EditCellValue, rowNum)}
> onDoubleClick={HandleCellOnDoubleClick(props, column, EditCellValue, rowNum)}
> >
> {customRender ? customRender : item[column.key]}
> </span>;
> }
>
So, what do we think about this? Check the screenshot. This works with initial testing with targeted custom rendering for the "Salary" column with the "$" prefix. It still allows the cellStyleRule prop and allows editing as expected (either by double clicking on by editing the row).
from fluentuieditabledetailslist.
@kushalmehrotra713 fyi, I've forked the repo as I had a few ideas come about and bug fixes. Find the repo here: https://github.com/infexious-dev/FluentUIEditableDetailsList. I've implemented these fixes alongside other feature implementations. There is some substantial stuff in there.
from fluentuieditabledetailslist.
@kushalmehrotra713 fyi, I've forked the repo as I had a few ideas come about and bug fixes. Find the repo here: https://github.com/infexious-dev/FluentUIEditableDetailsList. I've implemented these fixes alongside other feature implementations. There is some substantial stuff in there.
Hi tandrasi,
Thanks for your wonderful contribution in extending the editable grid.
I have been stuck with Column styling and have opened an issue here :
#117
Have you been successful in applying column styles. Though IColumnConfig Extends IColumn, The applied styles are somehow not applied during run time. Any leads would be really helpful .
Thanks a lot !
Regards,
Priyan
from fluentuieditabledetailslist.
@kushalmehrotra713 fyi, I've forked the repo as I had a few ideas come about and bug fixes. Find the repo here: https://github.com/infexious-dev/FluentUIEditableDetailsList. I've implemented these fixes alongside other feature implementations. There is some substantial stuff in there.
Hi tandrasi,
Thanks for your wonderful contribution in extending the editable grid.
I have been stuck with Column styling and have opened an issue here : #117
Have you been successful in applying column styles. Though IColumnConfig Extends IColumn, The applied styles are somehow not applied during run time. Any leads would be really helpful .
Thanks a lot ! Regards, Priyan
Hi Priyan,
I'll take a look during tomorrow morning during work. My suspicion is that that functionality hasn't been implemented during render. For example, another piece of functionality that was missing that I've implemented in the fork is:
IColumnConfig can utilise inherited "className" and "headerClassName" props correctly from IColumn when rendering in EditableGrid.
So it might be the same thing. I'll have a look and push an update to my forked repo. I really suggest using it as it has come a very long way!
from fluentuieditabledetailslist.
@kushalmehrotra713 fyi, I've forked the repo as I had a few ideas come about and bug fixes. Find the repo here: https://github.com/infexious-dev/FluentUIEditableDetailsList. I've implemented these fixes alongside other feature implementations. There is some substantial stuff in there.
Hi tandrasi,
Thanks for your wonderful contribution in extending the editable grid.
I have been stuck with Column styling and have opened an issue here : #117
Have you been successful in applying column styles. Though IColumnConfig Extends IColumn, The applied styles are somehow not applied during run time. Any leads would be really helpful .
Thanks a lot ! Regards, PriyanHi Priyan,
I'll take a look during tomorrow morning during work. My suspicion is that that functionality hasn't been implemented during render. For example, another piece of functionality that was missing that I've implemented in the fork is:
IColumnConfig can utilise inherited "className" and "headerClassName" props correctly from IColumn when rendering in EditableGrid.
So it might be the same thing. I'll have a look and push an update to my forked repo. I really suggest using it as it has come a very long way!
Thanks for the quick response Tandrasi. I looked at the fork you had created and was able to modify one of the JS files to get the styling to work. You are a life saver !
But I did hit a snag, I was consuming the grid within SPFx and beyond 100 columns, the table goes blank. So I tested with the original Fluent UI Details List and it withstood around 120 columns after which even that went blank. Reducing the columns below 100 brings back the data. It was a rather strange behavior.
Have you faced any such issue, since you have already worked in SPFx , can you please help validate this from your end. Sorry if this is too much of an ask . But if you want to populate a dummy list with 120+ columns, this blog helps us with the script :
https://www.sharepointdiary.com/2021/02/powershell-to-create-multiple-fields-in-sharepoint-online-list-from-a-csv.html
Thanks in Advance !
from fluentuieditabledetailslist.
Hi @PriyaranjanKS,
I've updated the fork to include the "styles" prop fix. So rather than you working off of a modified js file, you can grab the fork directly in your package.json in your SPFx project. Simply do an "npm i" of:
npm i git+https://github.com/infexious-dev/FluentUIEditableDetailsList.git#v1.0.8
It will show up like this in your package.json:
"fluentui-editable-grid": "git+https://github.com/infexious-dev/FluentUIEditableDetailsList.git#v1.0.8",
As you can see here, I'm updating the "cellTitle" and "sortIcon" colors of the "ID" column:
**Now, as for the 100 vs 120 column limit, I'm not sure if this is a hard-limit imposed by the Fluent UI DetailsList, but the only difference between this original repo and my fork is that I'm using an updated version of office-ui-fabric-react, so things might have changed in the latest versions.
from fluentuieditabledetailslist.
Related Issues (20)
- "CSV" Export Fails in SPFx in SharePoint Online outside of Workbench due to SharePoint link manipulation HOT 2
- column minWidth HOT 1
- Footer : onRenderItemColumn
- OnRerender the items are not visible
- Clicking on "Bulk Edit" causes TypeError: Cannot read properties of undefined (reading 'setExtraStackFrame') | react-jsx-runtime.development.js | happens ONLY when serving my SPFx project in development mode HOT 4
- Column filter - automatic remove select all
- Freeze Actions Column as the first Column
- Style not being applied to columns
- Project still active?
- Selection is not working
- Selection is bound to row position but not the actual selected row
- Sorting on dataType 'date' is broken HOT 1
- Grouping items HOT 1
- Unable to extend command bar HOT 2
- Format date
- Modal "Column Filter" strange initial rendered components.
- xlsx vulnerablility in fluent editable grid
- Not loading items from Dataverse table within Power Apps Studio
- When a row is not selected, can you provide an option to display the checkbox?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fluentuieditabledetailslist.