ButtonGroup

The ButtonGroup control is designed to organize buttons into a cohesive group. It can be single or multiple select, allowing multiple buttons to be selected simultaneously.
Cascade effect can be achieved by binding to parent controls, when the value of the parent is changed, the ButtonGroup will reload and the value of the parent will be sent its data function or url.

Basic usage

ButtonGroup/Index.cshtml

@(Html.Awe().ButtonGroup(new ButtonGroupOpt
{
    Name = "Cats",
    Url = Url.Action("GetCategories", "Data"),        
}))

Multiple select

ButtonGroup/Index.cshtml

@(Html.Awe().ButtonGroup(new ButtonGroupOpt
{
    Name = "Multi",
    Url = Url.Action("GetMealsImgByCateg", "Data"),
    Multiple = true
}
.Parameter("categories", Db.Categories[0].Id)))

Cascade

ButtonGroup/Index.cshtml

@(Html.Awe().ButtonGroup(new ButtonGroupOpt
{
    Name = "CatDd",
    Url = Url.Action("GetCategories", "Data"),
    Value = Db.Categories[2].Id,
    //Multiple = true
}))
<br />
<br />
@(Html.Awe().ButtonGroup(new ButtonGroupOpt
{
    Name = "MealsDd",
    AutoSelectFirst = true,
    Url = Url.Action("GetMeals", "Data"),
}.Parent("CatDd", "categories")))

Awesome/DataController.cs

public IActionResult GetMeals(int[] categories)
{
    categories = categories ?? new int[] { };
    var items = Db.Meals.Where(o => categories.Contains(o.Category.Id))
        .Select(o => new KeyContent(o.Id, o.Name));

    return Json(items);
}

ButtonGroup with icons

ButtonGroup/Index.cshtml

@(Html.Awe().ButtonGroup(new ButtonGroupOpt
{
    Name = "icosBtnGroup",
    DataFunc = "getBtnGroupData",
    Encode = false,
    CssClass = "btngIcons",
    FieldAttr = new { style = "width: 5em;" }
}))

<style>
    .btngIcons .awe-btn {
        padding: .2em .4em;
    }
</style>

<script>
    function getBtnGroupData(){
        return [
            {k: 1, c: `<svg width="100%" height="100%" viewBox="0 0 18 18" fit="" preserveAspectRatio="xMidYMid meet" focusable="false" sandboxuid="2"><path d="M3 7h3v9H3V7zm5-3h3v12H8V4zm5 6h3v6h-3v-6z" fill-rule="evenodd" sandboxuid="2"></path></svg>`},
            {k: 2, c: `<svg width="100%" height="100%" viewBox="0 0 48 48" fit="" preserveAspectRatio="xMidYMid meet" focusable="false" sandboxuid="2"><path d="M7 36.99l12-12.03 8 8 17-19.12-2.82-2.83L27 26.96l-8-8L4 33.99z" fill-rule="evenodd" sandboxuid="2"></path></svg>`}
        ];
    }
</script>

Comments