DotVVM Business Pack

Create impressive line-of-business apps
with our enterprise-ready components.

Powerful Forms

Let your users enter data conveniently using AutoComplete, DateTimePicker, Slider and other controls. All controls support data-binding and validation.

Rich & Impressive UI

You can build excellent user experiences with TabControl, ModalDialog, or ImageCrop controls in just minutes.

Advanced GridView

Get more capabilities with DotVVM Business Pack GridView: column resizing and reordering, advanced filtering, inline insert, Excel and PDF exports, and much more!

Styling & Themes

Fine-tune the Business Pack theme to fit your needs using CSS variables, or choose the Bootstrap 4 compatible look & feel.

AutoComplete and ComboBox

Let the users select from collections using AutoComplete or ComboBox. These controls can be bound to collections in the viewmodel, or utilize server-side search if the collection would be large.

<bp:AutoComplete DataSource="{value: Countries}"
                 Text="{value: Country1}" />

<bp:ComboBox DataSource="{value: Countries}"
             SelectedValue="{value: Country2}" />

Form Controls

Select dates, numbers or choose ranges using wide variety of advanced form controls. All controls support validation and other commonly requested features.

<bp:DatePicker SelectedDate="{value: PublishDate}" />

<bp:MultiSelect DataSource="{value: HashTags}"
                SelectedValues="{value: SelectedHashTags}" />

<bp:NumericUpDown Value="{value: NumberOfPosts}"
                  MinValue="1"
                  MaxValue="30" />

<bp:RangeSlider SelectedMinValue="{value: MinPrice}"
                SelectedMaxValue="{value: MaxPrice}"
                MinValue="0"
                MaxValue="100000" />

<p>{{value: MinPrice.ToString("c0")}}
    - {{value: MaxPrice.ToString("c0")}}</p>

GridView and DataPager

Presenting data has never been easier. The Business Pack grid and pager controls support server-side sorting, paging, custom filtering, or features like inline editing.

<bp:GridView DataSource="{value: Customers}">
    <bp:GridViewTextColumn HeaderText="Name" 
                           Value="{value: Name}" 
                           AllowSorting 
                           AllowFiltering />
    <bp:GridViewTextColumn HeaderText="Region" 
                           Value="{value: Region}" 
                           AllowSorting 
                           AllowFiltering />
    <bp:GridViewTextColumn HeaderText="Created" 
                           Value="{value: CreatedOn}" 
                           AllowSorting 
                           AllowFiltering 
                           FormatString="d" />
    <bp:GridViewTextColumn HeaderText="Credit" 
                           Value="{value: CreditAmount}" 
                           AllowSorting 
                           AllowFiltering 
                           FormatString="c" />
</bp:GridView>
<bp:DataPager DataSet="{value: Customers}" />

ListView

Allow selection of multiple items in row or tiles selection mode with the ListView control. Define your custom templates for complex items.

<bp:ListView DataSource="{value: Fruit}"
             SelectedValues="{value: SelectedFruit}">
    <RowTemplate>
        <img src="{value: "/img/"+ ImageName + ".png"}"
                 alt="{value: Name}" />
        {{value: _this}}
    </RowTemplate>
</bp:ListView>

TreeView

Display hierarchical data conveniently with the TreeView control.

<bp:TreeView DataSource="{value: Files}"
             SelectedValues="{value: SelectedFiles}"
             ItemKeyBinding="{value: Name}"
             ItemHasChildrenBinding="{value: HasItems}"
             ItemChildrenBinding="{value: Items}">
    <ItemTemplate>
        <div>{{value: Name}}</div>
    </ItemTemplate>
</bp:TreeView>

Modal Dialogs

Declare ModalDialog and control it just by switching a boolean property.

<bp:Button Text="Show Dialog" 
           Click="{staticCommand: Dialog = true}" />

<bp:ModalDialog HeaderText="Confirmation" 
                IsDisplayed="{value: Dialog}">
    <ContentTemplate>
        <p>Do you really want to delete the item?</p>
    </ContentTemplate>
    <FooterTemplate>
        <bp:Button Text="Delete" 
                   Click="{staticCommand: Dialog = false}" />
    </FooterTemplate>
</bp:ModalDialog>

FAQ

Can I customize the design of the components?

DotVVM Business Pack comes with 3 themes:

  • Enterprise theme is a default look & feel that can be customized using CSS variables. It's easy to change colors, fonts, paddings or borders.
  • Bootstrap 4 theme is ideal when you use default Bootstrap styles – the Business Pack components will look like native Bootstrap elements.
  • Empty theme can be used if you plan to develop your own style of the components. It's a foundation for building a heavily customized version of Business Pack controls.

I am not sure if Business Pack covers all my needs.

Contact us on e-mail or book an online meeting - tell us what components you've been using in your apps so far and we'll help you find the equivalent component in Business Pack, or advise how to implement the same thing in DotVVM.

Is the license perpetual?

Definitely! Once you purchase the license, you can use the library forever without any restrictions.

You will also get 12 months of updates and bug fixes, so any time we add a new feature, you'll get it.

The product is licensed on a per-developer basis, and you can use the license in an unlimited number of projects.