Hi
Passwords are not yet supported. There is a DataAnotations Datatype for that. So technically this is possible and should not be a big deal. Almost all apps have a password entry somewhere.
Example:
class LoginModel
{
[Required]
[Display(Name = "User Name")]
public string UserName { get; set; }
[Required]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }
}
Annoying because then you have to do the form fields all manually because of the password.
Thanks for considering.
Best regards, Michael
My team is currently using animation containers as menu popups in our web app, which will need to work on both desktop and mobile devices in a web browser. For the mobile layout, I would like to be able to open animation containers via swipe gestures. I understand that animation containers are not strictly menus, however, I would love to see swipe action support in Telerik UI for Blazor, and then be able to bind that action to an animation container.
The only framework I have found by way of example is https://onsen.io/. Please observe how it is possible to open a panel by swiping close to the edge of the sample device on their homepage.
This feature would make it much easier to build dynamic web apps that perform well on desktop and feel native on mobile devices as well.
Thank you,
David
I upgraded my Blazor UI package to 3.3.0 to try and get rid of the multiple tbody issue with adding a table. Now there is an even weirder problem. Adding a table with two columns via setting the Editor's value in the code block is causing several table cells to get inserted in between and around the desired ones.
This is my long html string:
<div style="padding:20px;text-align:center;">
<table style="width:100%;"><tbody>
<tr>
<td colspan="2">
<p style= "text-align:center; font-size: medium; color: #3E579A; background-color: #dbebfa;">
<strong>TAX YEAR 2019</strong>
</p>
</td>
</tr>
<tr>
<td colspan="1"><p style="text-align: right"><strong>AMOUNT DUE</strong></p></td>
<td colspan="1"><p style="text-align: left">$562.35</p></td>
</tr>
<tr>
<td colspan="1"><p style="text-align: right"><strong>5% PENALTY</strong></p></td>
<td colspan="1"><p style="text-align: left">¤28.12</p></td>
</tr>
<tr>
<td colspan="1"><p style="text-align: right"><strong>INTEREST DUE</strong></p></td>
<td colspan="1"><p style="text-align: left">¤129.34</p></td>
</tr>
<tr>
<td colspan="1">
<p style="text-align: right"><strong>LATE FEE</strong></p>
</td>
<td colspan="1">
<p style="text-align: left">$105.00</p>
</td>
</tr>
<tr>
<td colspan="1">
<p style="text-align: right;color: #3E579A;"><strong>TOTAL</strong></p>
</td>
<td colspan="1">
<p style="text-align: left;color: #3E579A;">¤824.81</p>
</td>
</tr>
<tr style="border:none;">
<td style="border:none;">
</td>
</tr>
<tr>
<td colspan="2">
<p style= "text-align:center; font-size: medium; color: #3E579A; background-color: #dbebfa;">
<strong>TAX YEAR 2020</strong>
</p>
</td>
</tr>
<tr>
<td colspan="1" style="width:50%;">
<p style="text-align: right"><strong>AMOUNT DUE</strong></p>
</td>
<td colspan="1" style="width:50%;">
<p style="text-align: left">¤323.34</p>
</td>
</tr>
<tr>
<td colspan="1">
<p style="text-align: right"><strong>INTEREST DUE</strong></p>
</td>
<td colspan="1">
<p style="text-align: left">¤61.43</p>
</td>
</tr>
<tr>
<td colspan="1">
<p style="text-align: right;color: #3E579A;"><strong>TOTAL</strong></p>
</td>
<td colspan="1">
<p style="text-align: left;color: #3E579A;">¤384.77</p>
</td>
</tr>
<tr style="border:none;">
<td style="border:none;">
</td>
</tr>
<tr>
<td colspan="2">
<p style= "text-align:center; font-size: medium; color: #3E579A; background-color: #dbebfa;">
<strong>TAX YEAR 2021</strong>
</p>
</td>
</tr>
<tr>
<td colspan="1" style="width:50%;">
<p style="text-align: right"><strong>AMOUNT DUE</strong></p>
</td>
<td colspan="1" style="width:50%;">
<p style="text-align: left">¤323.47</p>
</td>
</tr>
<tr>
<td colspan="1">
<p style="text-align: right"><strong>INTEREST DUE</strong></p>
</td>
<td colspan="1">
<p style="text-align: left">¤19.41</p>
</td>
</tr>
<tr>
<td colspan="1">
<p style="text-align: right;color: #3E579A;"><strong>TOTAL</strong></p>
</td>
<td colspan="1">
<p style="text-align: left;color: #3E579A;">¤342.88</p>
</td>
</tr>
<tr style="border:none;">
<td style="border:none;">
</td>
</tr>
<tr>
<td colspan="1">
<p style="text-align: right;color: #3E579A;"><strong>TOTAL DUE</strong></p>
</td>
<td colspan="1">
<p style="text-align: left;color: #3E579A;">¤1,552.46</p>
</td>
</tr>
</tbody>
</table>
</div>
This is the result:
At this point I am having to downgrade to 3.2.0 in order for it to look anything near what I need it to.
Here is my modal with the Editor component.
<div class="modal fade" id="bill-modal" tabindex="-1" aria-labelledby="bill-modal-label" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-xl modal-fullscreen-lg-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="redemption-bill-modal-label">Bill</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<TelerikEditor Id="TheEditor" @ref="@TheEditor" Value="@EditorContent" Tools="@Tools" EditMode="EditorEditMode.Iframe" Class="editor-iframe" Height="800px">
<EditorCustomTools>
<EditorCustomTool Name="MyCustomTools">
<div style="margin-right: 50px">
<TelerikButton OnClick="@Print" Icon="print" class="m-1"></TelerikButton>
<TelerikButton OnClick="@ExportToPdf" Icon="download" class="m-1"></TelerikButton>
<TelerikDropDownList Data="@SupportedExportFormats" @bind-Value="@ExportFormat" Width="auto" class="m-1"></TelerikDropDownList>
</div>
</EditorCustomTool>
</EditorCustomTools>
</TelerikEditor>
</div>
</div>
</div>
</div>I'm setting the Value via an exposed method that uses some complicated code to generate that html string above. I don't think it's necessary to have to strip out the proprietary data and paste that here, but please let me know if that would help resolve this issue.
Thanks.
It would be fantastic to be able to visualize boolean data on a time based chart. We have a lot of time series data, and a good bit of it is boolean. It would be very beneficial to be able to plot that data along side our numeric data to provide context to both.
Example (blue/green bar at bottom of chart):
So what I propose is a fixed width for a column of the grid (and locked) with the remaining columns auto-sizing.
In my situation, I have an action switch button where the client can delete a row, edit a row etc but the action code dropdown column needs to ALWAYS be the same width. The rest of the columns should automatically size based on the existing behaviour.
Now I have tried using the autosize for just that column, but I have to render the grid first, then run the autosize (which gives a fun show of resizing to the user) then all the columns become fixed width, but the vertical scroll bar doesn't move and stays in its initial position.
Can the dev team comment on any known reasons why Charts (I think both SVG and Canvas) might not display when a blazor page is rendered from an automation tool like Chromium, Puppeteer, etc.? (e.g., https://developers.google.com/web/tools/puppeteer).
I have a standard blazor page that I can manually from a standard Chrome window, and it works fine and the Telerik chart displays.
But the same page, when launched either headless or with a GUI browser window, from a tool like Chromium or Puppeteer (with javascript enabled of course), it seems like the DOM is never dynamically updated to include the chart.
I want to be able to enter numbers and the grid to filter numeric fields too according to those numbers. Enums would be nice too.
**Admin Edit**
The feature request will be researched and evaluated. It contradicts to our datasource filtering logic that relies on the type of the fields. Thus, it is highly possible that we will handle the task through a knowledge base example.
**Admin Edit**
Hi, we are using a tile layout for charts and are having an issue where the tooltips for the second row of tiles are appearing at the bottom of the screen away from the chart or not at all. Then when we scroll back to the first row of tiles the tool tips are out of alignment as well. The following screen shot shows an example.
We have a component that has a tab strip and the tile layout with the following code
<TabStripTab Title="@tabName">
@((MarkupString)tabHeading)
<TelerikTileLayout Columns="6"
RowHeight="225px"
ColumnWidth="285px"
Reorderable="true"
Resizable="true"
OnResize="@ItemResize"
OnReorder="@ItemReorder"
@ref="@TileLayout">
<TileLayoutItems>
@foreach (CustomChartViewModel chart in tab.Charts)
{
int colSpan = 2;
int rowSpan = 2;
<TileLayoutItem RowSpan="@rowSpan" ColSpan="@colSpan">
<HeaderTemplate>
<div style="text-align: right">
<TelerikButton OnClick="@(() => onDeleteChart(chart.Id, tab.Id))">X</TelerikButton>
</div>
</HeaderTemplate>
<Content>
<ChartComponent ViewModel="@chart" @ref="@charts[chart.Id]" />
</Content>
</TileLayoutItem>
}
</TileLayoutItems>
</TelerikTileLayout>
</TabStripTab>And then a chart component that renders the individual charts with a tooltip
<TelerikChart @ref="@ChartRef" Height="100%" Width="100%" OnSeriesClick="@OnSeriesClickHandler">
<ChartTooltip Visible="true">
<Template>
<TelerikIcon Icon="information" />
@(context.Percentage.ToString("P", nfi))<br />
@((context.DataItem as MyDataModel).toolTip)
</Template>
</ChartTooltip>
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Donut" Data="@Data" Field="value" CategoryField="category" ColorField="color">
<ChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
Visible="@ViewModel.ShowLabels"
Background="transparent"
Template="#= category #: #= value#">
</ChartSeriesLabels>
</ChartSeries>
</ChartSeriesItems>
<ChartTitle Text="@ViewModel.Name"></ChartTitle>
<ChartLegend Position="ChartLegendPosition.Bottom" Visible="@ViewModel.ShowLegend"></ChartLegend>
</TelerikChart>
Hello,
I'm using a numeric textbox and when I test my page for accessibility, Allyable reports the following:
Category: Ensure button or link have discernible text that is not repeated as image description
Selector: .k-form-field-wrap > .k-numerictextbox.k-widget > .k-numeric-wrap > .k-select > [role="button"].k-link-decrease
Severity: Critical
Here is my source code:
<TelerikNumericTextBox @bind-Value="@cardCleaner.Quantity" Id="cleanerQty" Width="100px" />
Is this really an accessibility issue?
Thanks,
Bernard
I would like to be able to set the Id on any Blazor component for automated testing purposes.
---
ADMIN EDIT
If you need something different than automated testing selectors, please add your use case in the comments.
For automated testing, you can cascade selectors through a parent element (e.g., a div or span) that has the desired attributes (be that id, class, some data-* attribute, etc.). Adding ID parameters to Blazor components can easily make them brittle because they can be repeated and included in arbitrary hierarchy easily - that's the core concept of a razor component - so such IDs need to be unique, which defeats the predictability you will need for testing.
If you are interested in testing with Selenium, you may find useful this request: https://feedback.telerik.com/blazor/1513117-translators-for-selenium-testing-for-the-telerik-ui-for-blazor-components. If so, Vote for it and Follow it so we can know there is interest, and so you can get status updates.
You can also Follow a separate enhancement for the Grid Command buttons here : https://feedback.telerik.com/blazor/1463164-id-attribute-on-buttons-telerikbuttons-gridcommandbuttons-etc
---
I suggest adding a FieldExpression property to the GridColumn so a developer would not need to create view models and templates for simple transformations of the existing model's properties. The field expression would be used for filtering and sorting as well. Its type would be Func<T, object> or Expression<Func<T, object>>.
<TelerikGrid Data="@Persons">
<GridColumns>
<GridColumn FieldExpression="@(p => p.FirstName + " " + p.LastName)" />
</GridColumns>
</TelerikGrid>
Hi,
If Telerik can, at some point, develop a design tool like the Radzen Design Time, that would really be nice!
Thanks
I want to be able to create custom views for the Gantt Timeline, for example - minutes view.
-------------------------
ADMIN EDIT
-------------------------
The post is marked with "Need more info" label, so we can gather feedback from the community on how this feature is expected to be exposed for configuration and what the desired behavior is. An important point to consider regarding this enhancement is that, depending on its implementation, it might override the built-in Gantt Timeline functionalities, so it will be up to the application logic to handle the tasks features (for example editing, dependencies etc). Please share your comments and ideas.
Here is the scenario I would like to implement:
User has a default dashboard, with Customise functionality which would:
- Allow the user to move and resize items (same as now)
- Add / remove item, adding using a drag and drop function from a set of tile types, for example exposed in a TelerikList component. Removing an item with a "delete" button or similar.
- Customise tiles, for example a time period on a chart.
- Save the state of the dashboard.
For loading and saving the dashboard with each tile having a specific content the easiest way I can see would be to bind the TelerikTileLayout to a data source:
<TelerikTileLayout Data="@TileData">
<TileConfiguration></TileConfiguration>
</TelerikTileLayout>
The data would be updated as and when the user configures their dashboard.
For dragging and dropping new tiles a set of events would be necessary, both on the source tile list, e.g. OnDragBegin and on the tile layout OnDrop.