CODEWITHSUNDEEP
kendo-uikendo-asp.net-mvctelerik-mvcbuttongroup
Lorena Pita
Lorena Pita

Reputation: 1516

Kendo UI Create ButtonGroup control using a viewmodel

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");
                               }))

Upvotes: 0

Views: 920

Answers (1)

Richard
Richard

Reputation: 27516

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.

Upvotes: 1

Related Questions