26 Apr 20182 minutes to read

GroupButton can populate the groupbutton items based on datasource and by specifying the associated fields. You can bind data from both remote and local sources.
Refer the below table to know about the available fields

Field is a property that includes the object type. Fields are used to bind the data source and it includes following field members to make binding easier.

List of Field members

Name Description
DataSource Datasource receives Essential DataManager object and JSON object.
Id Specifies the id to Groupbutton item
Text Specifies the text of Groupbutton item
SpriteCssClass Specifies the sprite CSS class to “LI” item list
Url Specifies the href attribute of "A" tag in item list
PrefixIcon Specifies the PrefixIcon class for Groupbutton item list
SuffixIcon Specifies the SuffixIcon class for Groupbutton item list
ImagePosition Specifies the position of Image in Groupbutton item list
LinkAttribute Specifies the link attribute to “A” tag in item list
HtmlAttribute Specifies the HTML attribute to “li” tag in item list
ContentTemplate Specifies the template content for customizing the Groupbutton items
Selected Specifies initial selection state of GroupButton item
ContentType Specifies Content type of Groupbutton Item. The possible values are
1. TextOnly
2. ImageOnly
3. ImageBoth
4. TextAndImage
5. ImageTextImage

Local data

To populate the Groupbutton items with the local data, map the field names mentioned in the above table with the property names.

  1. Add the following code in your view page to render GroupButton with local data
  • // Add the following code in your CSHTML page.
    @Html.EJ().GroupButton("groupbutton11").Datasource((IEnumerable<Groupbutton_mvc.ButtonController.Groupbutton>)ViewBag.Model).GroupButtonFields(e => e.Text("text"))
  • C#
  • using System;
    using System.Collections.Generic;
    using System.Web.Mvc;
    using Groupbutton_mvc.Models;
    namespace Groupbutton_mvc
        public class ButtonController: Controller
            public class Groupbutton
                public string text { get; set; }
                public string id { get; set; }
            public List<Groupbutton> model = new List<Groupbutton>();
            public ActionResult ButtonFeatures()
                model.Add(new Groupbutton { text = "Item1" });
                model.Add(new Groupbutton { text = "Item2" });
                model.Add(new Groupbutton { text = "Item3" });
                ViewBag.Model = model;
                return View();

    The following screenshot displays the output of the above code.

    Local data of GroupButton