Kendo UI Create ButtonGroup control using a viewmodel - kendo-ui

Question

I'm trying to find an example to create a ButtonGroup using a viewmodel.
How can I do that?
#(Html.Kendo().ButtonGroup().Name("PredictionType").Items(t =>
{
t.Add().Text("Monthly");
t.Add().Text("Weekly");
t.Add().Text("Yearly");
}))

Answer 1

ButtonGroup does not have a DataSource configuration item like Grid or DropDownList. Use a Razor code block in the HtmlHelper to loop over a list of items that are added. This example has the controller creating the list of items.
View - Views\Example1\Index.cshtml
#model Example.ViewModels.MySettings
#{
ViewBag.Title = "Index";
}
<div>
Prediction Type
#(Html.Kendo().ButtonGroup()
.Name("PredictionType")
.Items(t =>
{
foreach (var item in Model.PredictionTypeItems)
{
t.Add().Text(item);
}
})
)
</div>
<div>
Exponent Level
#(Html.Kendo().ButtonGroup()
.Name("ExponentLevel")
.Items(t =>
{
foreach (var item in Model.ExponentLevelItems)
{
t.Add().Text(item.ToString());
}
})
)
</div>
Model - ViewModels\MySetting.cs
using System.Collections.Generic;
namespace Example.ViewModels
{
public class MySettings
{
public IList<string> PredictionTypeItems { get; set; }
public IList<int> ExponentLevelItems { get; set; }
}
}
Controller - Controllers\Example1Controller.cs
using System.Collections.Generic;
using System.Web.Mvc;
using Example.ViewModels;
namespace Example.Controllers
{
public class Example1Controller : Controller
{
public ActionResult Index()
{
var model = new MySettings {
PredictionTypeItems = new List<string> { "Monthly", "Weekly", "Yearly" },
ExponentLevelItems = new List<int> { -2, -1, 0, 1, 2 }
};
return View(model);
}
}
}
A more robust scenario would have the items come out of a data base table.