This is a migrated thread and some comments may be shown as answers.

'Addon' buttons with Telerik TextBox

8 Answers 803 Views
TextBox
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Veteran
Michael asked on 30 Mar 2020, 06:19 PM

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?

8 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 31 Mar 2020, 07:31 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Michael
Top achievements
Rank 1
Veteran
answered on 31 Mar 2020, 10:31 PM

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="_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)

 

0
Michael
Top achievements
Rank 1
Veteran
answered on 01 Apr 2020, 07:35 AM

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.  

0
Marin Bratanov
Telerik team
answered on 01 Apr 2020, 08:52 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Michael
Top achievements
Rank 1
Veteran
answered on 01 Apr 2020, 09:04 AM

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?

 

0
Marin Bratanov
Telerik team
answered on 01 Apr 2020, 10:01 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Michael
Top achievements
Rank 1
Veteran
answered on 01 Apr 2020, 06:21 PM
That helps.  Thanks!
0
Marin Bratanov
Telerik team
answered on 13 Apr 2020, 07:02 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
TextBox
Asked by
Michael
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Michael
Top achievements
Rank 1
Veteran
Share this question
or