IColumnConfig "onRender" (derived from IColumn) kills "edit" functionality

[tandrasi]

Hi,

Don't know if I'm doing something wrong, but setting a custom onRender method in my column config (i.e. to display dates in a specific moment format, bolding text, or even just formatting a number to be displayed as currency with a thousand separator and a '$' prefix) makes it so that the column is no longer "editable".

I think the EditControlType defined in the config gets rendered in the same render method behind the scenes, so it's like I'm overwriting that "editing" functionality completely via my custom onRender.

Is there a workaround for this? Is there a way to put in the "editing" functionality myself in an onRender method? Or better yet, could there be another property like "onRenderDisplay" which controls just the display of the values rather than their editing inputs?

I am more than happy to develop this (or part of this). I would just need guidance on where things are.

Many thanks!

[kushalmehrotra713]

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. :-)

[tandrasi]

@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!

[tandrasi]

@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).

[tandrasi]

@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.

[PriyaranjanKS]

@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

[tandrasi]

@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!

[PriyaranjanKS]

@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!

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 !

[tandrasi]

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.