New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Binding

When using the helpers, you can bind the checkbox items by using the Items() method or the BindTo() method.

Items Method

The example below demonstrates how to use the Items() method to configure the checkboxes in the CheckBoxGroup widget.

Razor
    @(Html.Kendo().CheckBoxGroup()
        .Name("checkboxgroup")
        .Items(i =>
        {
            i.Add().Label("English").Value("1");
            i.Add().Label("Spanish").Value("2");
            i.Add().Label("Russian").Value("3");
        })
        .Value(new string[] { "1" })
    )

BindTo Method

You can configure the items in the CheckBoxGroup widget by using the BindTo method.

  1. Pass the data to the view through the view model.

    Razor
     public ActionResult Index()
     {
         var itemsList = new List<InputGroupItemModel>()
         {
             new InputGroupItemModel()
             {
                 Label = "Yes",
                 Value = "one"
             },
              new InputGroupItemModel()
             {
                 Label = "No",
                 Value = "two"
             },
               new InputGroupItemModel()
             {
                 Label = "N/A",
                 Value = "three"
             }
         };
    
         return View(new CheckBoxGroupViewModel() { Items = itemsList, CheckBoxGroupValue = new string[] { "two" }  });
     }
    
     public class CheckBoxGroupViewModel
     {
         public List<InputGroupItemModel> Items { get; set; }
    
     	public string[] CheckBoxGroupValue { get; set; }
     }
     
     public class InputGroupItemModel : IInputGroupItem
     {
     	public IDictionary<string, object> HtmlAttributes { get; set; }
    
     	public string CssClass { get; set; }
    
     	public bool? Enabled { get; set; }
    
     	public bool? Encoded { get; set; }
    
     	public string Label { get; set; }
    
     	public string Value { get; set; }
     }
  2. Add the CheckBoxGroup to the view and bind it to a property of the view model.

    Razor
        @model MvcApplication1.Models.CheckBoxGroupViewModel
    
        @(Html.Kendo().CheckBoxGroup()
            .Name("checkboxgroup")
            .BindTo(Model.Items)
    		.Value(Model.CheckBoxGroupValue)
        )

Model Binding

You can implement model binding both with local and remote data.

The CheckBoxGroup component is not accustomed to complex object-binding scenarios.

Model Binding with Local Data

Razor
    @model CheckBoxGroupModel

    @(Html.Kendo().CheckBoxGroupFor(model => model.CheckBoxGroupValue)
        .Name("checkboxgroup")
        .Items(i =>
        {
            i.Add().Label("English").Value("1");
            i.Add().Label("Spanish").Value("2");
            i.Add().Label("Russian").Value("3");
        })
    )

Model Binding with Remote Data

Razor
    @model CheckBoxGroupModel

    @(Html.Kendo().CheckBoxGroupFor(model => model.CheckBoxGroupValue)
         .HtmlAttributes(new { style = "height: auto;" })
         .Layout(CheckBoxGroupLayout.Vertical)
         .BindTo((List<IInputGroupItem>)ViewData["CheckBoxGroupItems"])
    )

See Also