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.

    @(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" })
    )

    @{ 
        var data = new string[] { "1" };
    }
    <kendo-checkboxgroup name="checkboxgroup"
                        value="data">
        <kendo-checkboxgroup-items>
            <kendo-checkboxgroup-item value="1" label="English"></kendo-checkboxgroup-item>
            <kendo-checkboxgroup-item value="2" label="Spanish"></kendo-checkboxgroup-item>
            <kendo-checkboxgroup-item value="3" label="Russian"></kendo-checkboxgroup-item>
        </kendo-checkboxgroup-items>
    </kendo-checkboxgroup>

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.

   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.

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

       @model MvcApplication1.Models.CheckBoxGroupViewModel
   
       <kendo-checkboxgroup name="checkboxgroup"
                     value="Model.CheckBoxGroupValue"
                     bind-to="Model.Items">
       </kendo-checkboxgroup>
   

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

    @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 CheckBoxGroupModel

    <kendo-checkboxgroup for="CheckBoxGroupValue">
        <kendo-checkboxgroup-items>
            <kendo-checkboxgroup-item value="1" label="English"></kendo-checkboxgroup-item>
            <kendo-checkboxgroup-item value="2" label="Spanish"></kendo-checkboxgroup-item>
            <kendo-checkboxgroup-item value="3" label="Russian"></kendo-checkboxgroup-item>
        </kendo-checkboxgroup-items>
    </kendo-checkboxgroup>

    public ActionResult Index()
    {
        var model = new CheckBoxGroupModel
        {
            CheckBoxGroupValue = new List<string>() { "1" }
        };  

        return View(model);
    }

    public class CheckBoxGroupModel
    {
        public string[] CheckBoxGroupValue { get; set; }
    }

Model Binding with Remote Data

    @model CheckBoxGroupModel

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

    @model CheckBoxGroupModel

    <kendo-checkboxgroup for="CheckBoxGroupValue"
                         value="Model.CheckBoxGroupValue"
                         bind-to='(List<IInputGroupItem>)ViewData["CheckBoxGroupItems"]'>
    </kendo-checkboxgroup>

        private List<InputGroupItemModel> GetCheckBoxGroupItems()
         => new List<InputGroupItemModel>()
            {
                new InputGroupItemModel()
                {
                    Label = "Yes",
                    Value = "one"
                },
                 new InputGroupItemModel()
                {
                    Label = "No",
                    Value = "two"
                },
                  new InputGroupItemModel()
                {
                    Label = "N/A",
                    Value = "three"
                }
            };

        public ActionResult Index()
        {
            var model = new CheckBoxGroupModel
            {
                CheckBoxGroupValue = new List<string>() { "one" }
            };

            ViewData["CheckBoxGroupItems"] = GetCheckBoxGroupItems();

            return View(model);
        }

    public class CheckBoxGroupModel
    {
        public string[] CheckBoxGroupValue { get; set; }
    }

See Also

• Server-Side API