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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Get & set selected button index

Thread ID:

Created:

Updated:

Platform:

Replies:

140665 Oct 31,2018 11:03 AM UTC Nov 8,2018 10:51 AM UTC ASP.NET MVC 7
loading
Tags: GroupButton
Anis
Asked On October 31, 2018 11:03 AM UTC

Hi,

I tried switching from one button to another in a GroupButton using simple button event in javascript, but I have a problem with returning the index of the selected button.

How to retrieve the index of the selected button, move to the next button in same groupButtob and return to the first button if I'm in the last one.

See the attached document to better understand my need and my problem.

Regards,
Anis

Attachment: SyncfusionMvcGroupButton_ab4e855b.rar

Deepa Loganathan [Syncfusion]
Replied On November 1, 2018 10:20 AM UTC

Hi Anis,  
 
 
Thanks for contacting Syncfusion support.  
 
 
We understood your requirement.  
 
 
Query: How to retrieve the index of the selected button 
 
 
The currently selected item index will be exposed in the selected event of Groupbutton as “index” and you can get the selected index of Groupbutton in Selected event as highlighted in below code snippet.  
 
 
<script> 
    function sizeGrpbtnSelect(args) { 
 
        var totalItems = args.element.parent().find(".e-grp-btn-item").length; 
        var groupButtonObj = $('#SizeGroupButton').data("ejGroupButton"); 
        alert(args.index) 
        if (!(args.index < totalItems - 1)) { 
            groupButtonObj.option("selectedItemIndex", [0]); 
        } 
    } 
</script> 
 
 
Query: move to the next button in same groupButton and return to the first button if I'm in the last one 
 
 
This can be achieved by comparing the total number of Groupbutton items with the selectedItemIndex. Based on that you can selected the first item by setting the selectedItemIndex of Groupbutton to 0 to return to first item as highlighted below. 
 
 
<script> 
    function sizeGrpbtnSelect(args) { 
 
        var totalItems = args.element.parent().find(".e-grp-btn-item").length; // get the total number of items in Group button 
        var groupButtonObj = $('#SizeGroupButton').data("ejGroupButton"); 
        alert(args.index) 
        if (!(args.index < totalItems - 1)) { // compare seleccteditemindex with total number of items 
            groupButtonObj.option("selectedItemIndex", [0]); // set the selection of groupbutton to first item 
        } 
    } 
</script> 
 
 
Please let us know if you have any further queries.  
 
 
Regards,  
 
Deepa L. 


Anis
Replied On November 1, 2018 11:10 AM UTC

Hi,
This is not what I want, you did not understand my requirement.

I have two GroupButton, one for sizes and one for colors, so when the user selects a size the program automatically selects the first color from the second GroupButton(item[0]), and after he enters a value in the NumericTextbox field and press the save button, the program must select the next color (get color selectedItemIndex + 1) "automatically ", and if it's the last item/color, the colors GroupButton must be initialized to the first item / color ("selectedItemIndex", [0]).

There is no events on my second GroupButton (colors), the user does not select colors, it's relation "1 size --> all colors" .
 
So how to get the index of active button and move to the next button when the user click the save button?

Regards,
Anis

Deepa Loganathan [Syncfusion]
Replied On November 2, 2018 10:49 AM UTC

Hi Anis,   
 
Sorry for the misunderstanding.  
 
We have investigated your requirement and we understood that you wish to get the index of currently selected item in Groupbutton and move to the first item when save button is clicked with the last item selected.  
 
 
This can be achieved by using the selectedItemIndex API of Groupbutton. While changing the active item of Groupbutton, the selectedItemIndex API will be updated in the Groupbutton’s model with zero indexing, that can then be used to detect the last item of groupbutton based on the items count. Please check the below code.  
 
 

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

 
Here, we have changed the active item of Groupbutton upon save button click (btnClick) and compared the selectedItemIndex with the total number of items to check if it is last item in the Groupbutton, inturn move the selection to first item of Groupbutton. 
 
 
Kindly check our API reference guide to more about the options available in Groupbutton.  
 
 
 
If this is not your requirement, please kindly let us know the difficulty you are facing in achieving your requirement to help us serve you better.  
 
 
 
Regards,  
 
Deepa L 


Anis
Replied On November 2, 2018 02:10 PM UTC

Hi,
Thanks a lot for your support,  this worked perfect for me!

Regards,
Anis

Deepa Loganathan [Syncfusion]
Replied On November 5, 2018 06:11 AM UTC

Hi Anis,  
 
   
We are glad to know that your problem has been solved. Please let us know if you need any assistance.  
   
 
Regards,  
 
Deepa L. 


Anis
Replied On November 7, 2018 12:24 PM UTC

Hi,
I need your help.
Is there a way to change some button css style (button color) in a GroupButton using conditions (not for all buttons in the GroupButton).
Example: when I initialize my GroupButton with JSON data, I want to change the color of button if "Id = 1" or "color = 'red' ".
I searched in API document, but I don't found how to do it.
Please see the code below.

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


Deepa Loganathan [Syncfusion]
Replied On November 8, 2018 10:51 AM UTC

Hi Anis,   
 
 
We have checked with your requirement to customize the groupbutton items based on the item text or ID. The groupbutton item’s text can be accessed as highlighted in the below code and can then be used to conditionally add custom class to the Groupbutton items. 
 
 
[index.cshtml] 
 
 
@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> 
 
 
 
Another way to add custom class to the Groupbutton item is by using the HtmlAttribute property to add Html attributes to the groupbutton items as given in the below code.  
 
 
Please check our below help document to know more about the options available to customize Groupbutton items.  
 
 
 
 
[index.cshtml] 
 
 
@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> 
 
 
 
 
[Controller] 
 
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(); 
        } 
    } 
} 
 
 
 
Please let us know if you have any further queries. 
 
 
Regards,  
 
Deepa L. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;