Skip to content

Commit f79b12a

Browse files
dimodidimodi
committed
Class and Title parameters
1 parent b1ab9b5 commit f79b12a

File tree

1 file changed

+97
-55
lines changed

1 file changed

+97
-55
lines changed

‎knowledge-base/in-place-editor.md‎

Lines changed: 97 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ The sample below uses an algorithm which toggles between read-only UI and an edi
4747
* The `DisplayFormat` parameter affects the `Value` consistently in both read mode and edit mode.
4848
* The `Placeholder` parameter provides a helper label that will show when the `Value` is `null` or empty.
4949
* The `ShowIcon` parameter controls the visibility of an optional [SVG Icon]({%slug common-features-icons%}}#svgicon-component) that hints users about the ability to edit the component `Value`. The parameter is of type `InPlaceEditorShowIcon`, which is a custom enum and must be imported in both `TelerikInPlaceEditor.razor` and all `.razor` files that use `TelerikInPlaceEditor`.
50+
* The `Class` parameter allows you to apply custom styles.
51+
* The `Title` parameter allows you to show a tooltip hint on read mode.
5052
* 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.
5153
* `TelerikInPlaceEditor.razor.css` is a <a href="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.
5254

@@ -67,33 +69,40 @@ Replace `YourAppName` with the actual root namespace of your app.
6769
<h1>InPlaceEditor Component</h1>
6870
6971
<p>
70-
This in-place editor component works with multiple value types
72+
This in-place editor component works with multiple value types and nullables
7173
72-
<TelerikInPlaceEditor @bind-Value="@NumericValue" DisplayFormat="C2" />
74+
<TelerikInPlaceEditor @bind-Value="@NumericValue" DisplayFormat="C2" Placeholder="Enter Number..." />
7375
74-
The edit icon shows by default, but it can be visible only on hover
76+
The component can apply custom CSS styles and the icon can be visible only on hover
7577
76-
<TelerikInPlaceEditor @bind-Value="@StringValue" ShowIcon="@InPlaceEditorShowIcon.Hover" />
78+
<TelerikInPlaceEditor @bind-Value="@StringValue" ShowIcon="@InPlaceEditorShowIcon.Hover" Class="primary-color" />
7779
7880
(unless the value is empty) or hidden at all times
7981
80-
<TelerikInPlaceEditor @bind-Value="@DateValue" DisplayFormat="d" ShowIcon="@InPlaceEditorShowIcon.Never" />
82+
<TelerikInPlaceEditor @bind-Value="@DateValue" DisplayFormat="d" ShowIcon="@InPlaceEditorShowIcon.Never" Class="primary-color" />
8183
8284
The editor width is calculated automatically if not set
8385
84-
<TelerikInPlaceEditor @bind-Value="@TimeValue" DisplayFormat="HH:mm" />.
86+
<TelerikInPlaceEditor @bind-Value="@TimeValue" DisplayFormat="HH:mm" />
8587
86-
You can even edit booleans inline
88+
You can even edit booleans
8789
88-
<TelerikInPlaceEditor @bind-Value="@BoolValue" />
90+
<TelerikInPlaceEditor @bind-Value="@BoolValue" Class="primary-color" />
8991
</p>
9092
9193
<h2>Configuration</h2>
9294
9395
<ul>
96+
<li>
97+
<label for="editor-placeholder">Placeholder: </label>
98+
<TelerikTextBox @bind-Value="@InPlaceEditorPlaceholder"
99+
Id="editor-placeholder"
100+
ShowClearButton="true"
101+
Width="180px" />
102+
</li>
94103
<li><label><TelerikCheckBox @bind-Value="@InPlaceEditorReadOnly" /> Read Only</label></li>
95104
<li>
96-
<span>Show Edit Icon: </span>
105+
<span>Show Icon: </span>
97106
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
98107
<ButtonGroupToggleButton Selected="@( InPlaceEditorShowIcon == InPlaceEditorShowIcon.Always )"
99108
OnClick="@( () => InPlaceEditorShowIcon = InPlaceEditorShowIcon.Always )">
@@ -109,28 +118,31 @@ Replace `YourAppName` with the actual root namespace of your app.
109118
</ButtonGroupToggleButton>
110119
</TelerikButtonGroup>
111120
</li>
121+
<li>
122+
<label for="editor-title">Title: </label>
123+
<TelerikTextBox @bind-Value="@InPlaceEditorTitle"
124+
Id="editor-title"
125+
ShowClearButton="true"
126+
Width="180px" />
127+
</li>
112128
<li>
113129
<label for="editor-width">Editor Width: </label>
114130
<TelerikNumericTextBox @bind-Value="@InPlaceEditorWidth"
115131
Format="# px"
116132
Id="editor-width"
117133
Width="120px" />
118134
</li>
119-
<li>
120-
<label for="editor-placeholder">Placeholder: </label>
121-
<TelerikTextBox @bind-Value="@InPlaceEditorPlaceholder"
122-
Id="placeholder"
123-
Width="180px" />
124-
</li>
125135
</ul>
126136
127137
<p>
128-
In-Place Editor:
138+
In Place Editor:
129139
<TelerikInPlaceEditor @bind-Value="@InPlaceEditorValue"
130-
Placeholder="@InPlaceEditorPlaceholder"
131-
ReadOnly="@InPlaceEditorReadOnly"
132-
ShowIcon="@InPlaceEditorShowIcon"
133-
Width="@( InPlaceEditorWidth.HasValue ? $"{InPlaceEditorWidth}px" : null )" />
140+
Class="primary-color"
141+
Placeholder="@InPlaceEditorPlaceholder"
142+
ReadOnly="@InPlaceEditorReadOnly"
143+
ShowIcon="@InPlaceEditorShowIcon"
144+
Title="@InPlaceEditorTitle"
145+
Width="@( InPlaceEditorWidth.HasValue ? $"{InPlaceEditorWidth}px" : null )" />
134146
</p>
135147
136148
<h2>Form Validation</h2>
@@ -144,37 +156,52 @@ Replace `YourAppName` with the actual root namespace of your app.
144156
<Template>
145157
Name:
146158
<TelerikInPlaceEditor Value="@Employee.Name"
147-
ValueChanged="@( (string newValue) => Employee.Name = newValue )"
148-
ValueExpression="@( () => Employee.Name )"
149-
Placeholder="Enter Name..." />
159+
ValueChanged="@( (string newValue) => Employee.Name = newValue )"
160+
ValueExpression="@( () => Employee.Name )"
161+
Placeholder="Enter Name..." />
150162
<TelerikValidationMessage For="@( () => Employee.Name )" />
151163
</Template>
152164
</FormItem>
153165
<FormItem Field="@nameof(Person.BirthDate)">
154166
<Template>
155167
Hire Date:
156168
<TelerikInPlaceEditor Value="@Employee.BirthDate"
157-
ValueChanged="@( (DateTime? newValue) => Employee.BirthDate = newValue )"
158-
ValueExpression="@( () => Employee.BirthDate )"
159-
DisplayFormat="d"
160-
Placeholder="Enter Date..."
161-
T="@(DateTime?)" />
169+
ValueChanged="@( (DateTime? newValue) => Employee.BirthDate = newValue )"
170+
ValueExpression="@( () => Employee.BirthDate )"
171+
DisplayFormat="d"
172+
Placeholder="Enter Date..."
173+
T="@(DateTime?)" />
162174
<TelerikValidationMessage For="@( () => Employee.BirthDate )" />
163175
</Template>
164176
</FormItem>
165177
</FormItems>
166178
</TelerikForm>
167179
180+
<style>
181+
h1 {
182+
font-size: 1.5rem;
183+
}
184+
185+
h2 {
186+
font-size: 1.2rem;
187+
}
188+
189+
.primary-color {
190+
color: var(--kendo-color-primary);
191+
}
192+
</style>
193+
168194
@code {
169195
private bool BoolValue { get; set; }
170196
private DateTime DateValue { get; set; } = DateTime.Now;
171-
private decimal NumericValue { get; set; } = 1.23m;
197+
private decimal? NumericValue { get; set; } = 1.23m;
172198
private string StringValue { get; set; } = "foo bar";
173199
private TimeOnly TimeValue { get; set; } = TimeOnly.FromDateTime(DateTime.Now);
174200
175-
private string InPlaceEditorPlaceholder { get; set; } = "Enter value";
201+
private string InPlaceEditorPlaceholder { get; set; } = "Enter Value...";
176202
private bool InPlaceEditorReadOnly { get; set; }
177203
private InPlaceEditorShowIcon InPlaceEditorShowIcon { get; set; } = InPlaceEditorShowIcon.Always;
204+
private string InPlaceEditorTitle { get; set; } = "Edit Sample Value";
178205
private string InPlaceEditorValue { get; set; } = "foo bar";
179206
private int? InPlaceEditorWidth { get; set; } = 120;
180207
@@ -188,16 +215,6 @@ Replace `YourAppName` with the actual root namespace of your app.
188215
public DateTime? BirthDate { get; set; }
189216
}
190217
}
191-
192-
<style>
193-
h1 {
194-
font-size: 1.5rem;
195-
}
196-
197-
h2 {
198-
font-size: 1.2rem;
199-
}
200-
</style>
201218
````
202219
````TelerikInPlaceEditor.razor
203220
@* import InPlaceEditorType enum *@
@@ -208,7 +225,7 @@ Replace `YourAppName` with the actual root namespace of your app.
208225
209226
@typeparam T
210227
211-
<span class="in-place-editor">
228+
<span class="@ClassToApply">
212229
@if (IsInEditMode)
213230
{
214231
switch (ValueEditorType)
@@ -219,7 +236,7 @@ Replace `YourAppName` with the actual root namespace of your app.
219236
ValueChanged="@( (bool newValue) => OnTextBoxValueChanged(newValue) )"
220237
ValueExpression="@( ValueExpression as Expression<Func<bool>> )"
221238
OnBlur="@( () => IsInEditMode = false )"
222-
Class="in-place-checkbox" />
239+
Class="@CheckBoxClass" />
223240
break;
224241
case InPlaceEditorType.DatePicker:
225242
<TelerikDatePicker @ref="@DatePickerRef"
@@ -229,60 +246,60 @@ Replace `YourAppName` with the actual root namespace of your app.
229246
Format="@DisplayFormat"
230247
T="@T"
231248
OnChange="@( () => IsInEditMode = false )"
232-
Class="in-place-input"
249+
Class="@InputClass"
233250
Width="@GetEditorWidth(InPlaceEditorType.DatePicker)" />
234251
break;
235252
case InPlaceEditorType.NumericTextBox:
236253
<TelerikNumericTextBox @ref="@NumericTextBoxRef"
237254
Value="@Value"
238255
ValueChanged="@( (T newValue) => OnTextBoxValueChanged(newValue!) )"
239256
ValueExpression="@( ValueExpression as Expression<Func<T>> )"
240-
OnChange="@( () => IsInEditMode = false )"
241257
Format="@DisplayFormat"
258+
OnChange="@( () => IsInEditMode = false )"
242259
T="@T"
243-
Class="in-place-input"
260+
Class="@InputClass"
244261
Width="@GetEditorWidth(InPlaceEditorType.NumericTextBox)" />
245262
break;
246263
case InPlaceEditorType.TimePicker:
247264
<TelerikTimePicker @ref="@TimePickerRef"
248265
Value="@Value"
249266
ValueChanged="@( (T newValue) => OnTextBoxValueChanged(newValue!) )"
250267
ValueExpression="@( ValueExpression as Expression<Func<T>> )"
268+
Class="@InputClass"
251269
Format="@DisplayFormat"
252-
T="@T"
253270
OnChange="@( () => IsInEditMode = false )"
254-
Class="in-place-input"
271+
T="@T"
255272
Width="@GetEditorWidth(InPlaceEditorType.TimePicker)" />
256273
break;
257274
default:
258275
<TelerikTextBox @ref="@TextBoxRef"
259276
Value="@Value?.ToString()"
260277
ValueChanged="@( (string newValue) => OnTextBoxValueChanged(newValue) )"
261278
ValueExpression="@( ValueExpression as Expression<Func<string>> )"
279+
Class="@InputClass"
262280
OnChange="@( () => IsInEditMode = false )"
263-
Class="in-place-input"
264281
Width="@GetEditorWidth(InPlaceEditorType.TextBox)" />
265282
break;
266283
}
267284
}
268285
else if (!ReadOnly)
269286
{
270-
<TelerikButton Class="in-place-button"
287+
<TelerikButton Class="@ButtonClass"
271288
FillMode="@ThemeConstants.Button.FillMode.Clear"
272289
OnClick="@ToggleEditMode"
273-
Title="@( $"Edit Value {GetFormattedValue()}" )">
290+
Title="@Title">
274291
@if (Value != null && (ValueType == typeof(bool) || !Value.Equals(default(T))) && !string.IsNullOrEmpty(Value.ToString()))
275292
{
276293
@GetFormattedValue()
277294
}
278295
else
279296
{
280-
<span class="in-place-placeholder">@Placeholder</span>
297+
<span class="@PlaceholderClass">@Placeholder</span>
281298
}
282299
283300
@if (ShouldRenderEditIcon)
284301
{
285-
<TelerikSvgIcon Icon="@SvgIcon.Pencil" Class="@EditIconClass" />
302+
<TelerikSvgIcon Icon="@SvgIcon.Pencil" Class="@IconClass" />
286303
}
287304
</TelerikButton>
288305
}
@@ -295,6 +312,12 @@ Replace `YourAppName` with the actual root namespace of your app.
295312
@code {
296313
#region Parameters
297314
315+
/// <summary>
316+
/// A CSS class that can apply custom styles.
317+
/// </summary>
318+
[Parameter]
319+
public string? Class { get; set; }
320+
298321
/// <summary>
299322
/// The format string that will be used to display the component <see cref="Value" /> in read and edit mode.
300323
/// </summary>
@@ -319,6 +342,12 @@ Replace `YourAppName` with the actual root namespace of your app.
319342
[Parameter]
320343
public InPlaceEditorShowIcon ShowIcon { get; set; } = InPlaceEditorShowIcon.Always;
321344
345+
/// <summary>
346+
/// The tooltip content that shows in read mode.
347+
/// </summary>
348+
[Parameter]
349+
public string Title { get; set; } = "Edit Value";
350+
322351
/// <summary>
323352
/// The editable component value. The supported types include <see cref="string" />, signed numeric types, <see cref="DateTime" />, <see cref="TimeOnly" />, and <see cref="bool" />
324353
/// </summary>
@@ -345,6 +374,17 @@ Replace `YourAppName` with the actual root namespace of your app.
345374
346375
#endregion Parameters
347376
377+
#region Constants
378+
379+
private const string InPlaceEditorClass = "in-place-editor";
380+
private const string CheckBoxClass = "in-place-checkbox";
381+
private const string ButtonClass = "in-place-button";
382+
private const string IconHoverableClass = "hoverable-icon";
383+
private const string InputClass = "in-place-input";
384+
private const string PlaceholderClass = "in-place-placeholder";
385+
386+
#endregion Constants
387+
348388
#region Properties
349389
350390
private readonly string DataId = Guid.NewGuid().ToString();
@@ -359,7 +399,9 @@ Replace `YourAppName` with the actual root namespace of your app.
359399
360400
private bool ShouldRenderEditIcon => ShowIcon != InPlaceEditorShowIcon.Never || GetFormattedValue().Length == 0;
361401
362-
private string EditIconClass => ShowIcon == InPlaceEditorShowIcon.Hover && GetFormattedValue().Length > 0 ? "hoverable-icon" : string.Empty;
402+
private string ClassToApply => string.Format("{0} {1}", InPlaceEditorClass, Class);
403+
404+
private string IconClass => ShowIcon == InPlaceEditorShowIcon.Hover && GetFormattedValue().Length > 0 ? IconHoverableClass : string.Empty;
363405
364406
#endregion Properties
365407
@@ -556,8 +598,8 @@ Replace `YourAppName` with the actual root namespace of your app.
556598
margin-inline: 1em;
557599
}
558600

559-
::deep .in-place-button .k-button-text {
560-
color: var(--kendo-color-primary);
601+
::deep .in-place-button {
602+
color: inherit;
561603
}
562604

563605
::deep .in-place-button .k-icon {

0 commit comments

Comments
 (0)