absent: ext-column's Renderer inner property

fabriciomurta commented 4 years ago

The ext-column component ignores a Renderer inner property. Whilst it does not prevent the page from rendering at all, the renderer code won't get rendered to the component (as if it weren't specified).

Issue explored at gridpanel/arraygrid/simple/index.cshtml#L91.

Examples referencing the feature

WebForms examples matching `<ext:Column` and `<Renderer`

Because the renderer is usually defined in another line, some examples may contain <Renderer references to parts of the code not within the ext:Column blocks.

MVC examples matching `\.Column\(.*\.Renderer\(`

(renderers necessarily pertaining the column)

AndreyChechel commented 4 years ago

The renderer property is available as an <ext-column /> element attribute.

Actual

<Columns>
    <ext-column Text="Company" DataIndex="company" Flex="1" />
    <ext-column Text="Price" DataIndex="price">
        <Renderer Format="UsMoney" />
    </ext-column>
    <ext-column Text="Change" DataIndex="change">
        <Renderer Fn="change" />
    </ext-column>
    <ext-column Text="Change" DataIndex="pctChange">
        <Renderer Fn="pctChange" />
    </ext-column>
    <ext-datecolumn Text="Last Updated" DataIndex="lastChange" Width="120" />
</Columns>

Revised

<Columns>
    <ext-column Text="Company" DataIndex="company" Flex="1" />
    <ext-column Text="Price" DataIndex="price" renderer="Ext.util.Format.usMoney" />
    <ext-column Text="Change" DataIndex="change" renderer="change" />
    <ext-column Text="Change" DataIndex="pctChange" renderer="pctChange" />
    <ext-datecolumn Text="Last Updated" DataIndex="lastChange" Width="120" />
</Columns>

fabriciomurta commented 4 years ago

For the record, scenarios like this:

<Columns>
    <ext:Column
        runat="server"
        Flex="1"
        Editor="true"
        DataIndex="Value">
        <Renderer Handler="metadata.style='color:gray;'; return '[none]';" />
    </ext:Column>
</Columns>

Will have to be expressed as:

<columns>
    <ext-column
        flex="1"
        editor="true"
        dataIndex="Value"
        renderer="function (value, metadata, record, rowIndex, colIndex, store, view) { metadata.style='color:gray;'; return '[none]'; }"
        />
</columns>

In other words, the function arguments will have to be expressed all the time. Although similar to declaring the function itself, it means there's no longer a shorthand for that as Ext.NET 5's <Renderer Handler="..." /> did.

Basically there are five different argument sets to renderer throughout Ext.NET at least as far as WebForms Examples Explorer uses of Renderer within:

ext:*Axis: axis, label, layoutContext, lastLabel
ext:*Column: alue, metadata, record, rowIndex, colIndex, store, view
ext:*Series: sprite, config, rendererData, index
Label: text, sprite, config, rendererData, index
Tooltip: toolTip, record, context

geoffreymcgill commented 4 years ago

Using an inner <renderer> with the fn attribute would be preferred, although this does not appear to be currently supported.

<ext-column
    flex="1"
    editor="true"
    dataIndex="Value">
    <renderer fn="function (value, metadata, record, rowIndex, colIndex, store, view) { metadata.style='color:gray;'; return '[none]'; }" />
</ext-column>

extnet / Ext.NET