Пользовательский интерфейс Kendo Создание элемента управления ButtonGroup с использованием модели представления

Question

Я пытаюсь найти пример для создания ButtonGroup с использованием модели представления. Как я могу это сделать?

   @(Html.Kendo().ButtonGroup().Name("PredictionType").Items(t =>
                               {
                                   t.Add().Text("Monthly");
                                   t.Add().Text("Weekly");
                                   t.Add().Text("Yearly");
                               }))

Answer 1

ButtonGroup не имеет DataSource элемент конфигурации как Grid или же DropDownList, Используйте блок кода Razor в HtmlHelper для циклического перемещения по списку добавляемых элементов. В этом примере контроллер создает список элементов.

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>

Модель - 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);
        }
    }
}

В более надежном сценарии элементы будут выходить из таблицы базы данных.