Demo Confusion

[Brian]

I am confused about your demos.  Why do you not use the Telerik Blazor components as much as possible.  For instance, if you look at the window demo, the only Telerik compenents I see is the TelerkWindow and items directly related to it.  For textboxes and labels, you go back to standard HTML instead of using the your equivalent.  Do they not play well together, or is there some other reason you don't use them?

I am asking as an honest question.  I am just now getting into this stuff and trying to figure out where I am going wrong when I run into problems is a pain.  For instance, This code ends up showing nothing.  When I inspect it, it is one the page with dimensions of 0x17.  I don't know if it is because of something I've done wrong with the WIndow, the textboxes, or if it is something else.

 

@page
@model LoginModel
<TelerikWindow Visible="True" Centered="true" Height="400" Width="400" >
  <WindowContent>
    <telerikTextBox Label="Username:"  />
    <br />
    <br />
    <telerikTextBox Label="Password:"  />
  </WindowContent>
</TelerikWindow>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

[Marin Bratanov]

Hi Brian,

There are many factors that go into determining which components we use on our demo site. For example:

• The required design on the entire site and that changing themes is to only affect the particular component from the demo, not the entire site.
• What components were available when the given demo was created - some demos are older than some components.
• Focus - when a demo is supposed to showcase a particular component of ours, we sometimes leave the rest to plain elements so its clearly visible what's the difference between what you could get out-of-the-box, and what this particular component brings to the table.

So, it is not that the components don't work together - they do, it is more of a design decision.

As to the problem you are facing - here are the issues with the provided snippet:

• The size must be a valid CSS unit, something like Height="400px" Width="400px". You can read more about this in the following article: https://docs.telerik.com/blazor-ui/common-features/dimensions. 
• The tags in Blazor are case-sensitive, so the textboxes must start with a capital "T" - <TelerikTextBox Label="Username:"  />
• For passwords, I advise that you take a look at (and probably Vote/Follow) this: https://feedback.telerik.com/blazor/1416922-add-to-teleriktextbox-more-parameters-such-as-type-autocomplete-required-readonly.
• The boolean "true" needs a lowercase "t" in markup.

I am attaching at the end of this post a simple component where I fixed those issues and it shows up properly for me.

On a side note - validation in Blazor requires an EditForm, you can see more here: https://docs.telerik.com/blazor-ui/common-features/input-validation.

Considering the usage of the partial tag, I suspect you may be trying to use the Blazor components in an ASP.NET MVC project, so I advise that you read the following article (even though the sample was created a while back and right now parameters cannot be passed to Blazor components, this should become possible again in 3.1): https://docs.telerik.com/blazor-ui/knowledge-base/blazor-in-asp-net.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor