'Addon' buttons with Telerik TextBox

[Michael]

Is there anyway to do an 'addon' button with the TelerikTextBox?

I've tried the following but it puts the button on it's own line:

<div class="col-11 col-md-8">
    <div class="input-group">
        <TelerikTextBox Width="100%" Class="form-control" Id="personname"
                        ValueChanged="@((string s) => PersonName_OnValueChanged(s))"
                        Value="@logItem.PersonName"
                        ValueExpression="@(() => logItem.PersonName)" />
        <div class="input-group-append">
            <button class="btn btn-outline-primary" type="button" id="clearpersonname">X</button>
        </div>
    </div>
</div>

 

In this case I want to add a way for the user to clear the contents of the TextBox. Another way would be to add an 'X' to the right side of the textbox, but I don't see any documentation to support that method either.  Any suggestions?

[Marin Bratanov]

Hi Michael,

The issue in this snippet is the Width=100% that is explicitly set to the textbox - it prevents the bootstrap classes from working as expected. Once I removed it, I got the append group to work as expected.

If you will be using our components with bootstrap, I would also suggest that you use our Bootstrap Theme, as it matches the metrics, style and color of the default Bootstrap styles.

Here's another example I made for you that showcases that our components are just as flexible as the standard ones.

 

<div style="width: 500px;">
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-prepend">
                <label for="theTb">
                    <span class="input-group-text">
                        <TelerikIcon Icon="home" />
                        &nbsp;Home
                    </span>
                </label>
            </div>
            <TelerikTextBox Class="form-control" @bind-Value="@TheText" Id="theTb" />
        </div>
    </div>
</div>
@code{
    string TheText { get; set; } = "lorem ipsum";
}

 

 

Regards,
Marin Bratanov
Progress Telerik

[Michael]

Thanks.  I'm a little confused about using Telerik's Bootstrap styles.

I replaced the standard bootstrap file with the Kendo version that broke all of my layouts.

<link href="css/site.css" rel="stylesheet" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
<link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" rel="stylesheet" />
@*<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />*@

 

I'm not married to using bootstrap, and I'm no expert at it, it's the just the only way I know to define layouts.   If you can point me to documentation or examples that demonstrate the equivalent of using the Bootstrap layout grids to define things like inline controls I'd appreciate it.   I've looked at the sample Dashboard app but don't see anything that was relevant to what I'm doing. I need to do simple data entry forms that are responsive since they'll be accessed on desktops and phones.. (see sample)

 

[Michael]

After looking at a blank project created using the Telerik template I see that the bootstrap reference should still be included, albeit in a different order, so I've figured that much out.  I also see the Dashboard project uses SASS, which seems like a cleaner way to organize the CSS files, so I'll try to get that working. 

I'm still a little unclear about 'Telerik' Bootstrap vs. vanilla Bootstrap.  Does that mean it still uses all of the same syntax, just with Telerik overwriting the Bootstrap definitions, or are there different attributes I should be using?  Is Bootstrap even necessary or the best way to handle layout with Telerik Blazor controls?   Any additional articles or examples would be great.  

[Marin Bratanov]

Hi Michael,

Bootstrap is its own entity and styles and we don't interfere with them. Our Bootstrap theme merely fits their design patterns (colors, dimensions), and can be used build-time to take customized bootstrap variables.

So, if you want to use Bootstrap, I would recommend inlcuding our Bootstrap Theme as well (in addition), but not instead of the original Bootstrap - they are not the same thing and have very different purposes.

You can read more about that in the docs: https://docs.telerik.com/blazor-ui/themes/overview#bootstrap-notes

You may also find this one useful one customizing themes, including using SASS builds: https://docs.telerik.com/blazor-ui/themes/custom-theme

 

Regards,
Marin Bratanov
Progress Telerik

[Michael]

Thanks, I've read the 'Bootstrap Notes' paragraph several times and don't find it that informative.

 

Sorry to be slow, but I don't understand what I'm supposed to do take advantage of the Telerik Bootstrap theme.  Do I just need to include it in the project and then use standard Bootstrap commands for layout and the Telerik Bootstrap theme will translate them automatically?

Can you point me to an example of how to do a form layout that has inline controls and is responsive?

 

[Marin Bratanov]

Hi Michael,

Yes, you just include our Bootstrap theme in your project so our components look like inputs styled by bootstrap.

Then you use the same approaches as you would with standard inputs (say, he .form-control) class. You can freely use Bootstrap itself in your project, our components don't restrict or change that in any way.

This page of the Dashboard sample app shows a very simple form that uses our components but looks like it can be built with bootstrap alone: https://github.com/telerik/blazor-dashboard/blob/master/BlazorDashboard/Pages/Profile.razor

 

Regards,
Marin Bratanov
Progress Telerik

[Michael]

That helps.  Thanks!

[Marin Bratanov]

A quick update to this, the following KB article showcases how you can use the bootstrap append/prepend pattern from this thread, and also another approach that uses your own custom styling: https://docs.telerik.com/blazor-ui/knowledge-base/textbox-add-icon

 

Regards,
Marin Bratanov
Progress Telerik