Bind and refresh GroupButton data with entity framework

Question

Hi,I want to know how to set group button data from Json data (data from sql server), filter with a DropDownList and get the selected button value.An example/scenario of what I need:  * Select a product from a DropDownList =>  * refresh the GroupButton color and set the color values of this product                                                                     =>  * refresh the GroupButton size and set the size values of this product * select a color and size * chose a quantity value * click save button * save the selected product, color, size and quantity in Orders table database.You find my scenario in the attachement bellow.Thanks for your help in advance.Regards,AnisAttachment: SyncfusionMvcGroupButton_e246e8f7.rar

Prem Kumar Madhan Raj · Answer

Hi Anis,   
  
Thanks for contacting Syncfusion Support.   
  
We can set the group button data from JSON data (data from SQL server) which will be filtered based on dropdown values by using GroupButtonFields API and assigning the values from the JSON Data to the required field. For example, in the shared sample while selecting a value in the dropdown, updated color list is obtained in JSON data, which should be the text of the color GroupButton. So, assigning the color values as text for the color GroupButton as shown in the below code snippet, displays the colors texts in group button.    
  




@(Html.EJ().GroupButton("ColorGroupButton")   
        .Width("100%")   
        .Height("100%")   
        .GroupButtonMode(GroupButtonMode.RadioButton)   
        .ShowRoundedCorner(true).GroupButtonFields(gf => gf.Text("Color"))   
        )   
   
@(Html.EJ().GroupButton("SizeGroupButton")   
        .Width("100%")   
        .Height("100%")   
        .GroupButtonMode(GroupButtonMode.RadioButton)   
        .ShowRoundedCorner(true).GroupButtonFields(gf => gf.Text("Size"))   
        )   
  
Updating color and size GroupButton data source with selected product in the DropDownList.   
  




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   
                    },   
                    error: function (result) {   
                        alert("error");   
                    }   
                });   
            }   
   
    function readSize() {   
   
        var sizeGroupButtonObj = $('#SizeGroupButton').data("ejGroupButton");   
        sizeGroupButtonObj.option("selectedItemIndex", [-1]);   
   
        $.ajax({   
            url: '@Url.Action("Read_ProdSize")',   
            dataType: "json",   
            data: {   
                'prod': $("#Prod").data("ejDropDownList").model.text, // returns selected value in the dropdown   
            },   
            type: "POST",   
            success: function (val) {   
                sizeGroupButtonObj.option("dataSource", val); //updating datasource of the groupbutton on selecting a product   
            },   
            error: function (result) {   
                alert("error");   
            }   
        });   
    }   
  
Also, we can get the selected GroupButton value from the selected GroupButton text as shown in the below code snippet.   
  




function btnClick(args) {   
   
                $.ajax({   
                    url: '@Url.Action("Save_Data")',   
                    dataType: "json",   
                    data: {   
                        'prod': $("#Prod").data("ejDropDownList").model.text,   
                        'color':$('#ColorGroupButton').data("ejGroupButton").element.find(".e-active .e-btntxt").text(),   
                        'size':$('#SizeGroupButton').data("ejGroupButton").element.find(".e-active .e-btntxt").text(),   
                        'qty': $('#quantity').data("ejNumericTextbox").model.value,   
                    },   
                    type: "POST",   
                    success: function (val) {   
                        $('#quantity').data("ejNumericTextbox").option("value","");   
                    },   
                    error: function (result) {   
                        alert("error");   
                    }   
                });   
            }   
  
For your convenience, we have made changes in the shared sample and attached in the below link.   

Sample Link: http://www.syncfusion.com/downloads/support/forum/136054/ze/SyncfusionMvcGroupButton806594274   
To know about Fields API, please check the below API documentation.   
  
Document link: https://help.syncfusion.com/api/js/ejgroupbutton#members:fields   
  
Regards,   Prem Kumar. M

Anis · Answer

Thank you so much for your help.Regards,

Prem Kumar Madhan Raj · Answer

Hi Anis, 

Most welcome. Please let us know if you need further assistance. 

Regards, 
Prem Kumar M