You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: knowledge-base/in-place-editor.md
+54-53Lines changed: 54 additions & 53 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -34,23 +34,23 @@ The sample below uses an algorithm which toggles between read-only UI and an edi
34
34
35
35
### How It Works
36
36
37
-
*`TelerikInPlaceEditor` is a generic component. It supports strings and most value types, including nullable types.
37
+
*`InPlaceEditor` is a generic component. It supports strings and most value types, including nullable types.
38
38
* Initially, the component renders a clickable [Button]({%slug components/button/overview%}) with [`Clear``FillMode`]({%slug button-appearance%}) that shows the current `Value`.
39
39
* The component detects the type of its `Value` and renders the appropriate Telerik editor:
40
-
*[CheckBox]({%slug checkbox-overview%}}) for `bool`
41
-
*[DatePicker]({%slug components/datepicker/overview%}}) for `DateTime` and `DateOnly`
42
-
*[NumericTextBox]({%slug components/numerictextbox/overview%}}) for `int`, `double`, `decimal`, and the other numeric types
43
-
*[TextBox]({%slug components/textbox/overview%}}) for `string`
44
-
*[TimePicker]({%slug components/timepicker/overview%}}) for `TimeOnly`
40
+
*[CheckBox]({%slug checkbox-overview%}) for `bool`
41
+
*[DatePicker]({%slug components/datepicker/overview%}) for `DateTime` and `DateOnly`
42
+
*[NumericTextBox]({%slug components/numerictextbox/overview%}) for `int`, `double`, `decimal`, and the other numeric types
43
+
*[TextBox]({%slug components/textbox/overview%}) for `string`
44
+
*[TimePicker]({%slug components/timepicker/overview%}) for `TimeOnly`
45
45
* If the `Width` parameter is not set, the In-Place Editor approximately matches the width of its editor components to the current `Value` length. The component uses a `monospace``font-family` to make this easier.
46
46
* The component features a `ReadOnly` mode that controls the editability, for example, depending on user permissions.
47
47
* The `DisplayFormat` parameter affects the `Value` consistently in both read mode and edit mode.
48
48
* The `Placeholder` parameter provides a helper label that will show when the `Value` is `null` or empty.
49
-
* The `ShowIcons` parameter controls the visibility of optional [SVG Icons]({%slug common-features-icons%}}#svgicon-component). The icons hint users about the ability to edit the component `Value` or provide clickable **Save** and **Cancel** commands in edit mode. The parameter is of type `InPlaceEditorShowIcons`, which is a custom enum and must be imported in both `TelerikInPlaceEditor.razor` and all `.razor` files that use `TelerikInPlaceEditor`.
49
+
* The `ShowIcons` parameter controls the visibility of optional [SVG Icons]({%slug common-features-icons%}}#svgicon-component). The icons hint users about the ability to edit the component `Value` or provide clickable **Save** and **Cancel** commands in edit mode. The parameter is of type `InPlaceEditorShowIcons`, which is a custom enum and must be imported in both `InPlaceEditor.razor` and all `.razor` files that use `InPlaceEditor`.
50
50
* The `Class` parameter allows you to apply custom styles.
51
51
* The `Title` parameter allows you to show a tooltip hint on read mode.
52
52
* To [see invalid state styling and validation messages in Forms]({%slug inputs-kb-validate-child-component%}), pass the respective `ValueExpression` values to the `InPlaceEditor` component.
53
-
*`TelerikInPlaceEditor.razor.css` is a <ahref="https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation"target="_blank">CSS isolation file</a>. It depends on a `YourAppName.styles.css` file in `App.razor` to load.
53
+
*`InPlaceEditor.razor.css` is a <ahref="https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation"target="_blank">CSS isolation file</a>. It depends on a `YourAppName.styles.css` file in `App.razor` to load.
54
54
55
55
### Example
56
56
@@ -69,35 +69,36 @@ Replace `YourAppName` with the actual root namespace of your app.
69
69
<h1>InPlaceEditor Component</h1>
70
70
71
71
<p>
72
-
This in-place editor component works with value types, including nullables
72
+
This in-place editor component works with strings and value types, including nullables, for example:
73
73
74
-
<TelerikInPlaceEditor @bind-Value="@NumericValue"
75
-
DisplayFormat="C2"
76
-
Placeholder="Enter Number..." />
74
+
<InPlaceEditor @bind-Value="@NumericValue"
75
+
DisplayFormat="C2"
76
+
Placeholder="Enter Number..." />
77
77
78
-
The component supports custom styles
78
+
The component supports custom styles and responsive textbox width that depends on the value:
79
79
80
-
<TelerikInPlaceEditor @bind-Value="@StringValue"
81
-
Class="primary-color"
82
-
ShowIcons="@InPlaceEditorShowIcons.Hover" />
80
+
<InPlaceEditor @bind-Value="@StringValue"
81
+
Class="primary-color"
82
+
ShowIcons="@InPlaceEditorShowIcons.Hover" />
83
83
84
-
and the icon can be visible only on hover
84
+
The icon can be visible only on hover:
85
85
86
-
<TelerikInPlaceEditor @bind-Value="@DateValue"
87
-
Class="primary-color"
88
-
DisplayFormat="d"
89
-
ShowIcons="@InPlaceEditorShowIcons.Hover" />
86
+
<InPlaceEditor @bind-Value="@DateValue"
87
+
Class="primary-color"
88
+
DisplayFormat="d"
89
+
ShowIcons="@InPlaceEditorShowIcons.Hover" />
90
90
91
-
(unless the value is empty) or never
91
+
(unless the value is empty) or never:
92
92
93
-
<TelerikInPlaceEditor @bind-Value="@TimeValue"
94
-
DisplayFormat="HH:mm"
95
-
ShowIcons="@InPlaceEditorShowIcons.Never" />
93
+
<InPlaceEditor @bind-Value="@TimeValue"
94
+
Class="primary-color"
95
+
DisplayFormat="HH:mm"
96
+
ShowIcons="@InPlaceEditorShowIcons.Never" />
96
97
97
-
You can even edit booleans
98
+
You can even edit booleans:
98
99
99
-
<TelerikInPlaceEditor @bind-Value="@BoolValue"
100
-
Class="primary-color" />
100
+
<InPlaceEditor @bind-Value="@BoolValue"
101
+
Class="primary-color" />
101
102
</p>
102
103
103
104
<h2>Configuration</h2>
@@ -146,13 +147,13 @@ Replace `YourAppName` with the actual root namespace of your app.
0 commit comments