We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
@{
var selectedValue = new List<int> { 1 };
}
@(Html.EJ().GroupButton("ColorGroupButton").Width("60%").GroupButtonMode(GroupButtonMode.RadioButton).ShowRoundedCorner(true).Items(item =>
{
item.Add().Text("Color 1");
item.Add().Text("Color 2");
item.Add().Text("Color 3");
item.Add().Text("Color 4");
}).SelectedItemIndex(selectedValue)
)
@(Html.EJ().Button("Button1")
.Size(ButtonSize.Normal)
.Text("Save")
.CssClass("e-success")
.ClientSideEvents(events => events.Click("btnClick")))
<script>
function btnClick() {
//create instance object for GroupButton
var instance = $("#ColorGroupButton").ejGroupButton('instance');
//find the total items in the GroupButton
var totalItems = instance.element.find('.e-grp-btn-item').length;
//find the active button item in the GroupButton
activeitem = instance.model.selectedItemIndex;
//Condition to check the active button is not the last button item of the GroupButton
if (activeitem < totalItems - 1) {
instance.option("selectedItemIndex", [activeitem[0] + 1]);
} else {
instance.option("selectedItemIndex", [0]);
}
}
</script> |
@(Html.EJ().GroupButton("ColorGroupButton")
.Width("60%")
.Height("100%")
.Orientation(Orientation.Vertical)
.GroupButtonMode(GroupButtonMode.RadioButton)
.ShowRoundedCorner(true).GroupButtonFields(gf => gf.Text("Color"))
)
<script>
function readColor() {
var colorGroupButtonObj = $('#ColorGroupButton').data("ejGroupButton");
colorGroupButtonObj.option("selectedItemIndex", [-1]);
$.ajax({
url: '@Url.Action("Read_ProdColor")',
dataType: "json",
data: {
'prod': $("#Prod").data("ejDropDownList").model.text,// returns selected value in the dropdown
},
type: "POST",
success: function (val) {
colorGroupButtonObj.option("dataSource",val);//updating datasource of the groupbutton on selecting a product
var instance = $("#ColorGroupButton").ejGroupButton('instance');
var totalItems = colorGroupButtonObj.element.find('.e-grp-btn-item').length;
for(i = 0; i < totalItems; i++)
{
if($("#ParamMesureGroupButton").ejGroupButton('instance').element.fields.text == 'red')
$("#ParamMesureGroupButton").ejGroupButton('instance').element.cssClass('grpButtonCss');
}
},
error: function (result) {
alert("error");
}
});
}
</script>
|
@Html.EJ().GroupButton("groupbutton").Datasource((IEnumerable<MVCEJ1.Controllers.HomeController.Groupbutton>)ViewBag.Model).GroupButtonFields(e => e.Text("text"))
<style>
.e-groupbutton .e-ul .red {
background: red;
}
</style>
<script>
$(document).ready(function () {
var instance = $("#groupbutton").ejGroupButton('instance');
// access groupbutton item’s text
var textelement = instance.element.find('.e-btntxt');
for (var i = 0; i < textelement.length; i++) {
if (textelement[i].innerText == "red") {
textelement[i].parentElement.parentElement.classList.add('red');
}
}
});
</script> |
|
@Html.EJ().GroupButton("groupbutton11").Datasource((IEnumerable<MVCEJ1.Controllers.HomeController.Groupbutton>)ViewBag.Model).GroupButtonFields(e => e.Text("text").HtmlAttribute("htmlAttribute"))
<style>
.e-groupbutton .e-ul .red {
background: red;
}
</style>
|
|
namespace MVCEJ1.Controllers
{
public class HomeController : Controller
{
public class Groupbutton
{
public string text { get; set; }
public string id { get; set; }
public object htmlAttribute { get; set; }
}
public List<Groupbutton> model = new List<Groupbutton>();
public ActionResult Index()
{
// add html attributes to the groupbutton items here in the Groupbutton’s datasource
Dictionary<string, object> htmlAttr = new Dictionary<string, object>();
htmlAttr.Add("class", "red");
model.Add(new Groupbutton { text = "blue", htmlAttribute = htmlAttr });
model.Add(new Groupbutton { text = "red" });
model.Add(new Groupbutton { text = "green" });
ViewBag.Model = model;
return View();
}
}
} |
