components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.title
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.description
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.main-demo-title
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.main-demo-description
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.DemoSection.react-example-label
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.DemoSection.example-label
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingMainDemo.login-required
app.buttons.save.label
app.buttons.refresh.label
| components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingMainDemo.column-full-name | components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingMainDemo.column-email | components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingMainDemo.column-phone | components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingMainDemo.column-age | components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingMainDemo.column-account |
|---|
|
|
|
| | |
|
|
|
| | |
|
|
|
| | |
|
|
|
| | |
|
|
|
| | |
|
|
|
| | |
|
|
|
| | |
|
|
|
| | |
|
|
|
| | |
|
|
|
| | |
Razor
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.enable-title
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.enable-description
React
<MainGrid tableName="contact" allowEdit>
<GridColumns>
<GridColumn columnName="firstname" />
<GridColumn columnName="lastname" />
<GridColumn columnName="emailaddress1" />
</GridColumns>
</MainGrid>
Blazor
<MainGrid TableName="contact" AllowEdit="true">
<GridColumns>
<GridColumn ColumnName="firstname" />
<GridColumn ColumnName="lastname" />
<GridColumn ColumnName="emailaddress1" />
</GridColumns>
</MainGrid>
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.enable-note-title
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.enable-note-description
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.auto-editor-title
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.auto-editor-description
- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.auto-editor-string
- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.auto-editor-number
- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.auto-editor-bool
- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.auto-editor-choice
- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.auto-editor-multi-choice
- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.auto-editor-lookup
- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.auto-editor-date
- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.auto-editor-money
- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.auto-editor-file
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.custom-editor-title
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.custom-editor-description
React
{/* components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-custom-react-comment-line1
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-custom-react-comment-line2
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-custom-react-comment-line3
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-custom-react-comment-line4
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-custom-react-comment-line5 */}
<GridTemplateColumn
displayName="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-custom-email-display"
dependsOn={['emailaddress1']}
sortBy="emailaddress1"
cellRenderer={({ record }) => {
const email = (record.properties?.emailaddress1 as { value?: string })?.value;
return <span>{email}</span>;
}}
editRenderer={() => (
<TextEdit columnName="emailaddress1" displayLabelWhenAvailable={false} />
)}
/>
Blazor
<!-- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-custom-razor-comment-line1
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-custom-razor-comment-line2
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-custom-razor-comment-line3
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-custom-razor-comment-line4
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-custom-razor-comment-line5 -->
<GridColumn ColumnName="emailaddress1">
<ChildContent>
@{
var email = context.PrimaryRecord
.GetValueOrDefault<StringValue>("emailaddress1")?.Value;
}
@if (this.Editable)
{
<TextEdit ColumnName="emailaddress1"
DisplayLabelWhenAvailable="false"
DisplayTooltipWhenAvailable="false" />
}
else
{
<span>@email</span>
}
</ChildContent>
</GridColumn>
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.validation-title
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.validation-description
- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.validation-required
- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.validation-format
- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.validation-range
- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.validation-custom
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.validation-note-title
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.validation-note-description
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.save-title
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.save-description
React
<MainGrid tableName="contact" allowEdit>
<GridColumns>
<GridColumn columnName="firstname" />
<GridColumn columnName="lastname" />
<GridColumn columnName="emailaddress1" />
</GridColumns>
<GridButtons>
<NewRecordGridButton>
<NewContactForm />
</NewRecordGridButton>
<DeleteRecordGridButton />
</GridButtons>
</MainGrid>
Blazor
<MainGrid TableName="contact" AllowEdit="true">
<GridColumns>
<GridColumn ColumnName="firstname" />
<GridColumn ColumnName="lastname" />
<GridColumn ColumnName="emailaddress1" />
</GridColumns>
<Buttons>
<NewRecordGridButton TForm="NewContactForm" />
<DeleteRecordGridButton />
</Buttons>
</MainGrid>
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.template-edit-title
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.template-edit-description
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.template-edit-when
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.template-edit-pattern1-title
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.template-edit-pattern1-description
React
<GridTemplateColumn
displayName="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-template-edit-full-name-display"
dependsOn={['firstname', 'lastname']}
sortBy="lastname"
cellRenderer={({ record }) => {
const first = (record.properties?.firstname as { value?: string })?.value ?? '';
const last = (record.properties?.lastname as { value?: string })?.value ?? '';
return <strong>{first} {last}</strong>;
}}
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-template-edit-dropin-comment-line1
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-template-edit-dropin-comment-line2
editRenderer={() => (
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
<TextEdit columnName="firstname" displayLabelWhenAvailable={false} />
<TextEdit columnName="lastname" displayLabelWhenAvailable={false} />
</div>
)}
/>
Blazor
<GridTemplateColumn Title="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-template-edit-full-name-display"
DependsOn="@(new[] { "firstname", "lastname" })"
SortBy="lastname">
<ChildContent Context="ctx">
<strong>
@(ctx.Row.PrimaryRecord.GetValueOrDefault<StringValue>("firstname")?.Value)
@(ctx.Row.PrimaryRecord.GetValueOrDefault<StringValue>("lastname")?.Value)
</strong>
</ChildContent>
<!-- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-template-edit-dropin-comment-line1
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-template-edit-dropin-comment-line2 -->
<EditChildContent Context="editCtx">
<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="6"
VerticalAlignment="VerticalAlignment.Center">
<TextEdit ColumnName="firstname"
DisplayLabelWhenAvailable="false"
DisplayTooltipWhenAvailable="false" />
<TextEdit ColumnName="lastname"
DisplayLabelWhenAvailable="false"
DisplayTooltipWhenAvailable="false" />
</FluentStack>
</EditChildContent>
</GridTemplateColumn>
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.template-edit-pattern2-title
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.template-edit-pattern2-description
React
<GridTemplateColumn
displayName="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-template-edit-full-name-display"
dependsOn={['firstname', 'lastname']}
sortBy="lastname"
cellRenderer={({ record }) => {
const first = (record.properties?.firstname as { value?: string })?.value ?? '';
const last = (record.properties?.lastname as { value?: string })?.value ?? '';
return <strong>{first} {last}</strong>;
}}
editRenderer={({ record, setValue }) => {
const first = (record.properties?.firstname as { value?: string })?.value ?? '';
const last = (record.properties?.lastname as { value?: string })?.value ?? '';
const combined = [first, last].filter(Boolean).join(' ');
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-template-edit-custom-widget-comment-line1
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-template-edit-custom-widget-comment-line2-react
return (
<Input
value={combined}
onChange={(_, data) => {
const next = data.value ?? '';
const idx = next.indexOf(' ');
const head = idx === -1 ? next : next.slice(0, idx);
const tail = idx === -1 ? '' : next.slice(idx + 1);
setValue('firstname', { $type: 'StringValue', value: head });
setValue('lastname', { $type: 'StringValue', value: tail || null });
}}
/>
);
}}
/>
Blazor
<GridTemplateColumn Title="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-template-edit-full-name-display"
DependsOn="@(new[] { "firstname", "lastname" })"
SortBy="lastname">
<ChildContent Context="ctx">
@{
var first = ctx.Row.PrimaryRecord.GetValueOrDefault<StringValue>("firstname")?.Value;
var last = ctx.Row.PrimaryRecord.GetValueOrDefault<StringValue>("lastname")?.Value;
}
<strong>@first @last</strong>
</ChildContent>
<EditChildContent Context="editCtx">
@{
var combined =
(editCtx.Row.PrimaryRecord.GetValueOrDefault<StringValue>("firstname")?.Value ?? "")
+ " "
+ (editCtx.Row.PrimaryRecord.GetValueOrDefault<StringValue>("lastname")?.Value ?? "");
}
<!-- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-template-edit-custom-widget-comment-line1
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.snippet-template-edit-custom-widget-comment-line2-razor -->
<FluentTextField Value="@combined.Trim()" ValueChanged="@(next =>
{
var parts = next.Split(' ', 2);
editCtx.SetValue("firstname", new StringValue { Value = parts[0] });
editCtx.SetValue("lastname", new StringValue { Value = parts.Length > 1 ? parts[1] : null });
})" />
</EditChildContent>
</GridTemplateColumn>
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.template-edit-validation-title
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Grids.GridEditing.GridEditingDemoPage.template-edit-validation-description
