InputGroup

in namespace DotVVM.Framework.Controls.Bootstrap4

Renders a Bootstrap input group widget.

Usage & Scenarios

Renders a Bootstrap input group which decorates the TextBox with buttons or other controls on the side.

https://getbootstrap.com/docs/4.3/components/input-group/

Sample 1: Basic Usage

The InputGroup control has the ContentTemplate property which must contain InputGroupTextBox or InputGroupComboBox control.

It also has the LeftTemplate and RightTemplate properties that define the content on the left and right of the textbox.

The following controls are supported in these templates:

There is also the Size property which can be set to Large, Small and Default.

page.dothtml
ViewModel.cs

<bs:InputGroup>
  <LeftTemplate>
    <bs:InputGroupButton Text="Button" Click="{command: UpdateText()}" />
  </LeftTemplate>
  <ContentTemplate>
    <bs:InputGroupTextBox Text="{value: Text}" />
  </ContentTemplate>
  <RightTemplate>
    <bs:InputGroupLiteral Text="Click the Button on the left." />
  </RightTemplate>
</bs:InputGroup>

<bs:InputGroup Size="Small">
  <LeftTemplate>
    <bs:InputGroupCheckBox Checked="{value: Checked}" Changed="{command: UpdateText2()}" />
  </LeftTemplate>
  <ContentTemplate>
    <bs:InputGroupComboBox SelectedValue="{value: Text2}" DataSource="{value: Values}" />
  </ContentTemplate>
  <RightTemplate>
    <bs:InputGroupLiteral Text="Click the CheckBox on the left." />
  </RightTemplate>
</bs:InputGroup>

public class ViewModel : DotvvmViewModelBase
{
    public string Text { get; set; }
    public int Clicks { get; set; } = 0;
    

    public void UpdateText()
    {
        Clicks++;
        Text = "Button was clicked " + Clicks + 'x';
    }

    public bool Checked { get; set; }
    public string Text2 { get; set; } = "a";
    public string[] Values { get; set; } = new string[] { "a", "b", "c" };

    public void UpdateText2()
    {
        Text2 = "b";
    }
}

Sample 2: Multiple Controls in the InputGroup

You can also place multiple controls in the LeftTemplate and RightTemplate properties.

page.dothtml
ViewModel.cs

<bs:InputGroup>
  <LeftTemplate>
    <bs:InputGroupRadioButton CheckedItem="{value: Color}" CheckedValue="r" Text="R" />
    <bs:InputGroupRadioButton CheckedItem="{value: Color}" CheckedValue="g" Text="G" />
    <bs:InputGroupRadioButton CheckedItem="{value: Color}" CheckedValue="b" Text="B" />
  </LeftTemplate>
  <ContentTemplate>
    <bs:InputGroupTextBox Text="{value: Color}"/>
  </ContentTemplate>
  <RightTemplate>
    <bs:InputGroupButton Text="Button 1" />
    <bs:InputGroupButton Text="Button 2" />
  </RightTemplate>
</bs:InputGroup>

using DotVVM.Framework.ViewModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.InputGroup.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string Color { get; set; } = "g";
    }
}

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
ClientIDMode	ClientIDMode	Gets or sets the client ID generation algorithm.	attribute inner element static value bindable default	Static
ContentTemplate	List<IInputGroupContentItem>	Gets or sets the main content of the input group.	attribute inner element static value bindable default	null
DataContext	Object	Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. The DataContext is null in client-side templates.	attribute inner element static value bindable default	null
ID	String	Gets or sets the control client ID within its naming container.	attribute inner element static value bindable default	null
IncludeInPage	Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
InnerText	String	Gets or sets the inner text of the HTML element. Note that this property can only be used on HtmlGenericControl directly and when the control does not have any children.	attribute inner element static value bindable default	null
LeftTemplate	List<IInputGroupSideItem>	Gets or sets the left side extension of the input group.	attribute inner element static value bindable default	null
RightTemplate	List<IInputGroupSideItem>	Gets or sets the right side extension of the input group.	attribute inner element static value bindable default	null
Size	Size	Gets or sets the size of the input group.	attribute inner element static value bindable default	Default
Visible	Boolean	Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control.	attribute inner element static value bindable default	True

Edit on Github

InputGroup

Usage & Scenarios

Sample 1: Basic Usage

Sample 2: Multiple Controls in the InputGroup

Properties

HTML produced by the control

On this page

InputGroup

Usage & Scenarios

Sample 1: Basic Usage

Sample 2: Multiple Controls in the InputGroup

Properties

HTML produced by the control

On this page

Information about cookies